高德地图2.0 点聚合 更新完成

高德地图2.0 点聚合 更新完成

src/views/page/index.vue

@@ -631,7 +631,7 @@ const gettree4 = (data: any) => {
             })
             let data = [res.data]
             data.forEach((tree) => {
-              console.log('tree______', tree)
+              // console.log('tree______', tree)
               tree.children.reverse() // 长沙市排在前
               printLeafs(tree, res1.data)
             })
@@ -723,23 +723,21 @@ const clickKz = (dat2a: any) => {
 
 let count: any
 let points: any[] = []
-// @ts-ignore
+let cluster: any
-let cluster: AMap.MarkerCluster | null = null
-let markers: AMap.Marker[] = []
 var _renderClusterMarker = function (context: any) {
   var factor = Math.pow(context.count / count, 1 / 18)
   var div = document.createElement('div')
   var Hue = 180 - factor * 180
-  var bgColor = 'hsla(' + Hue + ',100%,50%,0.7)'
+  var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)'
-  var fontColor = 'hsla(' + Hue + ',100%,20%,1)'
+  var fontColor = 'hsla(' + Hue + ',100%,90%,1)'
   var borderColor = 'hsla(' + Hue + ',100%,40%,1)'
-  var shadowColor = 'hsla(' + Hue + ',100%,50%,1)'
+  var shadowColor = 'hsla(' + Hue + ',100%,90%,1)'
   div.style.backgroundColor = bgColor
-  var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 2)
+  var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20)
   div.style.width = div.style.height = size + 'px'
   div.style.border = 'solid 1px ' + borderColor
   div.style.borderRadius = size / 2 + 'px'
-  div.style.boxShadow = '0 0 1px ' + shadowColor
+  div.style.boxShadow = '0 0 5px ' + shadowColor
   div.innerHTML = context.count
   div.style.lineHeight = size + 'px'
   div.style.color = fontColor
@@ -748,6 +746,28 @@ var _renderClusterMarker = function (context: any) {
   context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2))
   context.marker.setContent(div)
 }
+
+var _renderMarker = function (context: any) {
+  // console.log('🚀 ~ context:', context)
+  var offset = new AMap.Pixel(-9, -9)
+  context.marker.setIcon(
+    new AMap.Icon({
+      image: context.data[0].x.deviceType == '00' ? image3 : context.data[0].x.deviceType == '03' ? image1 : context.data[0].x.deviceType == '04' ? image2 : '',
+      size: new AMap.Size(40, 46.5),
+      imageSize: new AMap.Size(30, 30)
+    })
+  )
+  context.marker.setOffset(offset)
+  context.marker.on('click', function () {
+    // console.log('context.marker.on')
+    deviceInfoWindow.value = new AMap.InfoWindow({
+      isCustom: true,
+      content: createSubstanceInfowindow2(context.data[0].x, '1'),
+      offset: new AMap.Pixel(5, -13)
+    })
+    deviceInfoWindow.value.open(state.map, context.data[0].lnglat)
+  })
+}
 const createCluster = () => {
   // cluster = null
   if (cluster) cluster.setMap(null) // 避免重复创建
@@ -755,23 +775,11 @@ const createCluster = () => {
   cluster = new AMap.MarkerCluster(state.map, points, {
     gridSize: 80,
     maxZoom: 12,
-    renderClusterMarker: _renderClusterMarker
+    renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
+    renderMarker: _renderMarker // 自定义非聚合点样式
   })
 }
-// 清除 Marker 函数（避免重复）
+
-function clearMarkers() {
-  const overlays = state.map.getAllOverlays('marker')
-  overlays.forEach((marker: any) => {
-    if (!marker.isCluster) {
-      state.map.remove(marker) // 仅移除非聚合 Marker
-    }
-  })
-}
-// 清除所有散点
-// const clearMarkers = () => {
-//   markers.forEach((marker) => state.map.remove(marker))
-//   markers = []
-// }
 const treedata = () => {
   api
     .post('/multialarm/client/alarm_point/count', {
@@ -787,94 +795,21 @@ const treedata = () => {
           pagesize: res1.data.count
         })
         .then((res: JsonResult<any>) => {
-          console.log('🚀 ~ .then ~ res:', res)
           points = res.data.map((x: any) => {
             return {lnglat: [x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude], x: x}
           })
           count = points.length
-          console.log('points___________________________', points)
+          // console.log('points___________________________', points)
-
           createCluster() // 初始化聚合点
-          state.map.on('zoomend', () => {
-            let zoom = state.map.getZoom()
-            console.log('zoom等级____________________________', zoom)
-
-            clearMarkers() // 清除现有 Marker 保留点聚合
-            if (zoom > 12) {
-              points.forEach((item: any) => {
-                // console.log('🚀 ~ points.forEach ~ p:', item)
-                const marker = new AMap.Marker({
-                  position: item.lnglat,
-                  icon: new AMap.Icon({
-                    image: item.x.deviceType == '00' ? image3 : item.x.deviceType == '03' ? image1 : item.x.deviceType == '04' ? image2 : '',
-                    size: new AMap.Size(40, 46.5),
-                    imageSize: new AMap.Size(30, 30)
-                  })
-                })
-                marker.on('click', function () {
-                  deviceInfoWindow.value = new AMap.InfoWindow({
-                    isCustom: true,
-                    content: createSubstanceInfowindow2(item.x, '1'),
-                    offset: new AMap.Pixel(5, -13)
-                  })
-                  deviceInfoWindow.value.open(state.map, item.lnglat)
-                })
-                state.map.add(marker)
-              })
-
-              cluster?.setMap(null) // 清除聚合点，避免默认聚合样式覆盖
-            } else {
-              createCluster() // 缩小时重新创建点聚合
-              // cluster.setMap(state.map)
-              // 缩小时重新添加聚合点
-              // cluster.setMap(state.map)
-            }
-          })
-
           // 在点击聚合点时创建Marker
           cluster.on('click', function (e: any) {
+            // console.log('🚀 ~ e:', e)
             const {clusterData, lnglat} = e
             let currentZoom = state.map.getZoom()
-            console.log('🚀 ~ currentZoom:', currentZoom)
+            // console.log('🚀 ~ currentZoom:_____________________________', currentZoom)
-
+            if (clusterData?.length > 0) {
-            // 若当前缩放层级 <= 12，点击聚合点时放大到更高层级以展开
+              state.map.setZoomAndCenter(currentZoom + 1, lnglat) // 放大1级，聚焦到点击位置
-            if (currentZoom < 12) {
-              state.map.setZoomAndCenter(currentZoom + 1, lnglat) // 放大2级，聚焦到点击位置
             }
-            clearMarkers() // 先清除地图上已有的 Marker，保留点聚合
-            let markers: any[] = []
-            console.log('🚀 ~ e:', e)
-
-            clusterData.forEach((item: any) => {
-              console.log('🚀 ~ clusterData.forEach ~ item:', item)
-
-              const marker = new AMap.Marker({
-                position: item.lnglat,
-                offset: new AMap.Pixel(-15, -15),
-                icon: new AMap.Icon({
-                  image: item.x.deviceType == '00' ? image3 : item.x.deviceType == '03' ? image1 : item.x.deviceType == '04' ? image2 : '',
-                  size: new AMap.Size(40, 46.5),
-                  imageSize: new AMap.Size(30, 30)
-                })
-              })
-              marker.on('click', function () {
-                deviceInfoWindow.value = new AMap.InfoWindow({
-                  isCustom: true,
-                  content: createSubstanceInfowindow2(item.x, '1'),
-                  offset: new AMap.Pixel(5, -13)
-                })
-                deviceInfoWindow.value.open(state.map, item.lnglat)
-              })
-              markers.push(marker)
-              state.map.add(marker)
-            })
-            // 自动调整视角，保证所有 Marker 可见
-            state.map.setFitView(markers)
-          })
-          state.map.plugin('AMap.MarkerCluster', () => {
-            let zoom = state.map.getZoom()
-            console.log('当前地图的缩放级别是：' + zoom)
-            cluster
           })
         })
     })
@@ -1032,18 +967,25 @@ const gettotal = () => {
 let deviceInfoWindow = ref<any>()
 const selectA = (selectedKeys: any, e: any) => {
   console.log('selectedKeys', selectedKeys, e)
-  // if (selectedKeys[0].length >= 13) {
+  if (selectedKeys[0].length >= 13) {
-  let targetLangLat = [e.selectedNodes[0].longitude == null ? 0 : e.selectedNodes[0].longitude, e.selectedNodes[0].latitude == null ? 0 : e.selectedNodes[0].latitude]
+    // let targetLangLat = [e.selectedNodes[0].longitude == null ? 0 : e.selectedNodes[0].longitude, e.selectedNodes[0].latitude == null ? 0 : e.selectedNodes[0].latitude]
 
-  deviceInfoWindow.value = new AMap.InfoWindow({
+    deviceInfoWindow.value = new AMap.InfoWindow({
-    isCustom: true, //使用自定义窗体
+      isCustom: true, //使用自定义窗体
-    content: createSubstanceInfowindow2(e.selectedNodes[0], '1'),
+      content: createSubstanceInfowindow2(e.selectedNodes[0], '1'),
-    offset: new AMap.Pixel(5, -13)
+      offset: new AMap.Pixel(5, -13)
-  })
+    })
-  deviceInfoWindow.value.open(state.map, [e.selectedNodes[0].longitude == null ? 0 : e.selectedNodes[0].longitude, e.selectedNodes[0].latitude == null ? 0 : e.selectedNodes[0].latitude])
+    deviceInfoWindow.value.open(state.map, [e.selectedNodes[0].longitude == null ? 0 : e.selectedNodes[0].longitude, e.selectedNodes[0].latitude == null ? 0 : e.selectedNodes[0].latitude])
 
-  state.map.setZoomAndCenter(12, targetLangLat, true) // 这个过渡 不平滑
+    // state.map.setZoomAndCenter(12, targetLangLat, true) // 这个过渡 不平滑
-  // }
+    // state.map.setZoom(12, {animate: true})
+    // state.map.setCenter(targetLangLat, true)
+    state.map.setFitView(
+      new AMap.Marker({position: [e.selectedNodes[0].longitude == null ? 0 : e.selectedNodes[0].longitude, e.selectedNodes[0].latitude == null ? 0 : e.selectedNodes[0].latitude]}),
+      true,
+      [30, 30, 30, 30]
+    )
+  }
 }
 
 const createSubstanceInfowindow = (obj: any, type: any) => {