map

2024-02-19 15:28:43 +08:00
parent 0e2a24cc1f
commit aea8f7c8ca
6 changed files with 153 additions and 4 deletions
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>电能质量数据监测云平台</title>
+    <script type="text/javascript" src="/js/amap.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
  "dependencies": {
    "@element-plus/icons-vue": "^2.3.1",
    "@fortawesome/fontawesome-free": "^6.5.1",
+    "@vuemap/vue-amap": "^2.1.1",
    "@vueuse/core": "^10.7.0",
    "@wangeditor/editor": "^5.1.23",
    "@wangeditor/editor-for-vue": "^5.1.12",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,6 +7,9 @@ dependencies:
  '@fortawesome/fontawesome-free':
    specifier: ^6.5.1
    version: 6.5.1
+  '@vuemap/vue-amap':
+    specifier: ^2.1.1
+    version: 2.1.1(vue@3.3.13)
  '@vueuse/core':
    specifier: ^10.7.0
    version: 10.7.0(vue@3.3.13)
@@ -649,6 +652,18 @@ packages:
      '@jridgewell/sourcemap-codec': 1.4.15
    dev: true

+  /@math.gl/core@3.6.3:
+    resolution: {integrity: sha512-jBABmDkj5uuuE0dTDmwwss7Cup5ZwQ6Qb7h1pgvtkEutTrhkcv8SuItQNXmF45494yIHeoGue08NlyeY6wxq2A==}
+    dependencies:
+      '@babel/runtime': 7.23.8
+      '@math.gl/types': 3.6.3
+      gl-matrix: 3.4.3
+    dev: false
+
+  /@math.gl/types@3.6.3:
+    resolution: {integrity: sha512-3uWLVXHY3jQxsXCr/UCNPSc2BG0hNUljhmOBt9l+lNFDp7zHgm0cK2Tw4kj2XfkJy4TgwZTBGwRDQgWEbLbdTA==}
+    dev: false
+
  /@microsoft/api-extractor-model@7.28.3(@types/node@20.10.5):
    resolution: {integrity: sha512-wT/kB2oDbdZXITyDh2SQLzaWwTOFbV326fP0pUwNW00WeliARs0qjmXBWmGWardEzp2U3/axkO3Lboqun6vrig==}
    dependencies:
@@ -844,6 +859,24 @@ packages:
    resolution: {integrity: sha512-VeJbUb0wEKbcwaSlj5n+LscBl9IPgLPkHVGBkh00cztv6X4L/TJXK58LzFuBKX7/GAfiGhIwH67YTLTlzvIzBA==}
    dev: false

+  /@turf/helpers@6.5.0:
+    resolution: {integrity: sha512-VbI1dV5bLFzohYYdgqwikdMVpe7pJ9X3E+dlr425wa2/sMJqYDhTO++ec38/pcPvPE6oD9WEEeU3Xu3gza+VPw==}
+    dev: false
+
+  /@turf/intersect@6.5.0:
+    resolution: {integrity: sha512-2legGJeKrfFkzntcd4GouPugoqPUjexPZnOvfez+3SfIMrHvulw8qV8u7pfVyn2Yqs53yoVCEjS5sEpvQ5YRQg==}
+    dependencies:
+      '@turf/helpers': 6.5.0
+      '@turf/invariant': 6.5.0
+      polygon-clipping: 0.15.7
+    dev: false
+
+  /@turf/invariant@6.5.0:
+    resolution: {integrity: sha512-Wv8PRNCtPD31UVbdJE/KVAWKe7l6US+lJItRR/HOEW3eh+U/JwRCSUl/KZ7bmjM/C+zLNoreM2TU6OoLACs4eg==}
+    dependencies:
+      '@turf/helpers': 6.5.0
+    dev: false
+
  /@types/argparse@1.0.38:
    resolution: {integrity: sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA==}
    dev: false
@@ -1080,6 +1113,50 @@ packages:
  /@vue/shared@3.3.13:
    resolution: {integrity: sha512-/zYUwiHD8j7gKx2argXEMCUXVST6q/21DFU0sTfNX0URJroCe3b1UF6vLJ3lQDfLNIiiRl2ONp7Nh5UVWS6QnA==, tarball: https://registry.npmmirror.com/@vue/shared/-/shared-3.3.13.tgz}

+  /@vuemap/amap-jsapi-loader@1.0.4:
+    resolution: {integrity: sha512-s5fFHrsNkjYMovEmUJ5S23jpDtElTanDN2HdCt/amOD245a8wWVcTPjl06YEHXtxf6Ewm+z29wQByOCn209Hxg==}
+    dev: false
+
+  /@vuemap/amap-jsapi-types@0.0.16:
+    resolution: {integrity: sha512-1B1H2IS8sT2RDubbpEY+K8j11Gb7PZY5Bo0cszRkF8Nw+9HNqpbUNeqkQ6+rxLkwIedcSkOsFDy/IyzXCUXqVw==}
+    dev: false
+
+  /@vuemap/amap-jsapi-types@0.0.17:
+    resolution: {integrity: sha512-FHI8OMWxJWbgyuQ0tKclvurQIVHRexMIYAOwZ/z9+G7aHHK5EFhKM13siLczNNAgXdJ2dctPEghCdlhcByl3Ag==}
+    dev: false
+
+  /@vuemap/amap-xyz-layer@0.0.10:
+    resolution: {integrity: sha512-NHAGN57EFn2Xpktwx6+fqlVHmu8MvG4gl9fQJT2LepAJSmgFG+o+YtOoJFXwdT8BOg8W5evJNE+CZC0833zZpA==}
+    engines: {node: '>= 16'}
+    dependencies:
+      '@math.gl/core': 3.6.3
+      earcut: 2.2.4
+      gl-matrix: 3.4.3
+    dev: false
+
+  /@vuemap/district-cluster@0.0.11:
+    resolution: {integrity: sha512-SY01gFe8uhP5FKjzyTe0x2yL2K5VmwD5UKlEUU4e09UUZphXCj2Ci7iunX0L29nWINkBjdfxu8dXzhIcx9T3ug==}
+    engines: {node: '>= 16'}
+    dependencies:
+      '@turf/helpers': 6.5.0
+      '@turf/intersect': 6.5.0
+      '@vuemap/amap-jsapi-types': 0.0.16
+      topojson-client: 3.1.0
+    dev: false
+
+  /@vuemap/vue-amap@2.1.1(vue@3.3.13):
+    resolution: {integrity: sha512-340nZxN7jgl9ff1phBnVPoPumzZPA03S6bf3KPhn1ybschw7gm2RNX+h0kFC+sOmFxyjRJULh2g1a2tdiQtHsA==}
+    peerDependencies:
+      vue: '3'
+    dependencies:
+      '@vuemap/amap-jsapi-loader': 1.0.4
+      '@vuemap/amap-jsapi-types': 0.0.17
+      '@vuemap/amap-xyz-layer': 0.0.10
+      '@vuemap/district-cluster': 0.0.11
+      lodash-es: 4.17.21
+      vue: 3.3.13(typescript@5.3.3)
+    dev: false
+
  /@vueuse/core@10.7.0(vue@3.3.13):
    resolution: {integrity: sha512-4EUDESCHtwu44ZWK3Gc/hZUVhVo/ysvdtwocB5vcauSV4B7NiGY5972WnsojB3vRNdxvAt7kzJWE2h9h7C9d5w==, tarball: https://registry.npmmirror.com/@vueuse/core/-/core-10.7.0.tgz}
    dependencies:
@@ -1451,6 +1528,10 @@ packages:
      delayed-stream: 1.0.0
    dev: false

+  /commander@2.20.3:
+    resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
+    dev: false
+
  /commander@9.5.0:
    resolution: {integrity: sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==}
    engines: {node: ^12.20.0 || >=14}
@@ -1522,6 +1603,10 @@ packages:
      ssr-window: 3.0.0
    dev: false

+  /earcut@2.2.4:
+    resolution: {integrity: sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==}
+    dev: false
+
  /echarts@4.9.0:
    resolution: {integrity: sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==}
    dependencies:
@@ -1707,6 +1792,10 @@ packages:
    engines: {node: '>=6.9.0'}
    dev: true

+  /gl-matrix@3.4.3:
+    resolution: {integrity: sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA==}
+    dev: false
+
  /glob-parent@5.1.2:
    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==, tarball: https://registry.npmmirror.com/glob-parent/-/glob-parent-5.1.2.tgz}
    engines: {node: '>= 6'}
@@ -2027,6 +2116,13 @@ packages:
      vue-demi: 0.14.6(vue@3.3.13)
    dev: false

+  /polygon-clipping@0.15.7:
+    resolution: {integrity: sha512-nhfdr83ECBg6xtqOAJab1tbksbBAOMUltN60bU+llHVOL0e5Onm1WpAXXWXVB39L8AJFssoIhEVuy/S90MmotA==}
+    dependencies:
+      robust-predicates: 3.0.2
+      splaytree: 3.1.2
+    dev: false
+
  /postcss@8.4.32:
    resolution: {integrity: sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==, tarball: https://registry.npmmirror.com/postcss/-/postcss-8.4.32.tgz}
    engines: {node: ^10 || ^12 || >=14}
@@ -2079,6 +2175,10 @@ packages:
      supports-preserve-symlinks-flag: 1.0.0
    dev: false

+  /robust-predicates@3.0.2:
+    resolution: {integrity: sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==}
+    dev: false
+
  /rollup@4.9.1:
    resolution: {integrity: sha512-pgPO9DWzLoW/vIhlSoDByCzcpX92bKEorbgXuZrqxByte3JFk2xSW2JEeAcyLc9Ru9pqcNNW+Ob7ntsk2oT/Xw==, tarball: https://registry.npmmirror.com/rollup/-/rollup-4.9.1.tgz}
    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
@@ -2162,6 +2262,10 @@ packages:
    engines: {node: '>=0.10.0'}
    dev: false

+  /splaytree@3.1.2:
+    resolution: {integrity: sha512-4OM2BJgC5UzrhVnnJA4BkHKGtjXNzzUfpQjCO8I05xYPsfS/VuQDwjCGGMi8rYQilHEV4j8NBqTFbls/PZEE7A==}
+    dev: false
+
  /sprintf-js@1.0.3:
    resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
    dev: false
@@ -2216,6 +2320,13 @@ packages:
    dependencies:
      is-number: 7.0.0

+  /topojson-client@3.1.0:
+    resolution: {integrity: sha512-605uxS6bcYxGXw9qi62XyrV6Q3xwbndjachmNxu8HWTtVPxZfEJN9fd/SZS1Q54Sn2y0TMyMxFj/cJINqGHrKw==}
+    hasBin: true
+    dependencies:
+      commander: 2.20.3
+    dev: false
+
  /tslib@2.3.0:
    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==, tarball: https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz}
    dev: false
--- a/public/js/amap.min.js
+++ b/public/js/amap.min.js
--- a/src/main.ts
+++ b/src/main.ts
@@ -14,17 +14,22 @@ import '@fortawesome/fontawesome-free/css/all.css'
 import '@/styles/index.scss'
 import '@/assets/font/iconfont.css'
 import { ElDialog } from 'element-plus'
-
+// 引入vue-amap
+import VueAMap, { initAMapApiLoader } from '@vuemap/vue-amap'
+import '@vuemap/vue-amap/dist/style.css'
 window.XEUtils = XEUtils

-
 const app = createApp(App)

+initAMapApiLoader({
+    offline: true
+})
 app.use(router)
 app.use(pinia)
-app.use(ElementPlus);
-(app._context.components.ElDialog as typeof ElDialog).props.closeOnClickModal.default = false
+app.use(VueAMap)
+app.use(ElementPlus)
 app.use(VXETable)
+;(app._context.components.ElDialog as typeof ElDialog).props.closeOnClickModal.default = false
 registerIcons(app) // icons

 app.mount('#app')
--- a/src/views/pms/voltage-sags/overview.vue
+++ b/src/views/pms/voltage-sags/overview.vue
@@ -0,0 +1,28 @@
+<template>
+  <div style="height: 500px;">
+    <el-amap
+        view-mode="3D"
+        :pitch="50"
+        :center="center"
+        :zoom="zoom"
+    >
+      <el-amap-layer-tile :tile-url="url"/>
+   
+    </el-amap>
+  </div>
+</template>
+
+<script setup>
+  import {ElAmap, ElAmapLayerTile} from '@vuemap/vue-amap'
+  import {ref} from "vue";
+
+  const center = ref([120, 31]);
+  const zoom = ref(14)
+
+  const url = 'https://wprd0{1,2,3,4}.is.autonavi.com/appmaptile?x=[x]&y=[y]&z=[z]&size=1&scl=1&style=8&ltype=11'
+
+
+</script>
+
+<style scoped>
+</style>