From aca5e39d1882ef572a9858d5ca3330185d587664 Mon Sep 17 00:00:00 2001
From: TimSpan <cat20201314@163.com>
Date: Wed, 16 Oct 2024 15:02:31 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=82=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                    |   1 +
 package-lock.json             |   9 +
 package.json                  |   1 +
 src/main.ts                   |   8 +-
 src/types/leaflet.d.ts        |   1 -
 src/views/page/offLineMap.vue | 401 +++++++++++++++++++++++++---------
 tsconfig.json                 |   3 +
 7 files changed, 320 insertions(+), 104 deletions(-)
 delete mode 100644 src/types/leaflet.d.ts

diff --git a/.gitignore b/.gitignore
index 334d93ba..bf7300cd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,6 +10,7 @@ target/
 *.ipr
 
 ### VS Code ###
+public/roadmap
 *.log
 npm-debug.log*
 yarn-debug.log*
diff --git a/package-lock.json b/package-lock.json
index 3058c687..2d737d22 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 7b534904..b8c16367 100644
--- a/package.json
+++ b/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",
diff --git a/src/main.ts b/src/main.ts
index c7fbda94..e808a485 100644
--- a/src/main.ts
+++ b/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
@@ -35,13 +35,13 @@ import "@/assets/iconfont/iconfont.css";
 //自定义指令
 import vCopy from "@/directives/copy";
 const vueApp = createApp(App);
-vueApp.config.globalProperties.day=dayjs//全局挂载
-vueApp.config.globalProperties.lodash=lodasha//全局挂载
+vueApp.config.globalProperties.day = dayjs//全局挂载
+vueApp.config.globalProperties.lodash = lodasha//全局挂载
 
 vueApp.directive('copy', vCopy)
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-  vueApp.component(key, component)
+	vueApp.component(key, component)
 }
 
 vueApp
diff --git a/src/types/leaflet.d.ts b/src/types/leaflet.d.ts
deleted file mode 100644
index 8b8ee732..00000000
--- a/src/types/leaflet.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-declare module 'leaflet';
\ No newline at end of file
diff --git a/src/views/page/offLineMap.vue b/src/views/page/offLineMap.vue
index 0fbe38de..c441c5e2 100644
--- a/src/views/page/offLineMap.vue
+++ b/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) => {
-            const marker = new AMap.Marker({
-              position: new AMap.LngLat(x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude),
-              offset: new AMap.Pixel(-15, -15),
-              icon: new AMap.Icon({
-                image: x.deviceType == '00' ? image3 : x.deviceType == '03' ? image1 : x.deviceType == '04' ? image2 : '',
-                size: new AMap.Size(40, 46.5),
-                imageSize: new AMap.Size(30, 30) //图标大小
+          // 创建 MarkerClusterGroup
+          //@ts-ignore
+          const markers = L.markerClusterGroup({
+            maxClusterRadius: 80, // 控制聚合的半径
+            iconCreateFunction: (cluster: any) => {
+              // 自定义聚合点样式
+              const count = cluster.getChildCount()
+              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, //使用自定义窗体
-                content: createSubstanceInfowindow2(x, '1'),
-                offset: new AMap.Pixel(5, -13)
+
+            // 点击事件，显示信息窗体
+            marker.on('click', () => {
+              console.log('deviceInfoWindow.value', deviceInfoWindow.value)
+              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) {
-            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
-          })
-          state.map.plugin(['AMap.MarkerClusterer'], () => {
-            let zoom = state.map.getZoom()
+
+          // 将聚合群组添加到地图
+          state.map.addLayer(markers)
+
+          // 记录当前缩放级别
+          state.map.on('zoomend', () => {
+            const 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({
-                position: new AMap.LngLat(x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude),
-                offset: new AMap.Pixel(-10, -10),
-                icon: new AMap.Icon({
-                  image: yes,
-                  size: new AMap.Size(40, 46.5),
-                  imageSize: new AMap.Size(40, 46.5) //图标大小
+              const marker = L.marker([lat, lng], {
+                icon: L.icon({
+                  iconUrl: yes,
+                  iconSize: [30, 30],
+                  iconAnchor: [15, 15]
                 }),
                 title: ''
               })
-              marker.on('click', function () {
-                deviceInfoWindow.value = new AMap.InfoWindow({
-                  isCustom: true, //使用自定义窗体
-                  content: createSubstanceInfowindow(x, '1'),
-                  offset: new AMap.Pixel(5, -13)
+
+              // 点击事件，显示信息窗体
+              marker.on('click', () => {
+                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(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),
-                offset: new AMap.Pixel(-20, -10),
-                content: `<div class="indexMarkerImg">
-                                                   <img style="width:30px;height:30px;left:9px;top:7px" src='${no}'>
-                                                  <div class="markerClass">
-                                                      <div></div>
-                                                      <div></div>
-                                                      <div></div>
-                                                  </div>
-                                              </div>`,
-                title: ''
-              })
-              marker.on('click', function () {
-                deviceInfoWindow.value = new AMap.InfoWindow({
-                  isCustom: true, //使用自定义窗体
-                  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])
-              })
-              state.map.add(marker)
+              
+              // const marker = new AMap.Marker({
+              //   position: new AMap.LngLat(x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude),
+              //   offset: new AMap.Pixel(-20, -10),
+              //   content: `<div class="indexMarkerImg">
+              //                                      <img style="width:30px;height:30px;left:9px;top:7px" src='${no}'>
+              //                                     <div class="markerClass">
+              //                                         <div></div>
+              //                                         <div></div>
+              //                                         <div></div>
+              //                                     </div>
+              //                                 </div>`,
+              //   title: ''
+              // })
+              // marker.on('click', function () {
+              //   deviceInfoWindow.value = new AMap.InfoWindow({
+              //     isCustom: true, //使用自定义窗体
+              //     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])
+              // })
+              // state.map.add(marker)
             }
           })
         }
@@ -886,21 +916,35 @@ const gettotal = () => {
     })
 }
 //
-let deviceInfoWindow = ref<any>()
+
 const selectA = (selectedKeys: any, e: any) => {
-  console.log('selectedKeys', selectedKeys, e)
-  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]
+  // if (selectedKeys[0].length >= 13) {
+  try {
+    console.log('selectedKeys', selectedKeys, e)
+    let targetLatLngt = [e.selectedNodes[0].latitude == null ? 0 : e.selectedNodes[0].latitude, e.selectedNodes[0].longitude == null ? 0 : e.selectedNodes[0].longitude]
+    console.log('targetLangLat', targetLatLngt)
+    // 创建自定义信息窗体
+    const popupContent = createSubstanceInfowindow2(e.selectedNodes[0], '1')
+    const lat = e.selectedNodes[0].latitude ?? 0
+    const lng = e.selectedNodes[0].longitude ?? 0
+    if (deviceInfoWindow.value) {
+      deviceInfoWindow.value.remove()
+    }
 
-    deviceInfoWindow.value = new AMap.InfoWindow({
-      isCustom: true, //使用自定义窗体
-      content: createSubstanceInfowindow2(e.selectedNodes[0], '1'),
-      offset: new AMap.Pixel(5, -13)
+    deviceInfoWindow.value = L.popup({
+      closeButton: false
     })
-    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)
+      .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>
diff --git a/tsconfig.json b/tsconfig.json
index 8afeec93..5a8c484e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,8 @@
 {
   "compilerOptions": {
+    // "types": [
+    //   "leaflet"
+    // ],
     "target": "ESNext",
     "useDefineForClassFields": true,
     "module": "ESNext",