map

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')

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>