feat： 变更地图插件

nezha-fronted/.gitignore

@@ -1,7 +1,7 @@
 .DS_Store
 node_modules/
 /dist/
-/static/
+
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

nezha-fronted/package-lock.json

@@ -1399,6 +1399,65 @@
         "@lezer/common": "^0.15.0"
       }
     },
+    "@mapbox/geojson-rewind": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.2.tgz",
+      "integrity": "sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==",
+      "requires": {
+        "get-stream": "^6.0.1",
+        "minimist": "^1.2.6"
+      },
+      "dependencies": {
+        "get-stream": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+          "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg=="
+        },
+        "minimist": {
+          "version": "1.2.6",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
+          "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
+        }
+      }
+    },
+    "@mapbox/jsonlint-lines-primitives": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
+      "integrity": "sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ=="
+    },
+    "@mapbox/mapbox-gl-supported": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-2.0.1.tgz",
+      "integrity": "sha512-HP6XvfNIzfoMVfyGjBckjiAOQK9WfX0ywdLubuPMPv+Vqf5fj0uCbgBQYpiqcWZT6cbyyRnTSXDheT1ugvF6UQ=="
+    },
+    "@mapbox/point-geometry": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
+      "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ=="
+    },
+    "@mapbox/tiny-sdf": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.0.5.tgz",
+      "integrity": "sha512-OhXt2lS//WpLdkqrzo/KwB7SRD8AiNTFFzuo9n14IBupzIMa67yGItcK7I2W9D8Ghpa4T04Sw9FWsKCJG50Bxw=="
+    },
+    "@mapbox/unitbezier": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz",
+      "integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw=="
+    },
+    "@mapbox/vector-tile": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz",
+      "integrity": "sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==",
+      "requires": {
+        "@mapbox/point-geometry": "~0.1.0"
+      }
+    },
+    "@mapbox/whoots-js": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz",
+      "integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q=="
+    },
     "@riophae/vue-treeselect": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/@riophae/vue-treeselect/-/vue-treeselect-0.4.0.tgz",
@@ -1512,6 +1571,11 @@
         "@babel/types": "^7.3.0"
       }
     },
+    "@types/geojson": {
+      "version": "7946.0.10",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz",
+      "integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA=="
+    },
     "@types/istanbul-lib-coverage": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz",
@@ -1543,6 +1607,26 @@
       "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=",
       "dev": true
     },
+    "@types/mapbox__point-geometry": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@types/mapbox__point-geometry/-/mapbox__point-geometry-0.1.2.tgz",
+      "integrity": "sha512-D0lgCq+3VWV85ey1MZVkE8ZveyuvW5VAfuahVTQRpXFQTxw03SuIf1/K4UQ87MMIXVKzpFjXFiFMZzLj2kU+iA=="
+    },
+    "@types/mapbox__vector-tile": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@types/mapbox__vector-tile/-/mapbox__vector-tile-1.3.0.tgz",
+      "integrity": "sha512-kDwVreQO5V4c8yAxzZVQLE5tyWF+IPToAanloQaSnwfXmIcJ7cyOrv8z4Ft4y7PsLYmhWXmON8MBV8RX0Rgr8g==",
+      "requires": {
+        "@types/geojson": "*",
+        "@types/mapbox__point-geometry": "*",
+        "@types/pbf": "*"
+      }
+    },
+    "@types/pbf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/pbf/-/pbf-3.0.2.tgz",
+      "integrity": "sha512-EDrLIPaPXOZqDjrkzxxbX7UlJSeQVgah3i0aA4pOSzmK9zq3BIh7/MZIQxED7slJByvKM4Gc6Hypyu2lJzh3SQ=="
+    },
     "@types/q": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.2.tgz",
@@ -4928,6 +5012,11 @@
       "integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==",
       "dev": true
     },
+    "csscolorparser": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
+      "integrity": "sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w=="
+    },
     "cssesc": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-0.1.0.tgz",
@@ -6366,6 +6455,11 @@
         "stream-shift": "^1.0.0"
       }
     },
+    "earcut": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
+      "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ=="
+    },
     "easings-css": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/easings-css/-/easings-css-1.0.0.tgz",
@@ -8255,6 +8349,11 @@
       "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
       "dev": true
     },
+    "geojson-vt": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-3.2.1.tgz",
+      "integrity": "sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg=="
+    },
     "get-caller-file": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
@@ -8302,6 +8401,11 @@
       "integrity": "sha512-vW/9dBahGbpKPcccy3xKkHgdWoH/cAPPc3lQw+3edl7b4j29JfNGVrja0a1d8ZoRe4nTN8GCPrF9aBErDnzx5Q==",
       "dev": true
     },
+    "gl-matrix": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.3.tgz",
+      "integrity": "sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA=="
+    },
     "glob": {
       "version": "7.1.6",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
@@ -10927,6 +11031,11 @@
         "set-immediate-shim": "~1.0.1"
       }
     },
+    "kdbush": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-3.0.0.tgz",
+      "integrity": "sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew=="
+    },
     "keyv": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.0.0.tgz",
@@ -11280,6 +11389,36 @@
         "object-visit": "^1.0.0"
       }
     },
+    "maplibre-gl": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-2.2.0.tgz",
+      "integrity": "sha512-5LB7ROIxvBADPa4PmU2j+mp0jG5IIbEidCOyZEXVbEriluMJn0hz28vszVb4Cr2IA4YQ9cnERqjHaf33MHIRBQ==",
+      "requires": {
+        "@mapbox/geojson-rewind": "^0.5.2",
+        "@mapbox/jsonlint-lines-primitives": "^2.0.2",
+        "@mapbox/mapbox-gl-supported": "^2.0.1",
+        "@mapbox/point-geometry": "^0.1.0",
+        "@mapbox/tiny-sdf": "^2.0.5",
+        "@mapbox/unitbezier": "^0.0.1",
+        "@mapbox/vector-tile": "^1.3.1",
+        "@mapbox/whoots-js": "^3.1.0",
+        "@types/geojson": "^7946.0.10",
+        "@types/mapbox__point-geometry": "^0.1.2",
+        "@types/mapbox__vector-tile": "^1.3.0",
+        "@types/pbf": "^3.0.2",
+        "csscolorparser": "~1.0.3",
+        "earcut": "^2.2.4",
+        "geojson-vt": "^3.2.1",
+        "gl-matrix": "^3.4.3",
+        "murmurhash-js": "^1.0.0",
+        "pbf": "^3.2.1",
+        "potpack": "^1.0.2",
+        "quickselect": "^2.0.0",
+        "supercluster": "^7.1.5",
+        "tinyqueue": "^2.0.3",
+        "vt-pbf": "^3.1.3"
+      }
+    },
     "material-colors": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
@@ -11770,6 +11909,11 @@
       "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=",
       "dev": true
     },
+    "murmurhash-js": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/murmurhash-js/-/murmurhash-js-1.0.0.tgz",
+      "integrity": "sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw=="
+    },
     "mv": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/mv/-/mv-2.1.1.tgz",
@@ -12692,6 +12836,15 @@
         "pify": "^3.0.0"
       }
     },
+    "pbf": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
+      "integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
+      "requires": {
+        "ieee754": "^1.1.12",
+        "resolve-protobuf-schema": "^2.1.0"
+      }
+    },
     "pbkdf2": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.2.tgz",
@@ -15124,6 +15277,11 @@
         }
       }
     },
+    "potpack": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz",
+      "integrity": "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ=="
+    },
     "preload": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/preload/-/preload-0.1.0.tgz",
@@ -15268,6 +15426,11 @@
       "integrity": "sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk=",
       "dev": true
     },
+    "protocol-buffers-schema": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
+      "integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw=="
+    },
     "proxy-addr": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.5.tgz",
@@ -15385,6 +15548,11 @@
       "integrity": "sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA==",
       "dev": true
     },
+    "quickselect": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
+      "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
+    },
     "quill": {
       "version": "1.3.7",
       "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz",
@@ -15875,6 +16043,14 @@
       "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=",
       "dev": true
     },
+    "resolve-protobuf-schema": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
+      "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
+      "requires": {
+        "protocol-buffers-schema": "^3.3.1"
+      }
+    },
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -17370,6 +17546,14 @@
         }
       }
     },
+    "supercluster": {
+      "version": "7.1.5",
+      "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-7.1.5.tgz",
+      "integrity": "sha512-EulshI3pGUM66o6ZdH3ReiFcvHpM3vAigyK+vcxdjpJyEbIIrtbmBdY23mGgnI24uXiGFvrGq9Gkum/8U7vJWg==",
+      "requires": {
+        "kdbush": "^3.0.0"
+      }
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -17844,6 +18028,11 @@
       "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz",
       "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA=="
     },
+    "tinyqueue": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz",
+      "integrity": "sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA=="
+    },
     "tmp": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.29.tgz",
@@ -18513,6 +18702,16 @@
       "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==",
       "dev": true
     },
+    "vt-pbf": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/vt-pbf/-/vt-pbf-3.1.3.tgz",
+      "integrity": "sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==",
+      "requires": {
+        "@mapbox/point-geometry": "0.1.0",
+        "@mapbox/vector-tile": "^1.3.1",
+        "pbf": "^3.2.1"
+      }
+    },
     "vue": {
       "version": "2.6.10",
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",

nezha-fronted/package.json

@@ -48,6 +48,7 @@
     "jszip": "^3.9.1",
     "le5le-store": "^1.0.7",
     "leaflet": "^1.7.1",
+    "maplibre-gl": "^2.2.0",
     "moment-timezone": "^0.5.33",
     "mqtt": "4.2.6",
     "node-sass": "^4.14.1",

nezha-fronted/src/components/chart/chart/chartMap.vue

@@ -16,7 +16,8 @@ import axios from 'axios'
 import icon from 'leaflet/dist/images/marker-icon.png'
 import iconShadow from 'leaflet/dist/images/marker-shadow.png'
 import 'leaflet/dist/leaflet.css'
-
+import maplibregl from 'maplibre-gl'
+import mapStyle from './mapStyle'
 const regNum = /^[0-9]+.?[0-9]*/
 export default {
   name: 'chartMap',
@@ -47,9 +48,9 @@ export default {
       this.timer = setTimeout(() => {
         let loadPromise
         this.loadMapConfig().then((mapConfig) => {
-          if (mapConfig && this.map) {
-            loadPromise = this.loadDataCenterMapData()
-          }
+          // if (mapConfig && this.map) {
+          //   loadPromise = this.loadDataCenterMapData()
+          // }
         })
         this.isInit = false
         return loadPromise
@@ -66,45 +67,52 @@ export default {
         this.$get('sysConfig', param).then(response => {
           if (response.code == 200) {
             const mapConfig = JSON.parse(response.data.paramKey.map_center_config)
+            mapStyle.center = [Number(mapConfig.longitude), Number(mapConfig.latitude)]
             if (this.map) {
               this.map.remove()
               this.map = null
             }
             const mapId = this.isFullscreen ? document.getElementById('map-screen-' + this.chartInfo.id) : document.getElementById('map' + this.chartInfo.id)
-            const map = L.map(mapId, {
-              minZoom: mapConfig.minZoom,
-              maxZoom: mapConfig.maxZoom,
-              attributionControl: false,
-              zoomControl: false,
-              maxBounds: L.latLngBounds(L.latLng(-90, -180), L.latLng(90, 180))
-            }).setView([mapConfig.latitude, mapConfig.longitude], mapConfig.zoom)
-            map.createPane('myPane', document.querySelector('.my-pane-' + this.chartId))
-            // map.on('tooltipopen', function (param) {
-            //   // setTimeout(() => {
-            //   //   vm.initTooltipChart(param)
-            //   // }, 100)
-            // })
-            // map.on('tooltipclose', function (param) {
-            // })
-            this.map = map
-
-            L.tileLayer(
-              '/static/Tiles/{z}/{x}/{y}.png',
-              { noWrap: true }
-            ).addTo(map)
-
-            const attribution = L.control.attribution({ position: 'bottomright', prefix: '' })
-            attribution.addAttribution(' © OpenStreetMap contributors')
-            attribution.addTo(map)
-
-            L.control.zoom({
-              position: 'bottomright',
-              zoomInText: '<i class="nz-icon nz-icon-enlarge"></i>',
-              zoomOutText: '<i class="nz-icon nz-icon-narrow"></i>',
-              zoomInTitle: '',
-              zoomOutTitle: ''
-            }).addTo(map)
-
+            this.map = new maplibregl.Map({
+              container: mapId,
+              style: mapStyle,
+              maxZoom: 7,
+              minZoom: 0,
+              renderWorldCopies: false,
+              hash: false,
+              transformRequest: function (url, resourceType) {
+                console.log(url, resourceType)
+                if (resourceType === 'Tile' && url.indexOf('https://api.maptiler.com/tiles/v3') > -1) {
+                  const urlParams = url.split('.pbf')[0].split('/')
+                  const z = urlParams[urlParams.length - 3]
+                  const x = urlParams[urlParams.length - 2]
+                  const y = urlParams[urlParams.length - 1]
+                  const newUrl1 = `nzMap://static/maplibreTitles/${z}/${x}/${y}.pbf`
+                  return {
+                    url: newUrl1,
+                    credentials: 'include',
+                    method: 'GET'
+                    // Include cookies for cross-origin requests
+                  }
+                }
+              }
+            })
+            maplibregl.addProtocol('nzMap', (params, callback) => { // 切片显示接口 防止跨域的问题
+              fetch(`${params.url.split('://')[1]}`)
+                .then(t => {
+                  if (t.status == 200) {
+                    t.arrayBuffer().then(arr => {
+                      callback(null, arr, null, null)
+                    })
+                  } else {
+                    callback(new Error(`Tile fetch error: ${t.statusText}`))
+                  }
+                })
+                .catch(e => {
+                  callback(new Error(e))
+                })
+              return { cancel: () => { } }
+            })
             resolve(mapConfig)
           }
         })

nezha-fronted/src/components/chart/chart/chartMap1.vue

@@ -0,0 +1,236 @@
+<template>
+  <div class="overview">
+    <div class="content-col-content" style="padding:0">
+      <div :id="'map' + (isFullscreen ? '-screen-' : '' ) + chartInfo.id " style="height: 100%; width: 100%" :style="theme=='dark'? 'filter: invert(1) hue-rotate(0.5turn);opacity: 0.75;': ''"></div>
+    </div>
+    <!--自定义地图鼠标悬浮提示dom，避免被overflow：hidden裁剪-->
+    <div :style="{'left': `${tooltip.x}px`, 'top': `${tooltip.y}px`}" class="my-pane" :class="'my-pane-' + chartId"></div>
+  </div>
+</template>
+
+<script>
+import chartMixin from '@/components/chart/chartMixin'
+import chartFormat from '@/components/chart/chartFormat'
+import * as L from 'leaflet'
+import axios from 'axios'
+import icon from 'leaflet/dist/images/marker-icon.png'
+import iconShadow from 'leaflet/dist/images/marker-shadow.png'
+import 'leaflet/dist/leaflet.css'
+
+const regNum = /^[0-9]+.?[0-9]*/
+export default {
+  name: 'chartMap',
+  mixins: [chartMixin, chartFormat],
+  data () {
+    return {
+      map: null,
+      tooltip: {
+        x: 0,
+        y: 0
+      },
+      theme: localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`),
+      timer: null
+    }
+  },
+  mounted () {
+    this.chartInfo.loaded && this.initChart()
+  },
+  methods: {
+    initChart () {
+      this.initMap()
+    },
+    initMap () {
+      if (this.timer) {
+        clearTimeout(this.timer)
+        this.timer = null
+      }
+      this.timer = setTimeout(() => {
+        let loadPromise
+        this.loadMapConfig().then((mapConfig) => {
+          if (mapConfig && this.map) {
+            loadPromise = this.loadDataCenterMapData()
+          }
+        })
+        this.isInit = false
+        return loadPromise
+      }, 500)
+    },
+    loadMapConfig () {
+      return new Promise(resolve => {
+        const DefaultIcon = L.icon({
+          iconUrl: icon,
+          shadowUrl: iconShadow
+        })
+        L.Marker.prototype.options.icon = DefaultIcon
+        const param = { paramKey: 'map_center_config' }
+        this.$get('sysConfig', param).then(response => {
+          if (response.code == 200) {
+            const mapConfig = JSON.parse(response.data.paramKey.map_center_config)
+            if (this.map) {
+              this.map.remove()
+              this.map = null
+            }
+            const mapId = this.isFullscreen ? document.getElementById('map-screen-' + this.chartInfo.id) : document.getElementById('map' + this.chartInfo.id)
+            const map = L.map(mapId, {
+              minZoom: mapConfig.minZoom,
+              maxZoom: mapConfig.maxZoom,
+              attributionControl: false,
+              zoomControl: false,
+              maxBounds: L.latLngBounds(L.latLng(-90, -180), L.latLng(90, 180))
+            }).setView([mapConfig.latitude, mapConfig.longitude], mapConfig.zoom)
+            map.createPane('myPane', document.querySelector('.my-pane-' + this.chartId))
+            // map.on('tooltipopen', function (param) {
+            //   // setTimeout(() => {
+            //   //   vm.initTooltipChart(param)
+            //   // }, 100)
+            // })
+            // map.on('tooltipclose', function (param) {
+            // })
+            this.map = map
+
+            L.tileLayer(
+              '/static/Tiles/{z}/{x}/{y}.png',
+              { noWrap: true }
+            ).addTo(map)
+
+            const attribution = L.control.attribution({ position: 'bottomright', prefix: '' })
+            attribution.addAttribution(' © OpenStreetMap contributors')
+            attribution.addTo(map)
+
+            L.control.zoom({
+              position: 'bottomright',
+              zoomInText: '<i class="nz-icon nz-icon-enlarge"></i>',
+              zoomOutText: '<i class="nz-icon nz-icon-narrow"></i>',
+              zoomInTitle: '',
+              zoomOutTitle: ''
+            }).addTo(map)
+
+            resolve(mapConfig)
+          }
+        })
+      })
+    },
+    loadDataCenterMapData () {
+      return new Promise(resolve => {
+        const requests = [axios.get('dc?pageSize=-1'), axios.get('/stat/overview/map')]
+        axios.all(requests).then(result => {
+          const dcInfos = result[0].data.data.list
+          const dcStats = result[1].data.data.list.filter(dc => dc.asset)
+          dcStats.sort((a, b) => {
+            return a.asset.total - b.asset.total
+          })
+          dcStats.forEach(s => {
+            const dc = dcInfos.find(i => i.name === s.name)
+            dc && (s = { ...s, latitude: dc.latitude, longitude: dc.longitude })
+          })
+          const bigScatter = 10
+          const mediumScatter = 8
+          const smallScatter = 6
+          const maxAssetTotal = dcInfos[0] ? dcInfos[0].assetNum : '' // 获取asset数量最大值
+          const bigBoundary = Number.parseInt(maxAssetTotal / 3 * 2) // 根据最大值定下大图标、中图标的阈值
+          const mediumBoundary = Number.parseInt(maxAssetTotal / 3)
+          dcStats.forEach(dcStat => {
+            if (regNum.test(dcStat.latitude) && regNum.test(dcStat.longitude)) {
+              let symbolSize
+              if (dcStat.asset.total >= bigBoundary) {
+                symbolSize = bigScatter
+              } else if (dcStat.asset.total < bigBoundary && dcStat.asset.total >= mediumBoundary) {
+                symbolSize = mediumScatter
+              } else {
+                symbolSize = smallScatter
+              }
+              let shadowMarker
+              let marker
+              if (dcStat.color === 1) {
+                shadowMarker = L.circleMarker([dcStat.latitude, dcStat.longitude], { opacity: 0, fillOpacity: 0, radius: symbolSize + 10 })
+                marker = L.circleMarker([dcStat.latitude, dcStat.longitude], { interactive: false, color: '#23BF9A', opacity: 0.42, fillColor: '#23BF9A', fillOpacity: 0.5, radius: symbolSize, className: 'real-marker' })
+              } else if (dcStat.color === 2) {
+                shadowMarker = L.circleMarker([dcStat.latitude, dcStat.longitude], { opacity: 0, fillOpacity: 0, radius: symbolSize + 10 })
+                marker = L.circleMarker([dcStat.latitude, dcStat.longitude], { interactive: false, color: '#EC7F66', opacity: 0.42, fillColor: '#EC7F66', fillOpacity: 0.5, radius: symbolSize, className: 'real-marker error-item' })
+              } else if (dcStat.color === 3) {
+                shadowMarker = L.circleMarker([dcStat.latitude, dcStat.longitude], { opacity: 0, fillOpacity: 0, radius: symbolSize + 10 })
+                marker = L.circleMarker([dcStat.latitude, dcStat.longitude], { interactive: false, color: '#9e9c98', opacity: 0.42, fillColor: '#9e9c98', fillOpacity: 0.5, radius: symbolSize, className: 'real-marker' })
+              }
+              shadowMarker.bindTooltip(this.mapTooltipFormatter(dcStat), { sticky: false, pane: 'myPane', direction: 'left', data: dcStat })
+              shadowMarker.on('mouseover', (param) => {
+                const point = param.containerPoint
+                const event = param.originalEvent
+                const boxWidth = window.innerWidth / 2
+                this.tooltip.x = event.clientX + point.x - event.layerX - 5
+                this.tooltip.y = event.clientY + point.y - event.layerY
+                if (boxWidth > this.tooltip.x) {
+                  this.tooltip.x = this.tooltip.x + 175 + 10
+                }
+              })
+              shadowMarker.addTo(this.map)
+              marker.addTo(this.map)
+            }
+          })
+        })
+      })
+    },
+    mapTooltipFormatter (dcStat) {
+      const self = this
+      return `<div class="nz-tooltip-bac tooltip-map" style="z-index: 11111;width: 175px">
+          <div class="tooltip--title">${dcStat.name}</div>
+          <div class="tooltip--row">
+            <div class="legend-value legend-value-asset">
+             <div class="map-asset">
+                <div class="progress-title">${self.$t('panel.assetOk')}</div>
+                <div class="success-progress progress-box">
+                    <div class="top-progress" style="width: ${(dcStat.asset.ok / dcStat.asset.total) * 100}%"></div>
+                    <div style="width: 100%" class="bottom-progress"></div>
+                </div>
+                <div class="success-progress progress-content">${dcStat.asset.ok}</div>
+              </div>
+             <div class="map-asset">
+                <div class="progress-title">${self.$t('panel.assetAlarm')}</div>
+                <div class="error-progress progress-box">
+                    <div class="top-progress" style="width: ${(dcStat.asset.alarm / dcStat.asset.total) * 100}%"></div>
+                    <div style="width: 100%" class="bottom-progress"></div>
+                </div>
+                <div class="error-progress progress-content">${dcStat.asset.alarm}</div>
+              </div>
+            </div>
+            <div class="partition"></div>
+            <div class="legend-value legend-value-agent">
+            <div class="map-asset">
+                <div class="progress-title">${self.$t('overall.agent')} ${self.$t('config.agent.up')}</div>
+                <div class="success-progress progress-box">
+                    <div class="top-progress" style="width: ${(dcStat.agent.up / (dcStat.agent.up + dcStat.agent.down)) * 100}%"></div>
+                    <div style="width: 100%" class="bottom-progress"></div>
+                </div>
+                <div class="success-progress progress-content">${dcStat.agent.up}</div>
+             </div>
+             <div class="map-asset">
+                <div class="progress-title">${self.$t('overall.agent')} ${self.$t('asset.down')}</div>
+                <div class="error-progress progress-box">
+                    <div class="top-progress" style="width: ${(dcStat.agent.down / (dcStat.agent.up + dcStat.agent.down)) * 100}%"></div>
+                    <div style="width: 100%" class="bottom-progress"></div>
+                </div>
+                <div class="error-progress progress-content">${dcStat.agent.down}</div>
+             </div>
+            </div>
+          </div>
+        </div>`
+
+      // return tooltip;
+    },
+    resize () {
+      this.initMap()
+    }
+  },
+  beforeDestroy () {
+    if (this.timer) {
+      clearTimeout(this.timer)
+      this.timer = null
+    }
+    this.map && this.map.remove()
+    this.map = null
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

nezha-fronted/src/components/common/ChartDiagram/diagram.vue

@@ -1898,6 +1898,15 @@ export default {
       this.timer4 = null
     }
     if (getTopology(this.topologyIndex)) {
+      getTopology(this.topologyIndex).off('translate', this.topTranslate) // 平移·
+      getTopology(this.topologyIndex).off('active', this.pensActive) // 选中·
+      getTopology(this.topologyIndex).off('scale', this.topoScale) // 缩放·
+      getTopology(this.topologyIndex).off('translatePens', () => {}) // 移动画笔结束·
+      getTopology(this.topologyIndex).off('translatingPens', () => {}) // 移动画笔进行中·
+      getTopology(this.topologyIndex).off('enter', this.penEnter) // 移入画笔·
+      getTopology(this.topologyIndex).off('leave', this.penLeave) // 移出画笔·
+      getTopology(this.topologyIndex).off('add', this.appPen) // 添加新画笔·
+      getTopology(this.topologyIndex).off('click', this.topoClick) // click画笔·
       getTopology(this.topologyIndex).destroy()
       const StoreData = le5leStore.get()
       Object.keys(StoreData).forEach(key => {

nezha-fronted/src/components/common/project/topologyL5.vue

@@ -2356,6 +2356,15 @@ export default {
       this.timer4 = null
     }
     if (getTopology(this.topologyIndex)) {
+      getTopology(this.topologyIndex).off('translate', this.topTranslate) // 平移·
+      getTopology(this.topologyIndex).off('active', this.pensActive) // 选中·
+      getTopology(this.topologyIndex).off('scale', this.topoScale) // 缩放·
+      getTopology(this.topologyIndex).off('translatePens', () => {}) // 移动画笔结束·
+      getTopology(this.topologyIndex).off('translatingPens', () => {}) // 移动画笔进行中·
+      getTopology(this.topologyIndex).off('enter', this.penEnter) // 移入画笔·
+      getTopology(this.topologyIndex).off('leave', this.penLeave) // 移出画笔·
+      getTopology(this.topologyIndex).off('add', this.appPen) // 添加新画笔·
+      getTopology(this.topologyIndex).off('click', this.topoClick) // click画笔·
       getTopology(this.topologyIndex).destroy()
       const StoreData = le5leStore.get()
       const arr = []