👈 编写高德地图组件

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

@@ -4,7 +4,7 @@
 <script lang="ts" setup>
   import AMapLoader from '@amap/amap-jsapi-loader';
   import { reactive, getCurrentInstance, onBeforeMount, onUnmounted } from 'vue';
-  import { largeHospitalMapList } from './data';
+  import { largeHospitalMapList, smallHospitalMapList, specimenMapList } from './data';
   import hospital from '/@/assets/images/hospital.svg';
   import medicalKit from '/@/assets/images/medical-kit.svg';
   import redFlag from '/@/assets/images/redFlag.svg';
@@ -48,7 +48,6 @@
     }).then(AMap => {
       // 创建地图实例
       map = new AMap.Map(instance.refs.mapview, mapConfig.options);
-      //地图中添加地图操作ToolBar插件
       map.plugin(['AMap.ToolBar', 'AMap.MapType', 'AMap.ControlBar', 'AMap.Scale'], () => {
         // 地图操作工具条插件
         map.addControl(new AMap.ToolBar());
@@ -66,8 +65,8 @@
         );
       });
 
+      // 上级医检医院标记点
       largeHospitalMarkerCluster = new AMap.MarkerCluster(map, [], {
-        // 聚合网格像素大小
         gridSize: 80,
         maxZoom: 14,
         renderMarker(ctx) {
@@ -78,17 +77,12 @@
             marker.setContent(content);
             marker.setLabel({
               direction: 'bottom',
-              //设置文本标注偏移量
+              // 设置文本标注偏移量
               offset: new AMap.Pixel(-4, 0),
-              //设置文本标注内容
+              // 设置文本标注内容
               content: `<div>${title}</div>`
             });
             marker.setOffset(new AMap.Pixel(-18, -10));
-            marker.on('click', ({ lnglat }) => {
-              //设置地图层级
-              map.setZoom(16);
-              map.setCenter(lnglat);
-            });
           }
         },
         renderClusterMarker(ctx) {
@@ -98,21 +92,17 @@
           const title = count == 1 ? clusterData[0].title : `上级医检医院数量:${count}`;
           marker.setLabel({
             direction: 'bottom',
-            //设置文本标注偏移量
+            // 设置文本标注偏移量
             offset: new AMap.Pixel(-4, 0),
-            //设置文本标注内容
+            // 设置文本标注内容
             content: `<div>${title}</div>`
           });
           marker.setOffset(new AMap.Pixel(-18, -10));
-          marker.on('click', ({ lnglat }) => {
-            //设置地图层级
-            map.setZoom(16);
-            map.setCenter(lnglat);
-          });
         }
       });
-      largeHospitalMarkerCluster.on('click', (data) => {
-        console.log('数据查看:',data);
+      largeHospitalMarkerCluster.on('click', ctx => {
+        const { lnglat } = ctx;
+        map.setZoomAndCenter(17, lnglat);
       });
       const largeHospitalPoints = largeHospitalMapList.map((v: any) => ({
         lnglat: [v.lng, v.lat],
@@ -120,6 +110,99 @@
       }));
       largeHospitalMarkerCluster?.setData(largeHospitalPoints);
 
+      // 下级医院标记点
+      smallHospitalMarkerCluster = new AMap.MarkerCluster(map, [], {
+        gridSize: 80,
+        maxZoom: 14,
+        renderMarker(ctx) {
+          const { marker, data } = ctx;
+          if (Array.isArray(data) && data[0]) {
+            const { title, orientation } = data[0];
+            const content = `<img width="30px" height="30px" style="transform: scale(1) rotate(${360 - Number(orientation)}deg);" src='${hospital}'/>`;
+            marker.setContent(content);
+            marker.setLabel({
+              direction: 'bottom',
+              // 设置文本标注偏移量
+              offset: new AMap.Pixel(-4, 0),
+              // 设置文本标注内容
+              content: `<div>${title}</div>`
+            });
+            marker.setOffset(new AMap.Pixel(-18, -10));
+          }
+        },
+        renderClusterMarker(ctx) {
+          const { clusterData, marker, count } = ctx;
+          const content = `<img width="30px" height="30px" src='${hospital}'/>`;
+          marker.setContent(content);
+          const title = count == 1 ? clusterData[0].title : `下级医院数量:${count}`;
+          marker.setLabel({
+            direction: 'bottom',
+            // 设置文本标注偏移量
+            offset: new AMap.Pixel(-4, 0),
+            // 设置文本标注内容
+            content: `<div>${title}</div>`
+          });
+          marker.setOffset(new AMap.Pixel(-18, -10));
+        }
+      });
+      smallHospitalMarkerCluster.on('click', ctx => {
+        const { lnglat } = ctx;
+        map.setZoomAndCenter(17, lnglat);
+      });
+      const smallHospitalPoints = smallHospitalMapList.map((v: any) => ({
+        lnglat: [v.lng, v.lat],
+        ...v
+      }));
+      smallHospitalMarkerCluster?.setData(smallHospitalPoints);
+
+      // 收样员标记点
+      specimenMarkerCluster = new AMap.MarkerCluster(map, [], {
+        gridSize: 80,
+        maxZoom: 14,
+        renderMarker(ctx) {
+          const { marker, data } = ctx;
+          if (Array.isArray(data) && data[0]) {
+            const { title, orientation } = data[0];
+            const content = `<img width="30px" height="30px" style="transform: scale(1) rotate(${360 - Number(orientation)}deg);" src='${medicalKit}'/>`;
+            marker.setContent(content);
+            marker.setLabel({
+              direction: 'bottom',
+              // 设置文本标注偏移量
+              offset: new AMap.Pixel(-4, 0),
+              // 设置文本标注内容
+              content: `<div>${title}</div>`
+            });
+            marker.setOffset(new AMap.Pixel(-18, -10));
+          }
+        },
+        renderClusterMarker(ctx) {
+          const { clusterData, marker, count } = ctx;
+          const content = `<img width="30px" height="30px" src='${medicalKit}'/>`;
+          marker.setContent(content);
+          const title = count == 1 ? clusterData[0].title : `收样员数量:${count}`;
+          marker.setLabel({
+            direction: 'bottom',
+            // 设置文本标注偏移量
+            offset: new AMap.Pixel(-4, 0),
+            // 设置文本标注内容
+            content: `<div>${title}</div>`
+          });
+          marker.setOffset(new AMap.Pixel(-18, -10));
+        }
+      });
+      specimenMarkerCluster.on('click', ctx => {
+        const { lnglat } = ctx;
+        map.setZoomAndCenter(17, lnglat);
+      });
+      const specimenPoints = specimenMapList.map((v: any) => ({
+        lnglat: [v.lng, v.lat],
+        ...v
+      }));
+      specimenMarkerCluster?.setData(specimenPoints);
+
+
+
+
       // 加载完毕
       complete();
     }).catch(error => {

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

@@ -13,8 +13,19 @@ type mapType = {
 };
 
 export const largeHospitalMapList: mapType[] = [
-  {title: '上级医检医院:测试1', orientation: 0, lng: 112.919043, lat: 28.288623},
-  {title: '上级医检医院:测试2', orientation: 0, lng: 112.919165, lat: 28.289924},
-  {title: '上级医检医院:测试3', orientation: 0, lng: 112.919165, lat: 29.289924}
+  {title: '上级医检医院:金域', orientation: 0, lng: 112.919043, lat: 28.288623},
+  {title: '上级医检医院:康来', orientation: 0, lng: 112.919165, lat: 28.289924},
+  {title: '上级医检医院:附一', orientation: 0, lng: 112.919965, lat: 28.289924}
 ];
 
+export const smallHospitalMapList: mapType[] = [
+  {title: '下级医院:湘雅医院', orientation: 0, lng: 112.918119, lat: 28.282891},
+  {title: '下级医院:神经病医院', orientation: 0, lng: 112.918919, lat: 28.282991},
+  {title: '下级医院:第三医院', orientation: 0, lng: 112.918019, lat: 28.283991}
+];
+
+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}
+];