高德地圖多邊形覆蓋物添加、獲取、刪除

最近在做有關地圖的項目 匯總一下 方便以后使用

上圖是覆蓋物繪制完成之后的編輯狀態 

引入高德地圖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, 
       });