vue使用高德地图并且绘制多边形
vue使用高德地图并且绘制多边形一些小收获
·
使用鼠标工具在高德地图上绘制多边形时需要使用到一个插件,如果直接new出该工具会提示该工具不是一个函数之类的错误,在使用之前需要先告诉vue,你所是使用的是一个插件
AMap.plugin(["AMap.MouseTool"],function () {
mouseTool = new AMap.MouseTool(map);
});
并且在对鼠标进行监听时,因为使用的是vue3,如果直接在setup里面使用,该函数会比地图初始化先执行,那么就会提示出mouseTool里没有on的事件,需要把这个监听放到一个函数里,在地图初始化完成后,点击按钮,再进行监听,这里是包装成了一个函数,然后再在另一个函数中执行该函数,代码中的mouseTool.polygon就是画多边形的相关配置(详细的可以查看高德地图官方文档)
const start=()=>{
draw()
}
let overlays = [];
function draw(){
mouseTool.polygon({
fillColor:'#00b0ff',
strokeColor:'#80d8ff'
//同Polygon的Option设置
});
mouseTool.on('draw',function(e:any){
(overlays as any).push(e.obj)
}) ;
}
在成功把多边形绘制完成后,有时候需要获取到所绘制的多边形的经纬度数据,这时可以是使用
e.obj.getPath()来对经纬度进行获取
mouseTool.on('draw',function(e:any){
console.log(e.obj.getPath());//获取经纬度数据
(overlays as any).push(e.obj)//绘制多边形
//其他所要执行的操作
}) ;
想要停止画图可调用close函数
const end=()=>{
mouseTool.close(true)//会将原本画的多边形去除
overlays=[]
}
执行这个函数之后点击地图将不允许绘制多边形,并且原本所画的覆盖物也会被清除,如果想要在点击停止后,覆盖物还停留,可以使用另一个数组保存所画覆盖物的经纬度数据,使用高德地图的生成覆盖物的api,对所绘制的多边形进行回显
for (var i = 0, l =pois.length; i < l; i++) {
//生成行政区划polygon
var polygon = new AMap.Polygon({
map: map,
path:pois[i],
strokeWeight: 2,
fillOpacity: 0.8,
fillColor:'#c7d2e7',
strokeColor:'#80d8ff'
});
(endpy as any).push(polygon);
(map as any).add(polygon)
}
//pois为所保存的经纬度数据数组
更多推荐
已为社区贡献1条内容
所有评论(0)