粤政图 点聚合效果

src/hooks/AMap/useAMap.ts

@@ -83,7 +83,7 @@ export function useAMap(options) {
     }
     addPoints = points;
     const count = points.length;
-    const _renderClusterMarker = function(context) {
+    const _renderClusterMarker = function (context) {
       // 聚合中点个数
       const clusterCount = context.count;
       const div = document.createElement('div');
@@ -104,7 +104,7 @@ export function useAMap(options) {
         map.setZoomAndCenter(map.getZoom() + 1, bounds.getCenter());
       });
     };
-    const _renderMarker = function(context) {
+    const _renderMarker = function (context) {
       const content =
         '<div style="display: flex;flex-direction: column;align-items: center;justify-content: center">' +
         '<div style="background: url(' +
@@ -315,7 +315,6 @@ export function useAMap(options) {
             strokeColor: option.strokeColor ? option.strokeColor : '#268ab9',
             strokeOpacity: option.strokeOpacity ? option.strokeOpacity : 1,
             strokeWeight: option.strokeWeight ? option.strokeWeight : 1,
-            fillOpacity: 0,
             clickable: false
           });
           maskPolygon2.push(polygon);
@@ -335,7 +334,6 @@ export function useAMap(options) {
               strokeColor: option.strokeColor ? option.strokeColor : '#268ab9',
               strokeOpacity: option.strokeOpacity ? option.strokeOpacity : 1,
               strokeWeight: option.strokeWeight ? option.strokeWeight : 1,
-              fillOpacity: 0,
               clickable: false
             });
             maskPolygon2.push(polygon);

src/utils/olMap/olMap.ts

@@ -25,11 +25,10 @@ import { fromLonLat } from 'ol/proj';
 import axios from 'axios';
 import { fromExtent } from 'ol/geom/Polygon';
 import { LinearRing, Polygon } from 'ol/geom';
-import { Tile } from 'ol';
 import {Graticule} from "ol/layer";
 import { mergeGeoJsonPolygons } from '@/utils/gisUtils';
-// import olPlot from 'ol-plot';
-// import { activate } from '../ol-plot/ol-plot'
+import { Cluster } from 'ol/source';
+import CircleStyle from 'ol/style/Circle';
 
 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');
@@ -69,6 +68,7 @@ export class olMap {
   private graphicsType = '';
   private plot;
   private vectorLayer;
+  private cluster;
   private maskLayer;
   private maskLayer2 = [];
 
@@ -254,14 +254,57 @@ export class olMap {
       loadendFunc();
     }
   }
+  // 集群点样式
+  clusterStyle(feature) {
+    const originalFeature = feature.get('features')[0];
+    const size = feature.get('features').length;
+    if (size > 1) {
+      const outerCircle = new CircleStyle({
+        radius: 20,
+        fill: new Fill({
+          color: 'rgba(79, 176, 206, 0.5)'
+        }),
+        stroke: new Stroke({
+          color: 'rgba(79, 176, 206, 1)'
+        })
+      });
+      return [
+        new Style({
+          image: outerCircle,
+          text: new Text({
+            text: size.toString(),
+            font: '14px sans-serif',
+            fill: new Fill({
+              color: '#ffff'
+            })
+          })
+        })
+      ];
+    }
 
+    return new Style({
+      geometry: originalFeature.getGeometry(),
+      image: new Icon({
+        anchor: [0.5, 0.5],
+        scale: 0.146,
+        anchorXUnits: 'fraction',
+        anchorYUnits: 'pixels',
+        src: originalFeature.get('icon')
+      })
+    });
+  }
   addMarker(points) {
-    this.clearMarker('point');
+    this.clearMarker();
+    const features = [];
     points.forEach((point) => {
       // 创建标注点
       const feature = new Feature({
-        geometry: new Point(point.lnglat),
-        name: point.name
+        // 必须是数字类型，字符串不识别
+        geometry: new Point([Number(point.longitude), Number(point.latitude)]),
+        name: point.name,
+        icon: point.icon,
+        size: point.size,
+        type: 'point'
       });
       // 定义样式
       const style = new Style({
@@ -283,15 +326,22 @@ export class olMap {
           })
         })
       });
-
       feature.setStyle(style);
+      features.push(feature);
       this.markers.push(point);
-      this.vectorLayer.getSource().addFeature(feature);
     });
+    const vectorSource = new VectorSource({
+      features: features
+    });
+    const clusterSource = new Cluster({
+      distance: 30,
+      source: vectorSource
+    });
+    this.vectorLayer.setStyle(this.clusterStyle);
+    this.vectorLayer.setSource(clusterSource);
   }
-
   // 清除所有标加
-  clearMarker(id) {
+  clearMarker() {
     if (!this.vectorLayer) return;
     this.vectorLayer.getSource().clear();
   }