使用鼠标工具在高德地图上绘制多边形时需要使用到一个插件,如果直接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为所保存的经纬度数据数组

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐