最终效果图
<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>