Leaflet中如何動態勾畫polygon

這篇文章主要介紹Leaflet中如何動態勾畫polygon，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

Leaflet是適用于桌面端和移動端交互地圖的開源JavaScript類庫。JS庫的大小經過壓縮后有38k左右，擁有開發者需要的全部地圖功能。 

Leaflet保持著簡單、性能和實用性的設計思想。可以在所有主要的桌面和移動端平臺上高效的運轉，可以擴展插件，它有一個漂亮、易用和文檔清晰的API，有一個簡單、易讀的源代碼。

下邊根據代碼，簡單列舉一下如何在地圖上動態標繪polygon:

模式是點擊按鈕開始畫polygon，左鍵每點擊一次，動態變化polygon，在地圖上雙擊，結束標繪。

$(document).ready(function () {
 //在按鈕中設置啟動標繪
            $("#_createBtn").click(function (e) {
 //添加地圖上的左鍵、鼠標雙擊事件
                map.on('click', MapLeftClick);
                map.on("dblclick", MapDoubleClick);
  //定義地圖的polygon對象，初始化傳入空數組，設置顏色等屬性
                _polygon = L.polygon(_pointArr, {
                    color: 'red',
                    fillColor: '#f03',
                    fillOpacity: 0.5
                });
//將polygon添加到地圖上
                _polygon.addTo(map);
            });
        });
        var _polygon = null;
        var _pointArr = new Array();
 //雙擊結束地圖標繪
        function MapDoubleClick(e)
        {
//關掉地圖的鼠標點擊事件
            map.off('click', MapLeftClick);
            map.off("dblclick", MapDoubleClick);
            alert("doubleClick");
        }
//啟動地圖左鍵事件
        function MapLeftClick(e) {
//每點擊一下在地圖上畫一個小紅點
            L.circleMarker(e.latlng, {
                radius: 2,
                color: 'red'
            }).addTo(map);
//polygon上動態添加點
            _polygon.addLatLng(e.latlng);
        }

以上是“Leaflet中如何動態勾畫polygon”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！