Leaflet學習之路二——在地圖上繪制要素（點、線、多邊形）

• 添加注記
• 繪制點
• 繪制線
• 繪制多邊形
• 繪制彈出框
  首先，我們有一個地圖

 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 &copy; <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("我是個多邊形")

效果如下 ：

如何動態繪制這些圖形，請看Leaflet學習之路五——動態繪制圖形(點、線、圓、多邊形)