👈 编写高德地图组件

kicc-ui/src/components/AMap/src/Amap.vue

@@ -7,6 +7,7 @@
   import { largeHospitalMapList, smallHospitalMapList, specimenMapList } from './data';
   import hospital from '/@/assets/images/hospital.svg';
   import medicalKit from '/@/assets/images/medical-kit.svg';
+  import hospitalTwinkle from '/@/assets/images/hospital-twinkle.gif';
   import redFlag from '/@/assets/images/redFlag.svg';
 
   let map;
@@ -36,7 +37,7 @@
         viewMode:'3D',
         resizeEnable: true,
         center: [112.919043,28.288623],
-        zoom: 16,
+        zoom: 17,
         keyboardEnable: true
       }
     };
@@ -44,7 +45,7 @@
     AMapLoader.load({
       key: mapConfig.amapKey,
       version: '2.0',
-      plugins: ['AMap.MarkerCluster']
+      plugins: ['AMap.MarkerCluster', 'AMap.RectangleEditor', 'AMap.Driving']
     }).then(AMap => {
       // 创建地图实例
       map = new AMap.Map(instance.refs.mapview, mapConfig.options);
@@ -102,7 +103,7 @@
       });
       largeHospitalMarkerCluster.on('click', ctx => {
         const { lnglat } = ctx;
-        map.setZoomAndCenter(17, lnglat);
+        map.setZoomAndCenter(18, lnglat);
       });
       const largeHospitalPoints = largeHospitalMapList.map((v: any) => ({
         lnglat: [v.lng, v.lat],
@@ -117,9 +118,11 @@
         renderMarker(ctx) {
           const { marker, data } = ctx;
           if (Array.isArray(data) && data[0]) {
-            const { title, orientation } = data[0];
+            const { title, orientation, southWest, northEast, notify } = data[0];
-            const content = `<img width="30px" height="30px" style="transform: scale(1) rotate(${360 - Number(orientation)}deg);" src='${hospital}'/>`;
+            let content = `<img width="30px"
-            marker.setContent(content);
+                                height="30px"
+                                style="transform: scale(1) rotate(${360 - Number(orientation)}deg);"
+                                src='${hospital}'/>`;
             marker.setLabel({
               direction: 'bottom',
               // 设置文本标注偏移量
@@ -128,11 +131,48 @@
               content: `<div>${title}</div>`
             });
             marker.setOffset(new AMap.Pixel(-18, -10));
+            if (notify && southWest?.length>0 && northEast?.length>0) {
+              // 下级医院通知画布图层
+              const canvas = document.createElement('canvas');
+              canvas.width = canvas.height = 200;
+              const context = canvas.getContext('2d');
+              context.fillStyle = 'rgb(0,100,255)';
+              context.strokeStyle = 'white';
+              context.globalAlpha = 1;
+              context.lineWidth = 1;
+              let radious = 0;
+              const draw = function () {
+                context.clearRect(0, 0, 200, 200);
+                context.globalAlpha = (context.globalAlpha - 0.01 + 1) % 1;
+                radious = (radious + 1) % 100;
+                context.beginPath();
+                context.arc(100, 100, radious, 0, 2 * Math.PI);
+                context.fill();
+                context.stroke();
+                // 刷新渲染图层
+                canvasLayer.reFresh();
+                AMap.Util.requestAnimFrame(draw);
+              };
+              const canvasLayer = new AMap.CanvasLayer({
+                canvas: canvas,
+                bounds: new AMap.Bounds(southWest, northEast)
+              });
+              map.addLayer(canvasLayer);
+              draw();
+              content = `<img width="30px"
+                              height="30px"
+                              style="transform: scale(1) rotate(${360 - Number(orientation)}deg);"
+                              src='${hospitalTwinkle}'/>`;
+            }
+            marker.setContent(content);
           }
         },
         renderClusterMarker(ctx) {
           const { clusterData, marker, count } = ctx;
-          const content = `<img width="30px" height="30px" src='${hospital}'/>`;
+          let content = `<img width="30px" height="30px" src='${hospital}'/>`;
+          if(clusterData.some(item => item.notify && item.southWest?.length>0 && item.northEast?.length>0)){
+            content = `<img width="30px" height="30px" src='${hospitalTwinkle}'/>`;
+          }
           marker.setContent(content);
           const title = count == 1 ? clusterData[0].title : `下级医院数量:${count}`;
           marker.setLabel({
@@ -147,7 +187,7 @@
       });
       smallHospitalMarkerCluster.on('click', ctx => {
         const { lnglat } = ctx;
-        map.setZoomAndCenter(17, lnglat);
+        map.setZoomAndCenter(18, lnglat);
       });
       const smallHospitalPoints = smallHospitalMapList.map((v: any) => ({
         lnglat: [v.lng, v.lat],
@@ -192,7 +232,7 @@
       });
       specimenMarkerCluster.on('click', ctx => {
         const { lnglat } = ctx;
-        map.setZoomAndCenter(17, lnglat);
+        map.setZoomAndCenter(18, lnglat);
       });
       const specimenPoints = specimenMapList.map((v: any) => ({
         lnglat: [v.lng, v.lat],
@@ -200,6 +240,40 @@
       }));
       specimenMarkerCluster?.setData(specimenPoints);
 
+      // 矩形区域绘制计算出位置
+      /*const southWest = new AMap.LngLat(112.916931,28.283041);
+      const northEast = new AMap.LngLat(112.919049,28.284781);
+      const bounds = new AMap.Bounds(southWest, northEast);
+      const rectangle = new AMap.Rectangle({
+        bounds: bounds,
+        strokeColor:'red',
+        strokeWeight: 6,
+        strokeOpacity:0.5,
+        strokeDasharray: [30,10],
+        strokeStyle: 'dashed',
+        fillColor:'blue',
+        fillOpacity:0.5,
+        cursor:'pointer',
+        zIndex:50
+      });
+      rectangle.setMap(map);
+      map.setFitView([rectangle]);
+      const rectangleEditor = new AMap.RectangleEditor(map, rectangle);
+      rectangleEditor.open();*/
+
+      // 构造路线导航类
+      const driving = new AMap.Driving({
+        map: map,
+        panel: 'panel'
+      });
+      // 根据起终点经纬度规划驾车导航路线
+      driving.search(new AMap.LngLat(116.379028, 39.865042), new AMap.LngLat(116.427281, 39.903719), function(status, result) {
+        if (status === 'complete') {
+          console.log('绘制驾车路线完成');
+        } else {
+          console.error('获取驾车数据失败：' + result);
+        }
+      });
 
       // 加载完毕
       complete();
@@ -227,12 +301,13 @@
   border: none !important;
 }
 
-:deep .amap-logo {
+:deep(.amap-logo) {
   display: none!important;
 }
 
-:deep .amap-copyright {
+:deep(.amap-copyright) {
   bottom:-100px;
   display: none!important;
 }
+
 </style>

kicc-ui/src/components/AMap/src/data.ts

@@ -10,6 +10,9 @@ type mapType = {
   orientation: number;
   lng: number;
   lat: number;
+  southWest: number[];
+  northEast: number[];
+  notify: boolean;
 };
 
 export const largeHospitalMapList: mapType[] = [
@@ -19,13 +22,13 @@ export const largeHospitalMapList: mapType[] = [
 ];
 
 export const smallHospitalMapList: mapType[] = [
-  {title: '下级医院:湘雅医院', orientation: 0, lng: 112.918119, lat: 28.282891},
+  {title: '下级医院:湘雅医院', orientation: 0, lng: 112.918119, lat: 28.282891, southWest: [112.916931,28.283041], northEast: [112.919049,28.284781], notify: true},
-  {title: '下级医院:神经病医院', orientation: 0, lng: 112.918919, lat: 28.282991},
+  {title: '下级医院:神经病医院', orientation: 0, lng: 112.918919, lat: 28.282991, southWest: [112.917838,28.282044], northEast: [112.919956,28.283784], notify: true},
-  {title: '下级医院:第三医院', orientation: 0, lng: 112.918019, lat: 28.283991}
+  {title: '下级医院:第三医院', orientation: 0, lng: 112.918019, lat: 28.283991, southWest: [112.917033,28.281883], northEast: [112.919151,28.283623], notify: true}
 ];
 
 export const specimenMapList: mapType[] = [
   {title: '收样员:小明', orientation: 0, lng: 112.915897, lat: 28.295506},
   {title: '收样员:小红', orientation: 0, lng: 112.914481, lat: 28.294977},
-  {title: '收样员:小易', orientation: 0, lng: 112.913864, lat: 28.295114}
+  {title: '收样员:小测', orientation: 0, lng: 112.913864, lat: 28.295114}
 ];

kicc-ui/src/main.ts

@@ -50,6 +50,11 @@ async function bootstrap() {
   await router.isReady();
 
   app.mount('#app', true);
+
+  // 高德地图安全配置
+  window._AMapSecurityConfig = {
+    securityJsCode: 'ea9d5e2fb6383665de6c3c7b4e53c289'
+  };
 }
 
 void bootstrap();