update

src/assets/mapUtils/map.ts

@@ -3,6 +3,7 @@ import chinaInner from '/@/assets/lngLat/chinaInner.ts';
 import { createCircle, createIcon, typeToIcon } from '/@/assets/mapUtils/commonFun.ts';
 import { aircraftContent, alarmIcon } from '/@/components/chinaMap/chinaHooks.ts';
 import { isFunction } from '/@/utils/is.ts';
+import { Callback, ExtDataType, InitMap, MarkerOption, ResultType } from '/@/assets/mapUtils/mapFunTypes.ts';
 
 export const defaultOption = {
     center: [106.3, 37.87], //地图中心点
@@ -23,7 +24,7 @@ export const Map = {
      * @param el dom元素 id选择器
      * @param option 地图配置
      */
-    initMap({ el, option }) {
+    initMap({ el, option }: InitMap) {
         const { zoom, center, mapStyle } = { ...defaultOption, ...option };
         //基本地图加载
         this.map = new AMap.Map(el, {
@@ -43,7 +44,7 @@ export const Map = {
     drawOutLine() {
         let geoJson = new AMap.GeoJSON({
             geoJSON: china,
-            getPolygon: function (geoJson, lngLats) {
+            getPolygon: function (geoJson: string, lngLats: any) {
                 return new AMap.Polyline({
                     path: lngLats[0],
                     strokeColor: '#6ccffe',
@@ -62,7 +63,7 @@ export const Map = {
     drawInnerLine() {
         let geoJson = new AMap.GeoJSON({
             geoJSON: chinaInner,
-            getPolygon: function (geoJson, lngLats) {
+            getPolygon: function (geoJson: string, lngLats: any) {
                 return new AMap.Polyline({
                     path: lngLats[0],
                     strokeColor: '#359de5',
@@ -71,24 +72,35 @@ export const Map = {
             },
         });
         this.map.add(geoJson);
-    }, // 清空当前地图上除了边界线的覆盖物
+    },
+    /**
+     * @desc 设置地图级别与中心点
+     * @param center 【lon,lat】
+     * @param zoom 地图层级
+     * */
+    setZoomCenter(center, zoom = 12) {
+        this.map && this.map.setZoomAndCenter(zoom, center);
+    },
+    /**
+     * @desc 清空当前地图上除了边界线的覆盖物
+     */
     removeOverlayGroup() {
         this.clearAircraft();
         this.clearOverlay();
         this.clearAirRange();
         this.clearMarker(); //
-        if (this.airMarkerList.length > 0) {
-            for (let i = 0; i < this.airMarkerList.length; i++) {
-                this.airMarkerList[i].setMap(null);
-            }
+        if (this.airMarkerList) {
+            this.airMarkerList = [];
         }
         // this.map.remove(this.airMarkerList);
     }, //
     /**
      * @desc 创建覆盖物组，用于批量处理点 （控制显隐，点击事件等）
      * @param result
+     * @param extData
+     * @param callback
      */
-    createOverlay(result, { extOption = {}, content }, callback) {
+    createOverlay(result: ResultType[], extData?: ExtDataType, callback?: Callback) {
         this.removeOverlayGroup();
         this.overlayGroup = new AMap.OverlayGroup();
         for (let i = 0; i < result.length; i++) {
@@ -101,6 +113,7 @@ export const Map = {
             }
             // 创建一个 Icon
             let startIcon = typeToIcon(type);
+            // debugger;
             // 将 icon 传入 marker
             let startMarker = new AMap.Marker({
                 // 点的坐标
@@ -109,9 +122,9 @@ export const Map = {
                 clickable: true, //点额外携带的数据，用户自定义属性，支持JavaScript API任意数据类型
                 extData: result[i],
                 label: {
-                    content: isFunction(content) && content(result[i]),
+                    content: isFunction(extData?.content) && extData?.content(result[i]),
                 },
-                ...extOption,
+                ...extData?.extOption,
             });
             // 可以调用setExtData（）设置自定义属性
             //将组 挂载到地图上
@@ -139,9 +152,11 @@ export const Map = {
      * @desc 创建直升机marker
      * @param result
      */
-    createAircraft(result) {
+    createAircraft(result: ResultType[]) {
+        console.log('result', result);
         this.removeOverlayGroup();
         this.clearActiveHospital();
+        // debugger;
         if (!Array.isArray(result) && result.length == 0) return;
         this.createAirRange(result);
         let that = this;
@@ -152,6 +167,7 @@ export const Map = {
             arr,
             {
                 renderMarker: (context) => {
+                    console.log('context', context);
                     let factor = Math.pow(context.count / count, 1 / 18);
                     let div = document.createElement('div');
                     div.className = 'render-air';
@@ -163,25 +179,26 @@ export const Map = {
                     div.style.fontSize = '14px';
                     context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
                     context.marker.setContent(div);
-                    this.airMarkerList.push(context.marker);
-                    context.marker.on('click', () => {
-                        console.log('data', context);
-                    });
+                    // this.airMarkerList.push(context.marker);
+                    // context.marker.on('click', () => {
+                    //     console.log('data', context);
+                    // });
                 },
             }
         );
-        this.cluster.setMap(this.map);
+        // this.cluster.setMap(this.map);
     },
     clearAircraft() {
         if (this.cluster) {
-            this.map.remove(this.cluster);
-            this.cluster = null;
+            this.cluster.setMap(null);
+            // this.map.remove(this.cluster);
+            // this.cluster = null;
         }
     } /**
      * @desc 飞机范围
      * @param list
      */,
-    createAirRange(list) {
+    createAirRange(list: ResultType[]) {
         this.removeOverlayGroup();
         this.circleGroup = new AMap.OverlayGroup();
         for (let i = 0; i < list.length; i++) {
@@ -223,17 +240,18 @@ export const Map = {
             this.placeSearch = null;
         }
     },
-    createMarker(option, callbck: () => {}) {
+    createMarker(option: MarkerOption, callbck?: Callback) {
         this.clearMarker();
         let { lon, lat, zoom = 12 } = option;
         const icon = createIcon({ icon: alarmIcon, iconSize: [36, 42], imageSize: [36, 42] });
+        let str = option?.realName && option?.eventType_dictText ? `${option?.realName},${option?.eventType_dictText}` : `${option?.realName}`;
         this.marker = new AMap.Marker({
             position: [lon, lat],
             icon: icon,
             offset: new AMap.Pixel(0, 0), //设置偏移量
             label: {
                 content: `<div class="alarm-content" > 
-                                <div>${option?.realName},${option?.eventType_dictText}</div>
+                                <div>${str}</div>
                           </div>`,
                 offset: new AMap.Pixel(0, -9),
                 direction: 'top',