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

2024-12-26 14:05:41 +08:00 · 2024-12-26 14:05:41 +08:00 · fcfee709b6
parent ce71b6e7fe
commit fcfee709b6
2 changed files with 90 additions and 126 deletions
--- a/analyze.html
+++ b/analyze.html
--- a/src/views/page/index.vue
+++ b/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) {
-            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, {
+          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,28 +1226,25 @@ 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>
@ -1292,10 +1254,10 @@ const getSubstanceInfoWindowContent = (obj: any, type: any) => {
 			`
  } else {
    return `
-			    <div style="display:flex">
+			    <div style="display:flex;color: white;">
 			        <div style="width:50%;">
-					  <span>第一联系人：</span>
-					  <span>${obj['userName'] == undefined || obj['userName'] == null || obj['userName'] == ' ' ? '--' : obj['userName']}</span>
+					        <span style="color: white;">第一联系人：</span>
+					        <span style="color: white;">${obj['userName'] == undefined || obj['userName'] == null || obj['userName'] == ' ' ? '--' : obj['userName']}</span>
 					    </div>
 			        <div style="width:50%;">
 					        <span>电话：</span>
@ -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%;