。。

.gitignore

@@ -10,6 +10,7 @@ target/
 *.ipr
 
 ### VS Code ###
+public/roadmap
 *.log
 npm-debug.log*
 yarn-debug.log*

package-lock.json

@@ -38,6 +38,7 @@
         "js-md5": "^0.8.3",
         "jwt-decode": "^3.1.2",
         "leaflet": "^1.9.4",
+        "leaflet.markercluster": "^1.5.3",
         "lodash": "^4.17.21",
         "lodash-es": "^4.17.21",
         "nprogress": "^0.2.0",
@@ -3035,6 +3036,14 @@
       "resolved": "https://registry.npmmirror.com/leaflet/-/leaflet-1.9.4.tgz",
       "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
     },
+    "node_modules/leaflet.markercluster": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmmirror.com/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz",
+      "integrity": "sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA==",
+      "peerDependencies": {
+        "leaflet": "^1.3.1"
+      }
+    },
     "node_modules/less": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/less/-/less-4.2.0.tgz",

package.json

@@ -46,6 +46,7 @@
     "js-md5": "^0.8.3",
     "jwt-decode": "^3.1.2",
     "leaflet": "^1.9.4",
+    "leaflet.markercluster": "^1.5.3",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "nprogress": "^0.2.0",

src/main.ts

@@ -11,7 +11,7 @@ import lodasha from 'lodash';
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
-
+// import '@types/leaflet'
 // 高德地图typescript支持
 import "@amap/amap-jsapi-types";
 // vue Router

src/types/leaflet.d.ts

@@ -1 +0,0 @@
-declare module 'leaflet';

src/views/page/offLineMap.vue

@@ -370,8 +370,13 @@
   </div>
 </template>
 <script lang="ts" setup>
+// import L, {Marker} from 'leaflet'
+// import * as Leaf from 'leaflet'
 import L from 'leaflet'
 import 'leaflet/dist/leaflet.css'
+import 'leaflet.markercluster'
+import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
+
 import {JsonResult} from '@/axios'
 import * as _ from 'lodash'
 import api from '@/axios'
@@ -690,7 +695,7 @@ onMounted(() => {
   getAi()
   getjingqing()
 })
-//
+let deviceInfoWindow = ref<any>(null)
 const treedata = () => {
   api
     .post('/multialarm/client/alarm_point/count', {
@@ -706,67 +711,85 @@ const treedata = () => {
           pagesize: res1.data.count
         })
         .then((res: JsonResult<any>) => {
-          var points: any[] = []
+          const points: L.Marker[] = []
 
-          res.data.map((x: any) => {
+          // 创建 MarkerClusterGroup
-            const marker = new AMap.Marker({
+          //@ts-ignore
-              position: new AMap.LngLat(x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude),
+          const markers = L.markerClusterGroup({
-              offset: new AMap.Pixel(-15, -15),
+            maxClusterRadius: 80, // 控制聚合的半径
-              icon: new AMap.Icon({
+            iconCreateFunction: (cluster: any) => {
-                image: x.deviceType == '00' ? image3 : x.deviceType == '03' ? image1 : x.deviceType == '04' ? image2 : '',
+              // 自定义聚合点样式
-                size: new AMap.Size(40, 46.5),
+              const count = cluster.getChildCount()
-                imageSize: new AMap.Size(30, 30) //图标大小
+              const factor = Math.pow(count / res.data.length, 1 / 18)
+              const size = Math.round(30 + Math.pow(count / res.data.length, 1 / 5) * 2)
+              const hue = 180 - factor * 180
+
+              const div = document.createElement('div')
+              div.style.backgroundColor = `hsla(${hue}, 100%, 50%, 0.7)`
+              div.style.width = div.style.height = `${size}px`
+              div.style.border = `solid 1px hsla(${hue}, 100%, 40%, 1)`
+              div.style.borderRadius = `${size / 2}px`
+              div.style.boxShadow = `0 0 1px hsla(${hue}, 100%, 50%, 1)`
+              div.innerHTML = count.toString()
+              div.style.lineHeight = `${size}px`
+              div.style.color = `hsla(${hue}, 100%, 20%, 1)`
+              div.style.fontSize = '14px'
+              div.style.textAlign = 'center'
+
+              // 返回一个 Leaflet 的 divIcon
+              return L.divIcon({
+                html: div,
+                className: 'custom-cluster-icon',
+                iconSize: L.point(size, size)
+              })
+            }
+          })
+
+          // 遍历数据，创建标记
+          res.data.forEach((x: any) => {
+            const lat = x.latitude ?? 0
+            const lng = x.longitude ?? 0
+
+            const iconUrl = x.deviceType === '00' ? image3 : x.deviceType === '03' ? image1 : x.deviceType === '04' ? image2 : ''
+            const marker = L.marker([lat, lng], {
+              icon: L.icon({
+                iconUrl,
+                iconSize: [30, 30],
+                iconAnchor: [15, 15]
               }),
               title: ''
             })
-            marker.on('click', function () {
+
-              deviceInfoWindow.value = new AMap.InfoWindow({
+            // 点击事件，显示信息窗体
-                isCustom: true, //使用自定义窗体
+            marker.on('click', () => {
-                content: createSubstanceInfowindow2(x, '1'),
+              console.log('deviceInfoWindow.value', deviceInfoWindow.value)
-                offset: new AMap.Pixel(5, -13)
+              if (deviceInfoWindow.value) {
+                deviceInfoWindow.value.remove()
+              }
+              deviceInfoWindow.value = L.popup({
+                closeButton: false
               })
-              deviceInfoWindow.value.open(state.map, [x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude])
+                .setLatLng([lat, lng])
+                .setContent(createSubstanceInfowindow2(x, '1'))
+                .openOn(state.map)
             })
-            state.map.add(marker)
+
             points.push(marker)
+            markers.addLayer(marker) // 添加到聚合群组
           })
-          var count = points.length
+
-          // 聚合点样式
+          // 将聚合群组添加到地图
-          var _renderClusterMarker = function (context: any) {
+          state.map.addLayer(markers)
-            var factor = Math.pow(context.count / count, 1 / 18)
+
-            var div = document.createElement('div')
+          // 记录当前缩放级别
-            var Hue = 180 - factor * 180
+          state.map.on('zoomend', () => {
-            var bgColor = 'hsla(' + Hue + ',100%,50%,0.7)'
+            const zoom = state.map.getZoom()
-            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
-          })
-          state.map.plugin(['AMap.MarkerClusterer'], () => {
-            let zoom = state.map.getZoom()
             console.log('当前地图的缩放级别是：' + zoom)
-            cluster
           })
         })
     })
 }
+
 //当日报警列表
 const jinbao = ref([])
 const getdayline = () => {
@@ -784,49 +807,56 @@ const getdayline = () => {
         jinbao.value = res.data
         if (res.data.length > 0) {
           res.data.map((x: any) => {
+            const lat = x.latitude ?? 0
+            const lng = x.longitude ?? 0
             if (x.state == 'close') {
-              const marker = new AMap.Marker({
+              const marker = L.marker([lat, lng], {
-                position: new AMap.LngLat(x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude),
+                icon: L.icon({
-                offset: new AMap.Pixel(-10, -10),
+                  iconUrl: yes,
-                icon: new AMap.Icon({
+                  iconSize: [30, 30],
-                  image: yes,
+                  iconAnchor: [15, 15]
-                  size: new AMap.Size(40, 46.5),
-                  imageSize: new AMap.Size(40, 46.5) //图标大小
                 }),
                 title: ''
               })
-              marker.on('click', function () {
+
-                deviceInfoWindow.value = new AMap.InfoWindow({
+              // 点击事件，显示信息窗体
-                  isCustom: true, //使用自定义窗体
+              marker.on('click', () => {
-                  content: createSubstanceInfowindow(x, '1'),
+                if (deviceInfoWindow.value) {
-                  offset: new AMap.Pixel(5, -13)
+                  deviceInfoWindow.value.remove()
+                }
+                deviceInfoWindow.value = L.popup({
+                  closeButton: false
                 })
-                deviceInfoWindow.value.open(state.map, [x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude])
+                  .setLatLng([lat, lng])
+                  .setContent(createSubstanceInfowindow(x, '1'))
+                  .openOn(state.map)
               })
-              state.map.add(marker)
+              // 将 marker 添加到地图
+              marker.addTo(state.map)
             } else {
-              const marker = new AMap.Marker({
+              
-                position: new AMap.LngLat(x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude),
+              // const marker = new AMap.Marker({
-                offset: new AMap.Pixel(-20, -10),
+              //   position: new AMap.LngLat(x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude),
-                content: `<div class="indexMarkerImg">
+              //   offset: new AMap.Pixel(-20, -10),
-                                                   <img style="width:30px;height:30px;left:9px;top:7px" src='${no}'>
+              //   content: `<div class="indexMarkerImg">
-                                                  <div class="markerClass">
+              //                                      <img style="width:30px;height:30px;left:9px;top:7px" src='${no}'>
-                                                      <div></div>
+              //                                     <div class="markerClass">
-                                                      <div></div>
+              //                                         <div></div>
-                                                      <div></div>
+              //                                         <div></div>
-                                                  </div>
+              //                                         <div></div>
-                                              </div>`,
+              //                                     </div>
-                title: ''
+              //                                 </div>`,
-              })
+              //   title: ''
-              marker.on('click', function () {
+              // })
-                deviceInfoWindow.value = new AMap.InfoWindow({
+              // marker.on('click', function () {
-                  isCustom: true, //使用自定义窗体
+              //   deviceInfoWindow.value = new AMap.InfoWindow({
-                  content: createSubstanceInfowindow1(x, '1'),
+              //     isCustom: true, //使用自定义窗体
-                  offset: new AMap.Pixel(5, -13)
+              //     content: createSubstanceInfowindow1(x, '1'),
-                })
+              //     offset: new AMap.Pixel(5, -13)
-                deviceInfoWindow.value.open(state.map, [x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude])
+              //   })
-              })
+              //   deviceInfoWindow.value.open(state.map, [x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude])
-              state.map.add(marker)
+              // })
+              // state.map.add(marker)
             }
           })
         }
@@ -886,21 +916,35 @@ const gettotal = () => {
     })
 }
 //
-let deviceInfoWindow = ref<any>()
+
 const selectA = (selectedKeys: any, e: any) => {
+  // if (selectedKeys[0].length >= 13) {
+  try {
     console.log('selectedKeys', selectedKeys, e)
-  if (selectedKeys[0].length >= 13) {
+    let targetLatLngt = [e.selectedNodes[0].latitude == null ? 0 : e.selectedNodes[0].latitude, e.selectedNodes[0].longitude == null ? 0 : e.selectedNodes[0].longitude]
-    let targetLangLat = [e.selectedNodes[0].longitude == null ? 0 : e.selectedNodes[0].longitude, e.selectedNodes[0].latitude == null ? 0 : e.selectedNodes[0].latitude]
+    console.log('targetLangLat', targetLatLngt)
-
+    // 创建自定义信息窗体
-    deviceInfoWindow.value = new AMap.InfoWindow({
+    const popupContent = createSubstanceInfowindow2(e.selectedNodes[0], '1')
-      isCustom: true, //使用自定义窗体
+    const lat = e.selectedNodes[0].latitude ?? 0
-      content: createSubstanceInfowindow2(e.selectedNodes[0], '1'),
+    const lng = e.selectedNodes[0].longitude ?? 0
-      offset: new AMap.Pixel(5, -13)
+    if (deviceInfoWindow.value) {
-    })
+      deviceInfoWindow.value.remove()
-    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)
     }
+
+    deviceInfoWindow.value = L.popup({
+      closeButton: false
+    })
+      .setLatLng([lat, lng])
+      .setContent(popupContent)
+      .openOn(state.map)
+    // setView(<LatLng> center, <Number> zoom, <Zoom/pan options> options?)  注意这里是LatLng，Lat在前面
+    state.map.setView(targetLatLngt, 15)
+  } catch (error) {
+    console.log('🚀 ~ selectA ~ error:', error)
+  }
+
+  // state.map.setZoomAndCenter(205, targetLangLat)
+  // }
 }
 
 const createSubstanceInfowindow = (obj: any, type: any) => {
@@ -917,7 +961,11 @@ const createSubstanceInfowindow = (obj: any, type: any) => {
   var closeX = document.createElement('img')
   closeX.src = closeimag
   closeX.onclick = () => {
-    deviceInfoWindow.value.close()
+    // 关闭弹窗
+    if (deviceInfoWindow.value) {
+      deviceInfoWindow.value.remove() // 移除当前弹出窗体
+      deviceInfoWindow.value = null // 清空当前弹出窗体引用
+    }
   }
 
   var popMian = document.createElement('div')
@@ -948,7 +996,11 @@ const createSubstanceInfowindow1 = (obj: any, type: any) => {
   var closeX = document.createElement('img')
   closeX.src = closeimag
   closeX.onclick = () => {
-    deviceInfoWindow.value.close()
+    // 关闭弹窗
+    if (deviceInfoWindow.value) {
+      deviceInfoWindow.value.remove() // 移除当前弹出窗体
+      deviceInfoWindow.value = null // 清空当前弹出窗体引用
+    }
   }
 
   var popMian = document.createElement('div')
@@ -979,7 +1031,17 @@ const createSubstanceInfowindow2 = (obj: any, type: any) => {
   var closeX = document.createElement('img')
   closeX.src = closeimag
   closeX.onclick = () => {
-    deviceInfoWindow.value.close()
+    // 关闭弹窗
+    try {
+      console.log('deviceInfoWindow.value', deviceInfoWindow.value)
+
+      if (deviceInfoWindow.value) {
+        deviceInfoWindow.value.remove() // 移除当前弹出窗体
+        deviceInfoWindow.value = null // 清空当前弹出窗体引用
+      }
+    } catch (error) {
+      console.log('🚀 ~ createSubstanceInfowindow2 ~ error:', error)
+    }
   }
 
   var popMian = document.createElement('div')
@@ -1917,4 +1979,145 @@ iframe {
   border-radius: 5px;
   // padding-top: 20px;
 }
+
+// 弹窗样式修改
+:deep(.leaflet-popup-content-wrapper) {
+  // background: #07315e !important;
+  background: none;
+  box-shadow: none;
+  width: 500px;
+  color: #fff !important;
+  font-size: 14px;
+  padding: none;
+}
+
+:deep(.leaflet-popup-content) {
+  width: calc(100% - 40px) !important;
+}
+
+:deep(.leaflet-popup-content > div) {
+  width: 100%;
+}
+
+:deep(.leaflet-popup-content .sb_bInfo) {
+  width: 100%;
+}
+
+:deep(.leaflet-popup-content p) {
+  margin: 10px 0 !important;
+}
+
+:deep(.sb_grade > div > div) {
+  float: left;
+  width: 16%;
+  margin-top: 3px;
+}
+
+:deep(.sb_grade > div > div > p) {
+  line-height: 20px;
+}
+
+:deep(.schoolWindowInfo .sb_grade) {
+  margin-top: 10px;
+}
+
+:deep(.leaflet-popup-content-wrapper),
+:deep(.leaflet-popup-tip) {
+  background: none !important;
+}
+
+:deep(.leaflet-popup-close-button) {
+  color: #fff !important;
+  width: 30px !important;
+  height: 30px !important;
+  font-size: 30px !important;
+}
+
+:deep(.warnEventInfoWindow) {
+  overflow: hidden;
+}
+
+:deep(.warnEventInfoWindow > p) {
+  float: left;
+  width: 120px;
+}
+
+:deep(.warnEventInfoWindow > div) {
+  float: left;
+  width: calc(100% - 130px);
+  margin-left: 10px;
+}
+
+:deep(.warnEventInfoWindow > p > img) {
+  width: 100%;
+}
+// 弹窗样式修改
+
+// :deep(.leaflet-popup-content-wrapper) {
+//   background: #07315e !important;
+//   width: 500px;
+//   color: #fff !important;
+//   font-size: 14px;
+// }
+
+// :deep(.leaflet-popup-content) {
+//   width: calc(100% - 40px) !important;
+// }
+
+// :deep(.leaflet-popup-content > div) {
+//   width: 100%;
+// }
+
+// :deep(.leaflet-popup-content .sb_bInfo) {
+//   width: 100%;
+// }
+
+// :deep(.leaflet-popup-content p) {
+//   margin: 10px 0 !important;
+// }
+
+// :deep(.sb_grade > div > div) {
+//   float: left;
+//   width: 16%;
+//   margin-top: 3px;
+// }
+
+// :deep(.sb_grade > div > div > p) {
+//   line-height: 20px;
+// }
+
+// :deep(.schoolWindowInfo .sb_grade) {
+//   margin-top: 10px;
+// }
+
+// :deep(.leaflet-popup-content-wrapper),
+// :deep(.leaflet-popup-tip) {
+//   background: #07315e !important;
+// }
+
+// :deep(.leaflet-popup-close-button) {
+//   color: #fff !important;
+//   width: 30px !important;
+//   height: 30px !important;
+//   font-size: 30px !important;
+// }
+
+// :deep(.warnEventInfoWindow) {
+//   overflow: hidden;
+// }
+
+// :deep(.warnEventInfoWindow > p) {
+//   float: left;
+//   width: 120px;
+// }
+
+// :deep(.warnEventInfoWindow > div) {
+//   float: left;
+//   width: calc(100% - 130px);
+//   margin-left: 10px;
+// }
+
+// :deep(.warnEventInfoWindow > p > img) {
+//   width: 100%;
+// }
 </style>

tsconfig.json

@@ -1,5 +1,8 @@
 {
   "compilerOptions": {
+    // "types": [
+    //   "leaflet"
+    // ],
     "target": "ESNext",
     "useDefineForClassFields": true,
     "module": "ESNext",