粤政图 标注点击效果

src/utils/olMap/olMap.ts

@@ -24,11 +24,14 @@ import GeoJSON from 'ol/format/GeoJSON';
 import { fromLonLat } from 'ol/proj';
 import axios from 'axios';
 import { fromExtent } from 'ol/geom/Polygon';
-import { LinearRing, Polygon } from 'ol/geom';
+import { LinearRing, LineString, Polygon } from 'ol/geom';
 import {Graticule} from "ol/layer";
-import { mergeGeoJsonPolygons } from '@/utils/gisUtils';
+import { getPointsCenter, mergeGeoJsonPolygons } from '@/utils/gisUtils';
 import { Cluster } from 'ol/source';
 import CircleStyle from 'ol/style/Circle';
+import Overlay from 'ol/Overlay';
+import { Select } from 'ol/interaction';
+import { click } from 'ol/events/condition';
 
 const commonUrl = import.meta.env.VITE_APP_BASE_API2 + 'api/oneShare/proxyHandler/gd/';
 // proj4.defs('EPSG:4490', '+proj=longlat +ellps=GRS80 +no_defs +type=crs');
@@ -62,15 +65,13 @@ export class olMap {
     fillOpacity: 0,
     strokeStyle: 'solid'
   };
-  // private { currentState, commit, undo, history, future } = useHistory();
-  private overlays = [];
-  private overlaysData = [];
-  private graphicsType = '';
   private plot;
   private vectorLayer;
-  private cluster;
+  // 边界遮罩图层
   private maskLayer;
-  private maskLayer2 = [];
+  private maskLayer2;
+  // 显示信息框
+  private infoWindow;
 
   constructor(options) {
     this.options = options;
@@ -97,6 +98,61 @@ export class olMap {
       this.initMouseTool(options.drawTool);
     }
     this.initLayer(options);
+    // 给标注点添加手势
+    this.map.on('pointermove', (e) => {
+      this.map.getTargetElement().style.cursor = 'auto';
+      const features = this.map.getFeaturesAtPixel(e.pixel);
+      features.forEach((feature) => {
+        const originalFeature = feature.get('features') ? feature.get('features')[0] : '';
+        if (!!originalFeature && originalFeature.get('pointer')) {
+          this.map.getTargetElement().style.cursor = 'pointer'; //设置鼠标样式
+        } else {
+          this.map.getTargetElement().style.cursor = 'auto';
+        }
+      });
+    });
+
+    // 创建选择交互
+    const select = new Select({
+      condition: click
+    });
+    this.map.addInteraction(select);
+    // 监听Select交互的select事件
+    select.on('select', (event) => {
+      const selectedFeatures = event.selected[0]; // 获取被选中的要素集合
+      if (selectedFeatures) {
+        const originalFeature = selectedFeatures.get('features')[0];
+        const size = selectedFeatures.get('features').length;
+        if (size === 1) {
+          // 设置新的样式（更换图标）
+          selectedFeatures.setStyle(
+              new Style({
+                image: new Icon({
+                  anchor: [0.5, 0.5],
+                  scale: 0.146,
+                  anchorXUnits: 'fraction',
+                  anchorYUnits: 'pixels',
+                  src: originalFeature.get('imageHover')
+                })
+              })
+          );
+        } else {
+          // 聚合要素
+          const currentZoom = this.map.getView().getZoom();
+          this.map.getView().setZoom(currentZoom + 1);
+          const points = [];
+          selectedFeatures.get('features').forEach(feature => {
+            const geometry = feature.getGeometry(); // 获取要素的几何对象
+            const type = geometry.getType(); // 获取几何类型
+            if (type === 'Point') {
+              points.push(geometry.getCoordinates());
+            }
+          });
+          const newFeature = getPointsCenter(points);
+          this.map.getView().setCenter(newFeature.geometry.coordinates);
+        }
+      }
+    });
   }
   async initLayer(options) {
     // 添加新的图层
@@ -303,9 +359,14 @@ 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'
       });
+      // 设置自定义属性
+      feature.set('pointer', true);
       // 定义样式
       const style = new Style({
         image: new Icon({
@@ -346,6 +407,22 @@ export class olMap {
     this.vectorLayer.getSource().clear();
   }
 
+  showInfo(content, position, isCustom) {
+    this.hideInfo();
+    if (!this.infoWindow) {
+      this.infoWindow = new Overlay({
+        element: content,
+        positioning: 'bottom-center', // 你可以根据需要调整定位方式
+        offset: [0, -10] // 偏移量，用于调整覆盖层相对于要素的位置
+      });
+    }
+    this.infoWindow.setPosition(position);
+    this.map.addOverlay(this.infoWindow);
+  }
+
+  hideInfo(e?: any) {
+
+  }
   /**
    *
    * @param {Geojon} chaozhou 根据geojson对象创建Featrue对象
@@ -384,11 +461,22 @@ export class olMap {
     this.maskLayer.getSource().addFeature(convertFt);
   }
   createVecByJson2(json, options) {
-    if (this.maskLayer2 && this.maskLayer2.length > 0) {
-      this.maskLayer2.forEach((layer) => {
-        this.map.addLayer(layer);
-      });
+    if (!!this.maskLayer2) {
+      this.map.addLayer(this.maskLayer2);
     } else {
+      this.maskLayer2 = new VectorLayer({
+        source: new VectorSource(),
+        style: new Style({
+          fill: new Fill({
+            color: 'rgba(0, 0, 0, 0)'
+          }),
+          stroke: new Stroke({
+            color: options.strokeColor ? options.strokeColor : '#268ab9',
+            width: options.strokeWeight ? options.strokeWeight : 1
+          })
+        })
+      });
+      this.map.addLayer(this.maskLayer2);
       // const layer = new VectorLayer({
       //   source: new VectorSource(),
       //   style: new Style({
@@ -420,56 +508,21 @@ export class olMap {
       //   geometry: polygonRing
       // });
       // layer.getSource().addFeature(convertFt);
-      // this.maskLayer2.push(layer);
+      // this.maskLayerArr2.push(layer);
       // this.map.addLayer(layer);
       // 边界部分
       json.features.forEach((feature) => {
         if (feature.geometry.type === 'Polygon') {
-          const polygonPath = feature.geometry.coordinates[0].map((coord) => {
-            return [coord[0], coord[1]];
-          });
           const feature2 = new Feature({
-            geometry: new Polygon([polygonPath])
+            geometry: new LineString(feature.geometry.coordinates[0])
           });
-          const vector = new VectorLayer({
-            source: new VectorSource(),
-            style: new Style({
-              fill: new Fill({
-                color: 'rgba(0, 0, 0, 0)'
-              }),
-              stroke: new Stroke({
-                color: options.strokeColor ? options.strokeColor : '#268ab9',
-                width: options.strokeWeight ? options.strokeWeight : 1
-              })
-            })
-          });
-          vector.getSource().addFeature(feature2);
-          this.maskLayer2.push(vector);
-          this.map.addLayer(vector);
+          this.maskLayer2.getSource().addFeature(feature2);
         } else if (feature.geometry.type === 'MultiPolygon') {
           feature.geometry.coordinates.forEach((polygonCoords) => {
-            const polygonPath = polygonCoords.map((ring) => {
-              return ring.map((coord) => {
-                return [coord[0], coord[1]];
-              });
-            });
-            const outerPath = polygonPath;
-            const feature2 = new Feature({ geometry: new Polygon(outerPath), });
-            const vector = new VectorLayer({
-              source: new VectorSource(),
-              style: new Style({
-                fill: new Fill({
-                  color: 'rgba(0, 0, 0, 0)'
-                }),
-                stroke: new Stroke({
-                  color: options.strokeColor ? options.strokeColor : '#268ab9',
-                  width: options.strokeWeight ? options.strokeWeight : 1
-                })
-              })
+            const feature2 = new Feature({
+              geometry: new LineString(polygonCoords[0])
             });
-            vector.getSource().addFeature(feature2);
-            this.maskLayer2.push(vector);
-            this.map.addLayer(vector);
+            this.maskLayer2.getSource().addFeature(feature2);
           });
         }
       });
@@ -543,10 +596,8 @@ export class olMap {
     }
   }
   removeMask3(isHide) {
-    if (this.maskLayer2 && this.maskLayer2.length > 0) {
-      this.maskLayer2.forEach((layer) => {
-        this.map.removeLayer(layer);
-      });
+    if (this.maskLayer2) {
+      this.map.removeLayer(this.maskLayer2);
       if (!isHide) {
         this.maskLayer2 = [];
       }