Leaflet中如何動(dòng)態(tài)勾畫polygon

這篇文章主要介紹Leaflet中如何動(dòng)態(tài)勾畫polygon，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

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

Leaflet保持著簡(jiǎn)單、性能和實(shí)用性的設(shè)計(jì)思想?？梢栽谒兄饕淖烂婧鸵苿?dòng)端平臺(tái)上高效的運(yùn)轉(zhuǎn)，可以擴(kuò)展插件，它有一個(gè)漂亮、易用和文檔清晰的API，有一個(gè)簡(jiǎn)單、易讀的源代碼。

下邊根據(jù)代碼，簡(jiǎn)單列舉一下如何在地圖上動(dòng)態(tài)標(biāo)繪polygon:

模式是點(diǎn)擊按鈕開始畫polygon，左鍵每點(diǎn)擊一次，動(dòng)態(tài)變化polygon，在地圖上雙擊，結(jié)束標(biāo)繪。

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

以上是“Leaflet中如何動(dòng)態(tài)勾畫polygon”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！