Leaflet學習之路二——在地圖上繪製要素(點、線、多邊形)
阿新 • • 發佈:2019-02-18
- 添加註記
- 繪製點
- 繪製線
- 繪製多邊形
- 繪製彈出框
首先,我們有一個地圖
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png? access_token={accessToken}', { maxZoom: 18, id: 'mapbox.streets', accessToken: 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNp ejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', attribution: 'Map data © <a href="http://openstreet map.org">OpenStreetMap</a> contributors, ' + '<a href="http://creativecommons.org/licenses/by-sa/2.0 /">CC-BY-SA</a>, ' +'Imagery © <a href="http://mapbox.com"> Mapbox</a>' }).addTo(m);
1.添加註記
下面是批量添加註記的程式碼,要是你看了還不會新增單個註記請恕在下無能為力了
var markers=[[51.505,-0.09],[52,-1],[51,-0.05]]
for (i=0;i<markers.length;i++){
L.marker(markers[i]).addTo(m)
}
2.繪製點
在leafletAPI中沒有找到繪製點的函式,但是有繪製圓的,點不就是小一點的圓嗎
L.circle([51.3,-0.06],{color:'#FF0000',fillColor:'#FF0000',radius:1000,fillOpacity:1}).addTo(m)
- radius設定點的大小;
- 如果用用該方法繪製一個點,有兩個地方需要注意:
(1) fillColor和Color需要一致,否則看起來是一個環。或著設定weight屬性為0 。
(2) fillOpacity指填充色的透明度,必須設為1。我沒有研究color有沒有透明度,如果有,把兩個值設相同也行。
3.繪製線
var latlngs =[[51.505,-0.09],[52,-1],[51,-0.05]]
var polyline = L.polyline(latlngs, {color: 'red'}).addTo(m);
如果要批量繪線,請用三維陣列,其它的都一樣。
4.繪製多邊形
var latlngs = [[51.505,-0.09],[52,-1],[51,-0.05],[51.3,-0.06]] var polygon = L.polygon(latlngs, {color: '#000eff',fillColor:'#0000ed', weight:1}).addTo(m);
5.繪製彈出框
var popup = L.popup()
.setLatLng([51.505, -0.19])
.setContent('<p>Hello world!<br />This is a nice popup.</p>')
.openOn(m);
或著對繪製好的圖形繫結彈出框,在點選這個圖形後會彈出你想要你內容
polygon.bindPopup("我是個多邊形")