BUG 27080

src/apps/AppBuilding/components/searchMap.vue

@@ -108,7 +108,7 @@
 import {mapState} from 'vuex'
 
 export default {
-  name:"searchMap",
+  name: "searchMap",
   data() {
     return {
       ops: {},
@@ -169,39 +169,6 @@ export default {
     getMarkerCluster(points, count = 0) {
       let {lib: TMap, map} = this
       if (map) {
-        map.setCenter(this.config.latlng)
-        let MarkerCluster = new TMap.MarkerCluster({
-          map, gridSize: 60,
-          enableDefaultStyle: false, // 关闭默认样式
-          geometries: points?.map(e => ({
-            position: new TMap.LatLng(e.lat, e.lng),
-            content: `${e.createAddress} | ${e.houseNum}户`,
-            properties: {...e}
-          })) || [],
-          zoomOnClick: true
-        })
-        let geometries = [], marker, markers = []
-        MarkerCluster.on('cluster_changed', () => {
-          if (markers.length) {
-            markers.forEach(function (item) {
-              item.destroy();
-            })
-            markers = [];
-          }
-          geometries = []
-          let clusters = MarkerCluster.getClusters()
-          clusters.forEach((item) => {
-            if (item.geometries?.length > 1) {
-              //聚合样式
-              geometries.push({
-                styleId: 'cluster',
-                position: item.center,
-                properties: {...item},
-                content: item.geometries.length?.toString() || "0"
-              })
-            } else {
-              //点标记样式
-              // 创建气泡DOM元素
         class ClusterBubble extends TMap.DOMOverlay {
           constructor(options) {
             super(options);
@@ -210,6 +177,7 @@ export default {
           onInit(options) {
             this.content = options.content;
             this.position = options.position;
+            this.customClass = options.customClass
           };
 
           onDestroy() {
@@ -219,7 +187,7 @@ export default {
 
           createDOM() {
             let dom = document.createElement('div');
-                  dom.classList.add('marker');
+            dom.classList.add(this.customClass || 'marker');
             dom.innerText = this.content;
 
             // 监听点击事件，实现zoomOnClick
@@ -249,6 +217,43 @@ export default {
           }
         }
 
+        this.config.latlng && map.setCenter(this.config.latlng)
+        let MarkerCluster = new TMap.MarkerCluster({
+          map, gridSize: 60,
+          enableDefaultStyle: false, // 关闭默认样式
+          geometries: points?.map(e => ({
+            position: new TMap.LatLng(e.lat, e.lng),
+            content: `${e.createAddress} | ${e.houseNum}户`,
+            properties: {...e}
+          })) || [],
+          zoomOnClick: true
+        })
+        let markers = [], cls = []
+        MarkerCluster.on('cluster_changed', () => {
+          if (markers.length) {
+            markers.forEach(function (item) {
+              item.destroy();
+            })
+            markers = [];
+          }
+          cls.forEach(e => e.destroy())
+          cls = []
+          let clusters = MarkerCluster.getClusters()
+          clusters.forEach((item) => {
+            if (item.geometries?.length > 1) {
+              //聚合样式
+              let clusterBubble = new ClusterBubble({
+                map,
+                position: item.center,
+                content: item.geometries.length,
+                customClass: 'cluster'
+              })
+              clusterBubble.on('click', () => {
+                map.fitBounds(item.bounds);
+              });
+              cls.push(clusterBubble)
+            } else {
+              //点标记样式
               let {content} = item.geometries?.[0] || {},
                   overlay = new ClusterBubble({map, position: item.center, content})
               overlay.on('click', () => {
@@ -258,28 +263,6 @@ export default {
               markers.push(overlay)
             }
           });
-          if (marker) {
-            marker.setGeometries(geometries)
-          } else {
-            marker = new TMap.MultiMarker({
-              map, enableCollision: true, geometries,
-              styles: {
-                cluster: new TMap.MarkerStyle({
-                  width: 48,
-                  height: 48,
-                  anchor: {x: 24, y: 24},
-                  src: this.$cdn + "/map/cluster.png",
-                  color: '#fff',
-                  // direction: 'center',
-                  size: 18
-                })
-              },
-            })
-            marker.on('click', (e) => {
-              let {bounds} = e.geometry.properties
-              map.fitBounds(bounds)
-            })
-          }
         })
         return Promise.resolve()
       } else {
@@ -593,5 +576,16 @@ export default {
       border-top-color: #5088FF;
     }
   }
+
+  ::v-deep.cluster {
+    color: #fff;
+    border-radius: 50%;
+    height: 120px;
+    width: 120px;
+    background: radial-gradient(circle, #5088ff 50%, rgba(#5088ff, .4) 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }
 </style>