设备显示隐藏

wujingjing

2025-02-10 e50196bff10f0196307b2567ed6c0829eadd8ff6

 src/model/map/OLMap.ts

@@ -61,7 +61,6 @@
};
type MapConfig = {
   sourceType: GaoDeSourceType;
   markerIsVisible: boolean;
};

type OLEventType = 'blackClick' | 'featureChange' | 'featureHoverChange';
@@ -91,7 +90,6 @@
   themeInfo = ref([] as any[]);

   activeSourceType: Ref<GaoDeSourceType> = ref(GaoDeSourceType.Vector);
   markerIsVisible: Ref<boolean> = ref(true);
   interactLayer: VectorLayer<VectorSource<Feature<Geometry>>, Feature<Geometry>> = null;

   /** @description 当前激活状态 feature */
@@ -126,13 +124,12 @@
   }

   constructor(options: OLMapOptions) {
      const { container, view, sourceType, markerIsVisible } = defaultsDeep(options, {
      const { container, view, sourceType } = defaultsDeep(options, {
         view: {
            center: [13247019.404399557, 4721671.572580107],
            zoom: 8,
         },
         sourceType: GaoDeSourceType.Vector,
         markerIsVisible: true,
      } as OLMapOptions) as OLMapOptions;
      this.source = new XYZ({
         crossOrigin: 'anonymous',
@@ -153,7 +150,6 @@
         interactions: olDefaults({ doubleClickZoom: false }),
      });
      this.activeSourceType.value = sourceType;
      this.markerIsVisible.value = markerIsVisible;
      this.applySourceType(this.activeSourceType.value);
      this.listenMapClick();
      this.addBasicControl();
@@ -356,6 +352,24 @@
      this.adjustViewToOverlays(markers);
   }


   checkEquipIsShow() {
      for (const item of this.layerInfo.value) {
         if (item.id === 'equip') {
            return item.isVisible;
         }
      }
      return false;
   }

   getEquipOverlay() {
      for (const item of this.layerInfo.value) {
         if (item.type === 'equip') {
            return item;
         }
			
      }
   }
   createEleOverlay(dom: string | HTMLElement, position = [0, 0]) {
      const ele = typeof dom === 'string' ? (document.querySelector(dom) as HTMLElement) : dom;
      if (!ele) return;
@@ -366,7 +380,7 @@
         stopEvent: false,
         className: 'z-[999]',
      });
      eleOverlay.setVisible(this.markerIsVisible.value);
      eleOverlay.setVisible(this.checkEquipIsShow());

      return eleOverlay;
   }
@@ -475,6 +489,27 @@
      this.themeInfo.value = themeInfo;
   }

   getAllLayers() {
      const allLayers = this.layerInfo.value.reduce((preVal, curVal) => {
         if (preVal.children && preVal.children.length > 0) {
            return preVal.concat(curVal.children.map((item) => item));
         } else {
            return preVal;
         }
      }, []);
      return allLayers;
   }

   getAllLayerModels() {
      return this.layerInfo.value.reduce((preVal, curVal) => {
         if (preVal.children && preVal.children.length > 0) {
            return preVal.concat(curVal.children.map((item) => item.model));
         } else {
            return preVal;
         }
      }, []);
   }

   /** @description 记录所有图层 */
   setAllLayers(layerModels: Layer[], layers: any[], layerGroup: any[]) {
      // this.layerInfo.value = layerModels.map((layer, index) => {
@@ -525,6 +560,22 @@
         mapGroupItem.children.push(data);
         return preVal;
      }, []);
      const that = this;
      this.layerInfo.value.push({
         id: 'equip',
         title: '监测设备',
         children: [],
         _isVisible: true,
         get isVisible() {
            return this._isVisible;
         },
         set isVisible(val) {
            console.log("🚀 ~ val:", val)
            this._isVisible = val;
            that.toggleMarkerOverlayVisible(val);
         },
         type: 'equip',
      });
   }

   /**
@@ -553,21 +604,17 @@
            }
         }
      });
      this.markerIsVisible.value = visible;
   }

   getConfig(): MapConfig {
      return {
         sourceType: this.activeSourceType.value,
         markerIsVisible: this.markerIsVisible.value,
      };
   }

   setConfig(config: MapConfig) {
      this.activeSourceType.value = config.sourceType;
      this.markerIsVisible.value = config.markerIsVisible;
      this.applySourceType(this.activeSourceType.value);
      this.toggleMarkerOverlayVisible(this.markerIsVisible.value);
   }

   private addBasicControl() {