修复打点信息弹窗显示问题

src/components/Map/YztMap/index.vue

@@ -272,7 +272,7 @@ const filterTd = (obj, dataType) => {
       if (i === 2) {
         i = 0;
       }
-      const value = !!obj[key] ? obj[key] : '';
+      const value = obj && !!obj[key] ? obj[key] : '';
       if (value && value.length > 8) {
         if (i === 0) {
           data.push({ type: 'longText', data: [{ label: keyLabel, value: value }] });

src/components/Map/index.vue

@@ -228,7 +228,7 @@ const filterTd = (obj, dataType) => {
       if (i === 2) {
         i = 0;
       }
-      const value = !!obj[key] ? obj[key] : '';
+      const value = obj && !!obj[key] ? obj[key] : '';
       if (value && value.length > 8) {
         if (i === 0) {
           data.push({ type: 'longText', data: [{ label: keyLabel, value: value }] });

src/hooks/AMap/useAMap.ts

@@ -18,6 +18,8 @@ export function useAMap(options) {
   const plotLayers = [];
   // 标绘层级
   let activeLayerkey;
+  // 显示信息框
+  let infoWindow;
   // 初始化事件
   const initMap = (options) => {
     window._AMapSecurityConfig = {
@@ -241,8 +243,16 @@ export function useAMap(options) {
       plotLayers['points2'].clearOverlays();
       addPoints = [];
     }
+    let hideInfoFlag = true;
     Object.keys(obj).forEach((key: string) => {
       const data = obj[key];
+      if (clickMarker) {
+        const extData = clickMarker.getExtData();
+        if (data.id === extData.id) {
+          hideInfoFlag = false;
+          data.isHover = true;
+        }
+      }
       if (data.type === '3') {
         // 聚合点
         const div = document.createElement('div');
@@ -323,6 +333,10 @@ export function useAMap(options) {
         }
       }
     });
+    if (hideInfoFlag) {
+      clickMarker = null;
+      hideInfo();
+    }
   };
   const getContent = (icon: string, size: number[], name?: string, color?: string = '#000') => {
     let content =
@@ -351,6 +365,8 @@ export function useAMap(options) {
       plotLayers['points2'].clearOverlays();
       addPoints = [];
     }
+    clickMarker = null;
+    hideInfo();
   };
   let addressMarker;
   // 设置灾害地点 单独图册
@@ -373,8 +389,7 @@ export function useAMap(options) {
     }
     plotLayers['address'].addOverlay(addressMarker);
   };
-  // 显示信息框
-  let infoWindow;
+
   const showInfo = (content, position, offsetY, isCustom) => {
     hideInfo();
     // 实例化InfoWindow
@@ -395,7 +410,7 @@ export function useAMap(options) {
     infoWindow.on('mouseout', () => map.setStatus({ zoomEnable: true }));
   };
 
-  const hideInfo = (e) => {
+  const hideInfo = (e?: any) => {
     map.setStatus({ zoomEnable: true });
     if (!!infoWindow) {
       infoWindow.close();

src/utils/olMap/olMap.ts

@@ -87,6 +87,7 @@ export class olMap {
   private maskLayer;
   private maskLayer2;
   // 显示信息框
+  private clickMarker;
   private infoWindow;
   private select;
   // 车辆轨迹
@@ -159,6 +160,7 @@ export class olMap {
       const feature = event.selected[0]; // 获取被选中的要素集合
       const extData = feature.get('extData');
       if (!!feature) {
+        this.clickMarker = feature;
         if (['1', '2'].includes(extData.type)) {
           // 多点位 单点
           if (this.selectedFeature !== feature) {
@@ -705,8 +707,17 @@ export class olMap {
   }
   addMarker2(obj) {
     this.clearMarker2('point2');
+    let hideInfoFlag = true;
     Object.keys(obj).forEach((key: string) => {
       const data = obj[key];
+      if (this.clickMarker) {
+        const extData = this.clickMarker.get('extData');
+        console.log(extData.id, data.id);
+        if (data.id === extData.id) {
+          hideInfoFlag = false;
+          data.isHover = true;
+        }
+      }
       if (data.type === '3') {
         // 聚合点
         const outerCircle = new CircleStyle({
@@ -790,6 +801,10 @@ export class olMap {
         }
       }
     });
+    if (hideInfoFlag) {
+      this.clickMarker = null;
+      this.hideInfo();
+    }
   }
   // 清除所有标加
   clearMarker() {
@@ -807,6 +822,8 @@ export class olMap {
       this.map.addLayer(this.plotLayers[name]);
     } else {
       this.vectorLayer.getSource().clear();
+      this.clickMarker = null;
+      this.hideInfo();
     }
   }
   // 设置灾害地点 单独图册

src/views/comprehensiveGuarantee/electronicDisasterMapManage/index.vue

@@ -628,7 +628,7 @@ const filterTd = (obj, dataType) => {
       if (i === 2) {
         i = 0;
       }
-      const value = !!obj[key] ? obj[key] : '';
+      const value = obj && !!obj[key] ? obj[key] : '';
       if (value && value.length > 8) {
         if (i === 0) {
           data.push({ type: 'longText', data: [{ label: keyLabel, value: value }] });

src/views/comprehensiveGuarantee/emergencySpecialistManagement/Map.vue

@@ -251,7 +251,7 @@ const filterTd = (obj, dataType) => {
       if (i === 2) {
         i = 0;
       }
-      const value = !!obj[key] ? obj[key] : '';
+      const value = obj && !!obj[key] ? obj[key] : '';
       if (value && value.length > 8) {
         if (i === 0) {
           data.push({ type: 'longText', data: [{ label: keyLabel, value: value }] });