增加地图配置

src/main.js

@@ -43,9 +43,19 @@ import ImagePreview from "@/components/ImagePreview"
 import TreeSelect from '@/components/TreeSelect'
 // 字典标签组件
 import DictTag from '@/components/DictTag'
-
+// 高德地图组件
+import VueAMap, {initAMapApiLoader} from '@vuemap/vue-amap';
+// import VueAMapLoca from '@vuemap/vue-amap-loca';
+// import VueAMapExtra from '@vuemap/vue-amap-extra';
+import '@vuemap/vue-amap/dist/style.css'
 const app = createApp(App)
-
+initAMapApiLoader({
+  key: '62c3411d6528d67db00ad510a7ee5fb9',
+  securityJsCode: 'afa6d301f4e01c2e290db0eb8ec36468', // 新版key需要配合安全密钥使用
+  //Loca:{
+  //  version: '2.0.0'
+  //} // 如果需要使用loca组件库，需要加载Loca
+})
 // 全局方法挂载
 app.config.globalProperties.useDict = useDict
 app.config.globalProperties.download = download
@@ -66,6 +76,7 @@ app.component('ImagePreview', ImagePreview)
 app.component('RightToolbar', RightToolbar)
 app.component('Editor', Editor)
 
+app.use(VueAMap)
 app.use(router)
 app.use(store)
 app.use(plugins)

src/views/system/base/map.vue

@@ -0,0 +1,56 @@
+<script setup>
+const maxHeight = ref(window.innerHeight - 100);
+const zoom = ref(12);
+const center = ref(null);
+const created = ref(false)
+const amapMouseType = ref('polyline')
+const polygonList = ref([])
+const draw = (value) => {
+	polygonList.value.push(value)
+	console.log(value);
+}
+</script>
+
+<template>
+<div class="app-container" :style="{height:maxHeight+'px'}">
+	<el-amap
+			:center="center"
+			:zoom="zoom"
+	>
+		<div class="top-block">
+			<el-button class="operate" @click="created = !created">添加地块</el-button>
+		</div>
+		<!--卫星云图-->
+		<el-amap-layer-satellite :visible="true" />
+		<!--定位控件-->
+		<el-amap-control-geolocation :visible="true"/>
+		<!--鼠标工具-->
+		<el-amap-mouse-tool
+				v-if="created"
+				:type="amapMouseType"
+				:auto-clear="true"
+				@draw="draw"
+		/>
+		<!--多边形-->
+		<el-amap-polygon
+				v-for="(polygon, index) in polygonList"
+				:path="polygon"
+				:visible="true"
+				:editable="true"
+		/>
+	</el-amap>
+</div>
+</template>
+
+<style scoped lang="scss">
+.top-block{
+	position: absolute;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	pointer-events:none;//值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。
+	.operate{
+		pointer-events: all;
+	}
+}
+</style>