Vue 在高德地图中实现 圆和多边形的绘制

最终效果图

                          

<template>
	<div>
		<div id="container" style="height: 80vh; width: 100%"></div>
		<a-button type="primary" @click="drawer('circle')">圆形</a-button>
        <a-button type="primary" @click="drawer('polygon')">面</a-button>
	</div>
</template>

<script setup>
import AMapLoader from "@amap/amap-jsapi-loader"
import mapConfig from '@/config/map.js'
import { onMounted, ref, nextTick } from 'vue'

let map = null;
onMounted(() => {
	AMapLoader.load({
        key: mapConfig.amap.key, // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    }).then((AMap) => {

        map = new AMap.Map("container", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 16, // 初始化地图级别
            // center: [lnglat.lng, lnglat.lat], // 初始化地图中心点位置
        });
        AMap.plugin([ 'AMap.MouseTool','AMap.Polygon'], function () {


        })

   
        mouseTool = new AMap.MouseTool(map)
        

    }).catch((e) => {
        console.log(e);
    });
})


const drawer = (row) => {
    switch (row) {
        case 'circle':
            drawerCircle()//画圆
            break
        case 'polygon':
            drawerPolygon()//画多边形
            break
    }
}

const drawerCircle = () => {
    mouseTool.circle();
    mouseTool.on('draw', function (event) {
        console.log(event.obj.getRadius());//获取半径
        console.log(event.obj.getCenter());//获取中心点
    })
}

const drawerPolygon = () =>{
    mouseTool.polygon({
		strokeColor: "#FF33FF",
		strokeOpacity: 1,
		strokeWeight: 2,
		strokeOpacity: 0.2,
		fillColor: '#1791fc',
		fillOpacity: 0.4,
		// 线样式还支持 'dashed'
		strokeStyle: "solid",
		// strokeStyle是dashed时有效
		// strokeDasharray: [30,10],
	})

	mouseTool.on('draw', function (event) {
		console.log(event.obj.getPath()) // 多边形详细信息
	})
}
</script>