From c66e6e9c1e3675416987b89453aaf50ffc0db558 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B4=BE=E8=82=83?= <15833576927@163.com>
Date: Sat, 11 May 2024 18:03:04 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=9C=B0=E5=9B=BE=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main.js                   | 15 ++++++++--
 src/views/system/base/map.vue | 56 +++++++++++++++++++++++++++++++++++
 2 files changed, 69 insertions(+), 2 deletions(-)
 create mode 100644 src/views/system/base/map.vue

diff --git a/src/main.js b/src/main.js
index a7645fb..187e35d 100644
--- a/src/main.js
+++ b/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)
diff --git a/src/views/system/base/map.vue b/src/views/system/base/map.vue
new file mode 100644
index 0000000..a914b54
--- /dev/null
+++ b/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>
\ No newline at end of file