leaflet地圖應(yīng)用-動(dòng)態(tài)標(biāo)繪polygon-創(chuàng)新互聯(lián)
leafletjs是一款優(yōu)秀的開(kāi)源二維地圖，并提供了豐富的開(kāi)發(fā)Api，下面列舉一個(gè)在地圖上動(dòng)態(tài)標(biāo)繪polygon的代碼，實(shí)現(xiàn)起來(lái)的比較方便、簡(jiǎn)單。
具體實(shí)現(xiàn)代碼:
//定義地圖對(duì)象
map = L.map('_MainMap', {
maxZoom: 16
});
//加載OSM的開(kāi)源在線地圖
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
//點(diǎn)擊按鈕開(kāi)始進(jìn)行標(biāo)繪：
$(document).ready(function () {
$("#_createBtn").click(function (e) {
//注冊(cè)地圖的左鍵點(diǎn)擊事件和雙擊事件
map.on('click', MapLeftClick);
map.on("dblclick", MapDoubleClick);
//創(chuàng)建一個(gè)空的polygon，設(shè)置簡(jiǎn)單屬性
_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)繪polygon
function MapDoubleClick(e)
{
map.off('click', MapLeftClick);
map.off("dblclick", MapDoubleClick);
}
//左鍵點(diǎn)擊事件修改polygon的點(diǎn)
function MapLeftClick(e) {
//在地圖上標(biāo)注每個(gè)點(diǎn)的位置
L.circleMarker(e.latlng, {
radius: 2,
color: 'red'
}).addTo(map);
//給polygon上增加點(diǎn)
_polygon.addLatLng(e.latlng);
}
代碼比較簡(jiǎn)單，當(dāng)然在標(biāo)繪時(shí)也可以自定義各個(gè)實(shí)現(xiàn)的屬性。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
網(wǎng)頁(yè)標(biāo)題：leaflet地圖應(yīng)用-動(dòng)態(tài)標(biāo)繪polygon-創(chuàng)新互聯(lián)
當(dāng)前網(wǎng)址：http://m.jiaotiyi.com/article/gcpch.html