feat(location): device location

config/routes.ts

@@ -150,6 +150,12 @@
         icon: 'smile',
         component: './device/Alarm',
       },
+      {
+        path: '/device/location',
+        name: 'location',
+        icon: 'smile',
+        component: './device/Location',
+      },
     ],
   },
   {

package.json

@@ -54,6 +54,8 @@
     "not ie <= 10"
   ],
   "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
+    "@amap/amap-jsapi-types": "^0.0.8",
     "@ant-design/charts": "^1.3.1",
     "@ant-design/icons": "^4.5.0",
     "@ant-design/pro-card": "^1.16.2",

src/components/AMapComponent/index.less

@@ -0,0 +1,58 @@
+.home,
+#map-container {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.draw {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 0;
+  height: 100%;
+
+  .draw-warp {
+    position: relative;
+    right: 0;
+    height: 100%;
+    transition: right 0.6s;
+
+    &.show {
+      right: 990px;
+    }
+
+    .draw-button {
+      position: absolute;
+      top: 20px;
+      left: -36px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 36px;
+      height: 36px;
+      color: #fff;
+      background-color: #1890ff;
+      border-radius: 2px 0 0 2px;
+
+      .draw-button-icon {
+        transform: rotate(0);
+        transition: all 0.3s;
+      }
+
+      & .active {
+        transform: rotate(180deg);
+      }
+    }
+
+    .draw-content {
+      box-sizing: border-box;
+      width: 990px;
+      height: 100%;
+      padding: 20px;
+      background-color: #fff;
+      box-shadow: 0 0 12px rgb(0 0 0 / 30%);
+    }
+  }
+}

src/components/AMapComponent/index.tsx

@@ -0,0 +1,73 @@
+import { useEffect, useRef, useState } from 'react';
+import AMapLoader from '@amap/amap-jsapi-loader';
+import classNames from 'classnames';
+import { LeftOutlined } from '@ant-design/icons';
+import './index.less';
+
+const AMapComponent = () => {
+  const mapRef = useRef({});
+
+  useEffect(() => {
+    AMapLoader.load({
+      key: '4a8929c85e2a1a8a1eae4ebc7d519ba4',
+      version: '2.0',
+      plugins: ['AMap.ToolBar', 'AMap.Driving'],
+      AMapUI: {
+        version: '1.1',
+        plugins: [],
+      },
+      Loca: {
+        version: '2.0.0',
+      },
+    })
+      .then((AMap) => {
+        const map = new AMap.Map('map-container', {
+          viewMode: '3D',
+          zoom: 5,
+          zooms: [2, 22],
+          center: [105.602725, 37.076636],
+        });
+        const positionArr = [
+          [113.357224, 34.977186],
+          [114.555528, 37.727903],
+          [112.106257, 36.962733],
+          [109.830097, 31.859027],
+          [116.449181, 39.98614],
+        ];
+        for (const item of positionArr) {
+          const marker = new AMap.Marker({
+            position: [item[0], item[1]],
+          });
+          map.add(marker);
+        }
+        mapRef.current = map;
+      })
+      .catch((e) => {
+        console.log(e);
+      });
+  }, []);
+  const [show, setShow] = useState<boolean>(false);
+  return (
+    <div className="home">
+      <div id="map-container" className="map" style={{ height: '600px' }} />
+      <div className="draw">
+        <div
+          className={classNames('draw-warp', {
+            show: show,
+          })}
+        >
+          <div
+            className={classNames('draw-button')}
+            onClick={() => {
+              setShow(!show);
+            }}
+          >
+            <LeftOutlined className={classNames('draw-button-icon', { active: show })} />
+          </div>
+          <div className="draw-content">....内容信息</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default AMapComponent;

src/pages/device/Location/index.tsx

@@ -0,0 +1,11 @@
+import { PageContainer } from '@ant-design/pro-layout';
+import AMapComponent from '@/components/AMapComponent';
+
+const Location = () => {
+  return (
+    <PageContainer title="地理位置">
+      <AMapComponent />
+    </PageContainer>
+  );
+};
+export default Location;