准备升级高德地图2.0、并重新点聚合

准备升级高德地图2.0、并重新点聚合

src/views/page/index.vue

@@ -386,13 +386,6 @@
 </template>
 <script lang="ts" setup>
 import {JsonResult} from '@/axios'
-// import {cloneDeep} from 'lodash'
-import type {TreeProps} from 'ant-design-vue'
-// import {Search} from '@element-plus/icons-vue'
-// import {createMqttData} from '@/utils/createMqttData'
-// import {sendMqtt} from '@/utils/sendMqtt'
-// import {wsUrl} from '@/utils/webSocket'
-// import type {CascaderProps} from 'ant-design-vue'
 import * as _ from 'lodash'
 import api from '@/axios'
 import {useUserStore} from '@/stores/modules/userStore'
@@ -404,12 +397,16 @@ import image2 from './imag/anbao.png'
 import image3 from './imag/she.png'
 import image4 from './imag/dsds.png'
 import closeimag from './imag/infoClose.png'
-import {Ref, ref, watch, onMounted, onBeforeMount, reactive, getCurrentInstance, nextTick, h} from 'vue'
+import {ref, watch, onMounted, getCurrentInstance, nextTick, h} from 'vue'
 
 import type {ShowSearchType} from 'ant-design-vue/es/cascader'
 const value = ref<string[]>([])
 const options = ref<any[]>([])
-
+var state = {
+  id: 'indexx',
+  map: null as any
+}
+var cluster: any
 import {LoadingOutlined} from '@ant-design/icons-vue'
 
 const indicator = h(LoadingOutlined, {
@@ -613,68 +610,7 @@ const checkKeyExists = (nodes: any, key: string): boolean => {
     return false
   })
 }
-// 展开指定 树节点
-// const scrollToKey = (key: string) => {
-//   console.log('scrollToKey', key)
-//   const exists = checkKeyExists(treedataall.value, key)
-//   if (!exists) {
-//     console.error(`Key ${key} not found in the tree.`)
-//     return
-//   }
-//   // 调用 scrollTo 方法
-//   nextTick(() => {
-//     treeRef.value.scrollTo({
-//       key,
-//       align: 'top', // 可选 top, bottom, auto
-//       offset: 0 // 可选偏移量
-//     })
-//   })
-// }
-// 搜索 树结构
-// const onSearch = () => {
-//   let keysToExpand: any[]
-//   keysToExpand = []
-//   let keysToSelect: any[]
-//   keysToSelect = []
 
-//   const findKeys = (nodes: any, parentKeyPath: any[]) => {
-//     nodes.forEach((node: any) => {
-//       const nodeId = node.code
-//       const currentPath = [...parentKeyPath, nodeId]
-
-//       if (node.title.includes(searchValue.value)) {
-//         console.log('node______', node)
-
-//         keysToSelect.push(nodeId)
-//         currentPath.forEach((key) => keysToExpand.push(key))
-//       }
-
-//       if (node.children && node.children.length > 0) {
-//         findKeys(node.children, currentPath) // 递归处理子节点，传递当前路径
-//       }
-//     })
-//   }
-
-//   findKeys(treedataall.value, [])
-
-//   console.log('Expanded Keys:', Array.from(keysToExpand))
-//   console.log('Selected Keys:', keysToSelect)
-//   if (keysToSelect.length === 0) {
-//     ElMessage.warning(`未搜索到${searchValue.value}`)
-//   }
-
-//   expandedKeys.value = [...new Set(keysToExpand)]
-//   selectedKeys.value = keysToSelect
-//   if (selectedKeys.value.length > 0) {
-//     console.log('selectedKeys.value', selectedKeys.value)
-
-//     scrollToMatchedNode(searchValue.value)
-//     // scrollToKey(selectedKeys.value[0])
-//   }
-// }
-// const refreshTreeData = () => {
-//   treedataall.value = [...treedataall.value]
-// }
 const gettree4 = (data: any) => {
   loading.value = true
   api
@@ -784,7 +720,30 @@ const clickKz = (dat2a: any) => {
     })
   visible.value = true
 }
-
+var count: any
+var points: any[] = []
+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 fontColor = 'hsla(' + Hue + ',100%,20%,1)'
+  var borderColor = 'hsla(' + Hue + ',100%,40%,1)'
+  var shadowColor = 'hsla(' + Hue + ',100%,50%,1)'
+  div.style.backgroundColor = bgColor
+  var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 2)
+  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.innerHTML = context.count
+  div.style.lineHeight = size + 'px'
+  div.style.color = fontColor
+  div.style.fontSize = '14px'
+  div.style.textAlign = 'center'
+  context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2))
+  context.marker.setContent(div)
+}
 onMounted(() => {
   getAiCount()
   gettotal()
@@ -809,7 +768,7 @@ const treedata = () => {
           pagesize: res1.data.count
         })
         .then((res: JsonResult<any>) => {
-          var points: any[] = []
+          console.log('🚀 ~ .then ~ res:', res)
 
           res.data.map((x: any) => {
             const marker = new AMap.Marker({
@@ -833,33 +792,10 @@ const treedata = () => {
             state.map.add(marker)
             points.push(marker)
           })
-          var count = points.length
+          count = points.length
           // console.log('___________________________points', points)
-
           // 聚合点样式
-          var _renderClusterMarker = function (context: any) {
+          cluster = new AMap.MarkerClusterer(state.map, points, {
-            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 fontColor = 'hsla(' + Hue + ',100%,20%,1)'
-            var borderColor = 'hsla(' + Hue + ',100%,40%,1)'
-            var shadowColor = 'hsla(' + Hue + ',100%,50%,1)'
-            div.style.backgroundColor = bgColor
-            var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 2)
-            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.innerHTML = context.count
-            div.style.lineHeight = size + 'px'
-            div.style.color = fontColor
-            div.style.fontSize = '14px'
-            div.style.textAlign = 'center'
-            context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2))
-            context.marker.setContent(div)
-          }
-          var cluster = new AMap.MarkerClusterer(state.map, points, {
             gridSize: 80,
             maxZoom: 12,
             renderClusterMarker: _renderClusterMarker
@@ -1046,7 +982,33 @@ const selectA = (selectedKeys: any, e: any) => {
     })
     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(205, targetLangLat)
+    state.map.setZoomAndCenter(12, targetLangLat)
+
+    // cluster = new AMap.MarkerClusterer(state.map, points, {
+    //   gridSize: 80,
+    //   maxZoom: 12,
+    //   renderClusterMarker: _renderClusterMarker
+    // })
+    // state.map.plugin(['AMap.MarkerClusterer'], () => {
+    //   let zoom = state.map.getZoom()
+    //   console.log('当前地图的缩放级别是：' + zoom)
+    //   cluster
+    // })
+    // state.map.setCenter(targetLangLat)
+    // state.map.on('moveend', () => {
+    //   console.log(11111)
+    // })
+    // state.map.on('zoomend', () => {
+    //   console.log(22222)
+    // })
+    // state.map.on('moveend', () => {
+    //   console.log(33333)
+    // })
+
+    // if (cluster) {
+    //   cluster.draw()
+    // }
+    // treedata()
   }
 }
 
@@ -1060,7 +1022,10 @@ const createSubstanceInfowindow = (obj: any, type: any) => {
 
   var userinfoSpan = document.createElement('span')
   userinfoSpan.innerHTML = `<span>${obj['title']}</span>`
-
+  // 获取内部的span元素
+  var innerSpan = userinfoSpan.querySelector('span')
+  // 设置字体颜色为白色
+  innerSpan.style.color = 'white'
   var closeX = document.createElement('img')
   closeX.src = closeimag
   closeX.onclick = () => {
@@ -1261,51 +1226,48 @@ const getSubstanceInfoWindowContent2 = (obj: any, type: any) => {
 }
 
 const getSubstanceInfoWindowContent = (obj: any, type: any) => {
-  // console.log('obj', obj, type)
-  var station = obj['station']
-  var nickname = ''
   if (type == '1' || type == '3') {
     return `
-			    <p>
+			    <p style="color: white;">
 			        <span>设备号：</span>
 			        <span>${obj['alarmSource'] == undefined || null ? '--' : obj['alarmSource']}</span>
 			        <span>名称：</span>
 			        <span>${obj['alarmTarget'] == undefined || null ? '--' : obj['alarmTarget']}</span>
 			    </p>
-			    <p>
+			    <p style="color: white;">
 			        <span>联系人：</span>
 			        <span>${obj['user1Name'] == undefined || null ? '--' : obj['user1Name']}</span>
 			        <span>电话：</span>
 					<span>${obj['user1Phone'] == undefined || null ? '--' : obj['user1Phone']}</span>
 			    </p>
-			    <p>
+			    <p style="color: white;">
 			        <span>地址:</span>
 			        <span>${obj['address'] == undefined || null ? '--' : obj['address']}</span>
 			    </p>
-				<p>
+				  <p style="color: white;">
 				    <span>时间:</span>
 				    <span>${obj['timestamp'] == undefined || null ? '--' : obj['timestamp']}</span>
-				</p>
+				  </p>
-				<p>
+				  <p >
 				  <button onclick='cz2(${JSON.stringify(obj)},${JSON.stringify(upstatuslist)})' style="color='#fff'" type="button">处置</button>
-				</p>
+				  </p>
 			`
   } else {
     return `
-			    <div style="display:flex">
+			    <div style="display:flex;color: white;">
 			        <div style="width:50%;">
-					  <span>第一联系人：</span>
+					        <span style="color: white;">第一联系人：</span>
-					  <span>${obj['userName'] == undefined || obj['userName'] == null || obj['userName'] == ' ' ? '--' : obj['userName']}</span>
+					        <span style="color: white;">${obj['userName'] == undefined || obj['userName'] == null || obj['userName'] == ' ' ? '--' : obj['userName']}</span>
-					</div>
+					    </div>
 			        <div style="width:50%;">
-					  <span>电话：</span>
+					        <span>电话：</span>
-					  <span>${obj['userPhone'] == undefined || obj['userPhone'] == null || obj['userPhone'] == ' ' ? '--' : obj['userPhone']}</span>
+					        <span>${obj['userPhone'] == undefined || obj['userPhone'] == null || obj['userPhone'] == ' ' ? '--' : obj['userPhone']}</span>
-					</div>
+					    </div>
 			    </div>
 			    <div style="display:flex;margin-top:10px">
 					<div style="width:50%;">
-					  <span>第二联系人：</span>
+					    <span>第二联系人：</span>
-					  <span>${obj['user2Name'] == undefined || obj['user2Name'] == null || obj['user2Name'] == ' ' ? '--' : obj['user2Name']}</span>
+					    <span>${obj['user2Name'] == undefined || obj['user2Name'] == null || obj['user2Name'] == ' ' ? '--' : obj['user2Name']}</span>
 					</div>
 					<div style="width:50%;">
 					  <span>电话：</span>
@@ -1327,7 +1289,7 @@ const getSubstanceInfoWindowContent = (obj: any, type: any) => {
 					  <span>区域码:</span>
 					  <span>${obj['subCode'] == undefined || obj['subCode'] == null || obj['subCode'] == ' ' ? '--' : obj['subCode']}</span>
 					</div>
-			    </div>
+			  </div>
 			`
   }
 }
@@ -1430,15 +1392,11 @@ const toinfo = (item: any, index: number) => {
 }
 //
 
-var state = {
-  id: 'indexx',
-  map: null as any
-}
-
 const initMap = () => {
   let latitude = JSON.parse(localStorage.getItem('user-stores'))['userInfo']['latitude']
-  let longitude = JSON.parse(localStorage.getItem('user-stores'))['userInfo']['longitude']
 
+  let longitude = JSON.parse(localStorage.getItem('user-stores'))['userInfo']['longitude']
+  console.log('地图中心点————————————————————————————————', latitude, longitude)
   state.map = new AMap.Map(state.id, {
     // center: [113.015117, 28.209425],
     center: [longitude, latitude],
@@ -1448,12 +1406,18 @@ const initMap = () => {
   getdayline()
   // stationWebsocket();
 }
+// state.map.on('zoomend', () => {
+//   console.log(11111)
+// })
 </script>
 
 <style scoped lang="scss">
 :where(.css-dev-only-do-not-override-19iuou).ant-layout {
   color: white;
 }
+:where(.css-19iuou).ant-layout {
+  color: white;
+}
 .indexx {
   width: 100%;
   height: 100%;