粤政图 标注信息弹窗

src/utils/olMap/olMap.ts

@@ -72,6 +72,7 @@ export class olMap {
   private maskLayer2;
   // 显示信息框
   private infoWindow;
+  private select;
 
   constructor(options) {
     this.options = options;
@@ -113,16 +114,21 @@ export class olMap {
     });
 
     // 创建选择交互
-    const select = new Select({
-      condition: click
+    this.select = new Select({
+      condition: click,
+      filter: (feature, layer) => {
+        // 只有vectorLayer图层可选择
+        return layer === this.vectorLayer;
+      }
     });
-    this.map.addInteraction(select);
+    this.map.addInteraction(this.select);
     // 监听Select交互的select事件
-    select.on('select', (event) => {
+    this.select.on('select', (event) => {
       const selectedFeatures = event.selected[0]; // 获取被选中的要素集合
-      if (selectedFeatures) {
-        const originalFeature = selectedFeatures.get('features')[0];
-        const size = selectedFeatures.get('features').length;
+      const features = selectedFeatures.get('features');
+      if (selectedFeatures && !!features) {
+        const originalFeature = features[0];
+        const size = features.length;
         if (size === 1) {
           // 设置新的样式（更换图标）
           selectedFeatures.setStyle(
@@ -136,12 +142,14 @@ export class olMap {
                 })
               })
           );
+          const extData = originalFeature.get('extData');
+          options.onMarkerClick(extData);
         } else {
           // 聚合要素
           const currentZoom = this.map.getView().getZoom();
           this.map.getView().setZoom(currentZoom + 1);
           const points = [];
-          selectedFeatures.get('features').forEach(feature => {
+          features.forEach((feature) => {
             const geometry = feature.getGeometry(); // 获取要素的几何对象
             const type = geometry.getType(); // 获取几何类型
             if (type === 'Point') {
@@ -150,6 +158,7 @@ export class olMap {
           });
           const newFeature = getPointsCenter(points);
           this.map.getView().setCenter(newFeature.geometry.coordinates);
+          event.selected = [];
         }
       }
     });
@@ -359,11 +368,10 @@ export class olMap {
         geometry: new Point([Number(point.longitude), Number(point.latitude)]),
         name: point.name,
         icon: point.icon,
-        image: point.image,
         imageHover: point.imageHover,
         size: point.size,
         pointer: true,
-        type: 'point'
+        extData: point
       });
       // 设置自定义属性
       feature.set('pointer', true);
@@ -420,8 +428,12 @@ export class olMap {
     this.map.addOverlay(this.infoWindow);
   }
 
-  hideInfo(e?: any) {
-
+  hideInfo(flag) {
+    this.map.removeOverlay(this.infoWindow);
+    this.infoWindow = null;
+    if (!!flag && this.select) {
+      this.select.clear();
+    }
   }
   /**
    *
@@ -462,6 +474,7 @@ export class olMap {
   }
   createVecByJson2(json, options) {
     if (!!this.maskLayer2) {
+      // this.map.addLayer(this.maskLayer);
       this.map.addLayer(this.maskLayer2);
     } else {
       this.maskLayer2 = new VectorLayer({
@@ -477,7 +490,7 @@ export class olMap {
         })
       });
       this.map.addLayer(this.maskLayer2);
-      // const layer = new VectorLayer({
+      // this.maskLayer = new VectorLayer({
       //   source: new VectorSource(),
       //   style: new Style({
       //     fill: new Fill({
@@ -507,9 +520,8 @@ export class olMap {
       // const convertFt = new Feature({
       //   geometry: polygonRing
       // });
-      // layer.getSource().addFeature(convertFt);
-      // this.maskLayerArr2.push(layer);
-      // this.map.addLayer(layer);
+      // this.maskLayer.getSource().addFeature(convertFt);
+      // this.map.addLayer(this.maskLayer);
       // 边界部分
       json.features.forEach((feature) => {
         if (feature.geometry.type === 'Polygon') {
@@ -596,6 +608,12 @@ export class olMap {
     }
   }
   removeMask3(isHide) {
+    if (this.maskLayer) {
+      this.map.removeLayer(this.maskLayer);
+      if (!isHide) {
+        this.maskLayer = [];
+      }
+    }
     if (this.maskLayer2) {
       this.map.removeLayer(this.maskLayer2);
       if (!isHide) {