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,7 +169,55 @@ export default {
     getMarkerCluster(points, count = 0) {
       let {lib: TMap, map} = this
       if (map) {
-        map.setCenter(this.config.latlng)
+        class ClusterBubble extends TMap.DOMOverlay {
+          constructor(options) {
+            super(options);
+          }
+
+          onInit(options) {
+            this.content = options.content;
+            this.position = options.position;
+            this.customClass = options.customClass
+          };
+
+          onDestroy() {
+            this.dom.removeEventListener('click', this.onClick);
+            this.removeAllListeners();
+          }
+
+          createDOM() {
+            let dom = document.createElement('div');
+            dom.classList.add(this.customClass || 'marker');
+            dom.innerText = this.content;
+
+            // 监听点击事件，实现zoomOnClick
+            this.onClick = this.onClick.bind(this);
+            // pc端注册click事件，移动端注册touchend事件
+            dom.addEventListener('click', this.onClick);
+            dom.addEventListener('touchend', this.onClick);
+            return dom;
+          };
+
+          updateDOM() {
+            if (!this.map) {
+              return;
+            }
+            // 经纬度坐标转容器像素坐标
+            let pixel = this.map.projectToContainer(this.position);
+
+            // 使文本框中心点对齐经纬度坐标点
+            let left = pixel.getX() - this.dom.clientWidth / 2 + 'px';
+            let top = pixel.getY() - this.dom.clientHeight / 2 + 'px';
+            this.dom.style.transform = `translate(${left}, ${top})`;
+            this.emit('dom_updated');
+          };
+
+          onClick() {
+            this.emit('click');
+          }
+        }
+
+        this.config.latlng && map.setCenter(this.config.latlng)
         let MarkerCluster = new TMap.MarkerCluster({
           map, gridSize: 60,
           enableDefaultStyle: false, // 关闭默认样式
@@ -180,7 +228,7 @@ export default {
           })) || [],
           zoomOnClick: true
         })
-        let geometries = [], marker, markers = []
+        let markers = [], cls = []
         MarkerCluster.on('cluster_changed', () => {
           if (markers.length) {
             markers.forEach(function (item) {
@@ -188,67 +236,24 @@ export default {
             })
             markers = [];
           }
-          geometries = []
+          cls.forEach(e => e.destroy())
+          cls = []
           let clusters = MarkerCluster.getClusters()
           clusters.forEach((item) => {
             if (item.geometries?.length > 1) {
               //聚合样式
-              geometries.push({
+              let clusterBubble = new ClusterBubble({
-                styleId: 'cluster',
+                map,
                 position: item.center,
-                properties: {...item},
+                content: item.geometries.length,
-                content: item.geometries.length?.toString() || "0"
+                customClass: 'cluster'
               })
+              clusterBubble.on('click', () => {
+                map.fitBounds(item.bounds);
+              });
+              cls.push(clusterBubble)
             } else {
               //点标记样式
-              // 创建气泡DOM元素
-              class ClusterBubble extends TMap.DOMOverlay {
-                constructor(options) {
-                  super(options);
-                }
-
-                onInit(options) {
-                  this.content = options.content;
-                  this.position = options.position;
-                };
-
-                onDestroy() {
-                  this.dom.removeEventListener('click', this.onClick);
-                  this.removeAllListeners();
-                }
-
-                createDOM() {
-                  let dom = document.createElement('div');
-                  dom.classList.add('marker');
-                  dom.innerText = this.content;
-
-                  // 监听点击事件，实现zoomOnClick
-                  this.onClick = this.onClick.bind(this);
-                  // pc端注册click事件，移动端注册touchend事件
-                  dom.addEventListener('click', this.onClick);
-                  dom.addEventListener('touchend', this.onClick);
-                  return dom;
-                };
-
-                updateDOM() {
-                  if (!this.map) {
-                    return;
-                  }
-                  // 经纬度坐标转容器像素坐标
-                  let pixel = this.map.projectToContainer(this.position);
-
-                  // 使文本框中心点对齐经纬度坐标点
-                  let left = pixel.getX() - this.dom.clientWidth / 2 + 'px';
-                  let top = pixel.getY() - this.dom.clientHeight / 2 + 'px';
-                  this.dom.style.transform = `translate(${left}, ${top})`;
-                  this.emit('dom_updated');
-                };
-
-                onClick() {
-                  this.emit('click');
-                }
-              }
-
               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>