高德地图多边形覆盖物添加、获取、删除

最近在做有关地图的项目 汇总一下 方便以后使用

上图是覆盖物绘制完成之后的编辑状态 

引入高德地图js 

<script src="https://webapi.amap.com/maps?v=1.4.10&key=yourkey&plugin=AMap.Autocomplete&plugin=AMap.PolyEditor"></script>

 P.s. plugin后跟的是地图插件

 

1、覆盖物绘制

map.plugin(["AMap.MouseTool"], function() {
        var mouseTool = new AMap.MouseTool(map);
        
       drawTool.polygon({
            strokeColor: "#35fffd", 
            strokeOpacity: 1,
            strokeWeight: 1,
            fillColor: '#35fffd',
            fillOpacity: 0.15,
            // 线样式还支持 'dashed'
            strokeStyle: "solid",
            // strokeStyle是dashed时有效
            // strokeDasharray: [30,10],
          }) 
    })

　覆盖物参考手册

2、覆盖物编辑

polyEditor.open(); //覆盖物编辑
polyEditor.close(); //覆盖物完成编辑 close里面有可以传一个布尔值 默认false 为true则完成编辑并清空覆盖物

 

3、获取覆盖物

map.getAllOverlays('polygon'); //获取覆盖物 为空 获取所有覆盖物 原型 坐标点 多边形等 polygon 获取多边形覆盖物

4、删除覆盖物

map.remove(Overlays)；//可删除某一个
map.clear(); //清空覆盖物

5、已有经纬度坐标点绘制覆盖物

var arrow = [
         [116.39713, 39.908895],
         [116.39713, 39.908553],
         [116.39793, 39.908582],
         [116.397908, 39.908907]
       ];
polygon = new AMap.Polygon({
        　map: this.map,
        　strokeColor: "#d4625f", 
        　strokeOpacity: 1,
        　strokeWeight: 1,
        　fillColor: '#d4625f',
        　fillOpacity: 0.15,
        　strokeStyle: "solid",
        　path: arr, 
       });