👈 编写高德地图组件

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

@@ -13,7 +13,13 @@
         <span title="展开">‹</span>
         <p title="隐藏">›</p>
       </div>
-
+      <div>
+        <AForm>
+          <AFormItem>
+            <a-input/>
+          </AFormItem>
+        </AForm>
+      </div>
     </div>
   </PageWrapper>
 </template>
@@ -26,15 +32,19 @@
   import hospitalTwinkle from '/@/assets/images/hospital-twinkle.gif';
   import redFlag from '/@/assets/images/redFlag.svg';
   import { PageWrapper } from '/@/components/Page';
+  import { Form } from 'ant-design-vue';
 
   let map;
   let largeHospitalMarkerCluster;
   let smallHospitalMarkerCluster;
   let specimenMarkerCluster;
+  const AForm = Form;
+  const AFormItem = Form.Item;
+
 
   const instance = getCurrentInstance();
   const mapState = reactive({
-    loading: true,
+    loading: false,
     toggleOperatePanelClass: {
       span: 'none',
       p: 'block',
@@ -42,14 +52,6 @@
     },
     toggleStatus: true
   });
-  /** 地图创建完成(动画关闭) */
-  const complete = (): void => {
-    if (map) {
-      map.on('complete', () => {
-        mapState.loading = false;
-      });
-    }
-  };
 
   onBeforeMount(() => {
     if (!instance) return;
@@ -64,7 +66,7 @@
         keyboardEnable: true
       }
     };
-
+    mapState.loading = true;
     AMapLoader.load({
       key: mapConfig.amapKey,
       version: '2.0',
@@ -142,11 +144,8 @@
         renderMarker(ctx) {
           const { marker, data } = ctx;
           if (Array.isArray(data) && data[0]) {
-            const { title, orientation, southWest, northEast, notify } = data[0];
+            const { title, orientation, notify } = data[0];
-            let content = `<img width="30px"
+            let content = `<img width="30px" height="30px" style="transform: scale(1) rotate(${360 - Number(orientation)}deg);" src='${hospital}'/>`;
-                                height="30px"
-                                style="transform: scale(1) rotate(${360 - Number(orientation)}deg);"
-                                src='${hospital}'/>`;
             marker.setLabel({
               direction: 'bottom',
               // 设置文本标注偏移量
@@ -155,38 +154,8 @@
               content: `<div>${title}</div>`
             });
             marker.setOffset(new AMap.Pixel(-18, -10));
-            if (notify && southWest?.length>0 && northEast?.length>0) {
+            if (notify) {
-              // 下级医院通知画布图层
+              content = `<img width="30px" height="30px" style="transform: scale(1) rotate(${360 - Number(orientation)}deg);" src='${hospitalTwinkle}'/>`;
-              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);
           }
@@ -194,7 +163,7 @@
         renderClusterMarker(ctx) {
           const { clusterData, marker, count } = ctx;
           let content = `<img width="30px" height="30px" src='${hospital}'/>`;
-          if(clusterData.some(item => item.notify && item.southWest?.length>0 && item.northEast?.length>0)){
+          if(clusterData.some(item => item.notify)){
             content = `<img width="30px" height="30px" src='${hospitalTwinkle}'/>`;
           }
           marker.setContent(content);
@@ -264,27 +233,6 @@
       }));
       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,
@@ -313,10 +261,19 @@
   onUnmounted(() => {
     if (map) {
       // 销毁地图实例
-      map.destroy() && map.clearEvents('click');
+      map.destroy() && map.clearEvents();
     }
   });
 
+  /** 地图创建完成(动画关闭) */
+  function complete () {
+    if (map) {
+      map.on('complete', () => {
+        mapState.loading = false;
+      });
+    }
+  }
+
   /** 处理切换操作面板 */
   function toggleOperatePanel() {
     mapState.toggleStatus = !mapState.toggleStatus;

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

@@ -10,8 +10,6 @@ type mapType = {
   orientation: number;
   lng: number;
   lat: number;
-  southWest: number[];
-  northEast: number[];
   notify: boolean;
 };
 
@@ -22,9 +20,9 @@ export const largeHospitalMapList: mapType[] = [
 ];
 
 export const smallHospitalMapList: mapType[] = [
-  {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.918119, lat: 28.282891, notify: true},
-  {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.918919, lat: 28.282991, notify: true},
-  {title: '下级医院:第三医院', orientation: 0, lng: 112.918019, lat: 28.283991, southWest: [112.917033,28.281883], northEast: [112.919151,28.283623], notify: true}
+  {title: '下级医院:第三医院', orientation: 0, lng: 112.918019, lat: 28.283991, notify: true}
 ];
 
 export const specimenMapList: mapType[] = [