下邊介紹Vector Layer
Path（Layer）
Path是其他Vector Layer的父類，比如Polyline、Polygon、Rectangle、Circle、CircleMarker...，雖然我們不直接用Path類，但是它的屬性和方法我們需要了解。
1、參數
stroke //是否畫邊界，默認True，在畫Circle和Polygon時很有用 color //Stroke的color weight //Stroke的線寬 opacity //Stroke透明度 dashArray //畫圖過程中虛線的樣式 fill //是否填充內部，常用於Circle、Polygon fillColor //顏色 fillOpacity//透明度 bubblingMouseEvents //默認true，當為true時，發生在該Path上的鼠標事件也將觸發在Map上的相同事件
2、方法
setStyle(<Path options>style) //重設一些參數來讓該Path表現為一些新樣式 bringToFront() //把該Path Layer放在所有Path Layer之上 bringToBack() //把該Path Layer放在所有Path Layer之下
Polyline(Path)(Layer)
地圖上的折線
1、用例
①從一組LatLng中創建一個折線
//從一組LatLng(所有LatLng對象都可以用數組[x,y]代替)中得到一條折線對象 var latlngs=[ [45,-122], [37,-122], [34,-118] ]; var polyline = L.polyline(latlngs,{color:'red'}).addTo(map); //縮放地圖視角到該Polyline上 map.fitBounds(polyline.getBounds());
②從一組多維數組創建多條折線，一個多維數組代表一條折線，這多條折線實際上是一個polyline對象
var latlngs = [ [[45.51, -122.68], [37.77, -122.43], [34.04, -118.2]], [[40.78, -73.91], [41.83, -87.62], [32.76, -96.72]] ]; var polyline=L.polyline(latlngs,{color:'red'}).addTo(leafletMap); leafletMap.fitBounds(polyline.getBounds())；
這個Array包含兩個多維數組，繪制出來就是兩條折線，每個多維數組對應一條折線。與用例①不同的是這兩條折線的總體表示polyline。
2、實例化
L.polyline(<LatLng[]>latlngs,<Polyline options>options?)
3、參數
smoothFactor //光滑程度 默認1 noClip //禁用polyline clipping，默認false；暫未知功能如何
4、方法
getLatLngs() //返回LatLng[]，一組點的數組，如果是多條折線則返回一個嵌套數組 setLatLngs(<LatLng[]>latlngs) //用給定的點替代原來的點繪制新線 closestLayerPoint(<Point>p) //返回Polyline中離點p最近的點 getCenter() //返回Polyline的中心坐標 getBounds()//返回該Polyline所在的Bound，配合Map的fitBounds方法可以定位到該Polyline addLatLng(<LatLng>latlng,<LatLng[]>latlng?)//向Polyline中加入一個點
Polygon(Polyline)
多邊形
通過一系列Points創建多邊形，並不需要額外寫一個和開始點相同的最終點。
1、用例
①創建一個紅色的多邊形
var latlngs = [[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]]; var polygon = L.polygon(latlngs , {color:'red'}).addTo(map); map.fitBounds(polygon.getBounds())
②環形——兩個Polygon之間的環形區域
需要兩個Point數組，第一個表示外Polygon，第二個表示內Polygon
寫法是：
var latlngs= [ [外Polygon 的Points Array], [內Polygon 的Points Array] ];
var latlngs = [ [[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]], // outer ring [[37.29, -108.58],[40.71, -108.58],[40.71, -102.50],[37.29, -102.50]] // hole ];
③多多邊形——MultiPolygon
和多折線一樣，如果用多維數組表示，那么顯示出來的是多個多邊形，但是這多個多邊形的整體是一個Polygon
寫法：
var latlngs =[ [第一個多邊形]， [第二個多邊形] ];
var latlngs = [ [ // first polygon [[37, -109.05], [41, -109.03], [41, -102.05], [37, -102.04]], // outer ring [[37.29, -108.58], [40.71, -108.58], [40.71, -102.50], [37.29, -102.50]] // hole ], [ // second polygon [[41, -111.03], [45, -111.04], [45, -104.05], [41, -104.05]] ] ];
2、初始化
L.polygon(<LatLng[]>latlngs, <Polyline options>options?)
3、參數
沒有特有參數，參數繼承自Polyline、Path、Layer
4、方法
沒有特有方法，繼承自Polyline、Path、Layer
Rectangle(Polygon)
1、用例
//定義一個Bounds 左上角和右下角的坐標 var bounds=[[54.559322, -5.767822], [56.1210604, -3.021240]] //創建Rectangle L.rectangle(bounds,{color:'#ff7800',weight:1}).addTo(map); //將Map縮放到該Rectangle處 map.fitBounds(bounds);
2、初始化
L.rectangle(<LatLngBounds> latlngBounds, options?)
3、參數
同Polygon
4、方法
setBounds(<LatLngBounds>latlngBounds) //在設置的Bounds處重畫該Rectangle
其他方法繼承自Polygon
Circle（CircleMarker）
1、用例
L.circle([50.5,30.5],{radius:200}).addTo(map)
2、初始化
L.circle(<LatLng>latlng ,<Circle options>options) //可選參數options中必須要有參數radius，即半徑
3、參數
radius //圓半徑，單位m
其他參數繼承自Path
4、方法
setRadius(n) //重設半徑 getRadius() //返回半徑 getBounds() //返回LatLngBounds
setRadius、setStyle、setLatLng對於Circle的修改結果會立刻顯示在Map上而不需要redraw()。
其他方法繼承自CircleMarker、Path、Layer
CircleMarker(Path)
一個始終與整個Map保持相對尺寸（以pixel為空單位）的Circle，區別於Circle就是Circle是絕對尺寸（以m為單位），當你放大地圖時Circle會變小，因為它與地圖的相對尺寸變小了；而CircleMarker不論你怎么縮放地圖，它在地圖都始終是那么大：
下圖分別是同一個CircleMarker，但是地圖的縮放等級是不同的。
1、初始化
L.circleMarker(<LatLng>latlng ,<CircleMarker options>options?)
2、參數
radius //半徑，單位像素
3、方法
setLatLng(<LatLng>latlng) //布置該CircleMarker到新位置上 getLatLng() setRadius(n) getRadius()
還有繼承自Path、Layer的方法