leaflet Api中文文件
阿新 • • 發佈:2018-11-09
L.Map
API各種類中的核心部分,用來在頁面中建立地圖並操縱地圖.
使用 example
-
// initialize the map on the "map" div with a given center and zoom
-
var map = L.map('map', {
-
center: [51.505, -0.09],
-
zoom: 13
-
});
構造器
構造器 | 使用 | 描述 |
---|---|---|
L.Map( <HTMLElement|String> id, < |
new L.Map(…) L.map(…) |
通過div元素和帶有地圖選項的描述的文字物件來例項化一個地圖物件,其中文字物件是可選的。 |
Options
選項 | 型別 | 預設值 | 描述 |
---|---|---|---|
center |
LatLng |
null |
初始化地圖的地理中心. |
zoom |
Number |
null |
初始化地圖的縮放. |
layers |
ILayer[] |
null |
初始化後加載到地圖上的圖層. |
minZoom |
Number |
null |
地圖的最小檢視。可以重寫地圖圖層的minZoom. |
maxZoom |
Number |
null |
地圖的最大檢視。可以重寫地圖圖層的maxZoom . |
maxBounds |
LatLngBounds |
null |
當這個選項被設定後,地圖被限制在給定的地理邊界內,當用戶平移將地圖拖動到檢視以外的範圍時會出現彈回的效果, 並且也不允許縮小檢視到給定範圍以外的區域(這取決於地圖的尺寸)。 使用 |
crs |
CRS |
L.CRS. |
使用的座標系,當你不確定座標系是什麼時請不要更改. |
選項 | 型別 | 預設值 | 描述 |
---|---|---|---|
dragging |
Boolean |
true |
決定地圖是否可被滑鼠或觸控拖動. |
touchZoom |
Boolean |
true |
決定地圖是否可被兩隻手指觸控拖拽縮放. |
scrollWheelZoom |
Boolean |
true |
決定地圖是否被被滑鼠滾輪滾動縮放. |
doubleClickZoom |
Boolean |
true |
決定地圖是否可被雙擊縮放. |
boxZoom |
Boolean |
true |
決定地圖是否可被縮放到滑鼠拖拽出的矩形的檢視,滑鼠拖拽時需要同時按住shift鍵. |
tap |
Boolean |
true |
Enables mobile hacks for supporting instant taps (fixing 200ms click delay on iOS/Android) and touch holds (fired as contextmenu events). |
tapTolerance |
Number |
15 |
The max number of pixels a user can shift his finger during touch for it to be considered a valid tap. |
trackResize |
Boolean |
true |
確定地圖在視窗尺寸改變時是否可以自動處理瀏覽器以更新檢視. |
worldCopyJump |
Boolean |
false |
當這個選項可用時,當你平移地圖到其另一個領域時會被地圖捕獲到,並無縫地跳轉到原始的領域以保證所有標註、向量圖層之類的覆蓋物仍然可見. |
closePopupOnClick |
Boolean |
true |
當你不想使用者點選地圖關閉訊息彈出框時,請將其設定為false . |
選項 | 型別 | 預設值 | 描述 |
---|---|---|---|
keyboard |
Boolean |
true |
聚焦到地圖且允許使用者通過鍵盤的方向鍵和+ /- 鍵來漫遊地圖. |
keyboardPanOffset |
Number |
80 |
確定按鍵盤方向鍵時地圖平移的畫素. |
keyboardZoomOffset |
Number |
1 |
確定鍵盤+ or - 鍵對於的縮放級數. |
選項 | 型別 | 預設值 | 描述 |
---|---|---|---|
inertia |
Boolean |
true |
如果該選項可用,在拖動和在某一時間段內持續朝同一方向移動建有動力的地圖時,會有慣性的效果. |
inertiaDeceleration |
Number |
3000 |
確定慣性移動減速的速率,單位是畫素每秒的二次方2. |
inertiaMaxSpeed |
Number |
1500 |
慣性移動的最大速度,單位是畫素每秒. |
inertiaThreshold |
Number |
depends |
放開滑鼠或是觸控來停止慣性移動與移動停止之間的毫秒數. |
選項 | 型別 | 預設值 | 描述 |
---|---|---|---|
zoomControl |
Boolean |
true |
確定zoom control是否預設載入在地圖上 . |
attributionControl |
Boolean |
true |
確定attribution control是否預設載入在地圖上. |
選項 | 型別 | 預設值 | 描述 |
---|---|---|---|
fadeAnimation |
Boolean |
depends | 確定瓦片淡出動畫是否可用。通常預設在所有瀏覽器中都支援CSS3轉場,android例外. |
zoomAnimation |
Boolean |
depends | 確定瓦片縮放動畫是否可用。通常預設在所有瀏覽器中都支援CSS3轉場,android例外. |
zoomAnimationThreshold |
Number |
4 | Won't animate zoom if the zoom difference exceeds this value. |
markerZoomAnimation |
Boolean |
depends | 確定註記的縮放是否隨地圖縮放動畫而播放,如果被禁用,註記在動畫中拉長時會消失。通常預設在所有瀏覽器中都支援CSS3轉場,android例外. |
Events
You can subscribe to the following events using these methods.
Event | Data | 描述 |
---|---|---|
click |
MouseEvent |
使用者點選或觸控地圖時觸發. |
dblclick |
MouseEvent |
使用者雙擊或連續兩次觸控地圖時觸發. |
mousedown |
MouseEvent |
使用者按下滑鼠按鍵時觸發. |
mouseup |
MouseEvent |
使用者按下滑鼠按鍵時觸發. |
mouseover |
MouseEvent |
滑鼠進入地圖時觸發. |
mouseout |
MouseEvent |
滑鼠離開地圖時觸發. |
mousemove |
MouseEvent |
滑鼠在地圖上移動時觸發. |
contextmenu |
MouseEvent |
當用戶在地圖上按下滑鼠右鍵時觸發,如果有監聽器在監聽這個時間,則瀏覽器預設的情景選單被禁用. |
focus |
Event |
當用戶在地圖上進行標引、點選或移動時進行聚焦. |
blur |
Event |
當地圖失去焦點時觸發. |
preclick |
MouseEvent |
當滑鼠在地圖上點選之前觸發。有時會在點選滑鼠時,並在已存在的點選事件開始處理之前想要某件事情發生時用得到. |
load |
Event |
當地圖初始化時觸發。(當地圖的中心點和縮放初次設定時). |
unload |
Event |
Fired when the map is destroyed with remove method. |
viewreset |
Event |
當地圖需要重繪內容時觸發。(通常在地圖縮放和載入時發生)這對於建立使用者自定義的疊置圖層非常有用. |
movestart |
Event |
地圖檢視開始改變時觸發。(比如使用者開始拖動地圖). |
move |
Event |
所有的地圖檢視移動時觸發. |
moveend |
Event |
當地圖檢視結束改變時觸發。(比如使用者停止拖動地圖). |
dragstart |
Event |
使用者開始拖動地圖時觸發. |
drag |
Event |
使用者拖動地圖時不斷重複地觸發. |
dragend |
Event |
使用者停止拖動時觸發. |
zoomstart |
Event |
當地圖縮放即將發生時觸發。(比如縮放動作開始前). |
zoomend |
Event |
當地圖縮放時觸發. |
zoomlevelschange |
Event |
Fired when the number of zoomlevels on the map is changed due to adding or removing a layer. |
resize |
ResizeEvent |
Fired when the map is resized. |
autopanstart |
Event |
開啟彈出視窗時地圖開始自動平移時觸發. |
layeradd |
LayerEvent |
當一個新的圖層新增到地圖上時觸發. |
layerremove |
LayerEvent |
當一些圖層從地圖上移除時觸發. |
baselayerchange |
LayerEvent |
當通過layer control改變基礎圖層時觸發. |
overlayadd |
LayerEvent |
Fired when an overlay is selected through the layer control. |
overlayremove |
LayerEvent |
Fired when an overlay is deselected through the layer control. |
locationfound |
LocationEvent |
當地理定址成功時觸發(使用locate方法) |
locationerror |
ErrorEvent |
當地理定址錯誤時觸發(使用locate方法) |
popupopen |
PopupEvent |
當彈出框開啟時觸發(使用openPopup 方法) |
popupclose |
PopupEvent |
當彈出框關閉時觸發(使用closePopup 方法) |
地圖狀態修改
方法 | 返回值 | 描述 |
---|---|---|
setView( <LatLng> center, <Number> zoom, <zoom/pan options> options? ) |
this |
設定地圖(設定其地理中心和縮放). |
setZoom( <Number> zoom, <zoom options> options? ) |
this |
設定地圖的縮放. |
zoomIn( <Number> delta?, <zoom options> options? ) |
this |
通過delta變數放大地圖的級別,1是delta的預設值. |
zoomOut( <Number> delta?, <zoom options> options?) |
this |
通過delta變數縮小地圖的級別,1是delta的預設值. |
setZoomAround( <LatLng> latlng, <Number> zoom, <zoom options> options? ) |
this |
Zooms the map while keeping a specified point on the map stationary (e.g. used internally for scroll zoom and double-click zoom). |
fitBounds( <LatLngBounds> bounds, <fitBounds options> options? ) |
this |
將地圖檢視儘可能大地設定在給定的地理邊界內. |
fitWorld( <fitBounds options> options? ) |
this |
將地圖檢視儘可能大地設定在包含全部地域的級別上. |
panTo( <LatLng> latlng, <pan options> options? ) |
this |
將地圖平移到給定的中心。如果新的中心點在螢幕內與現有的中心點不同則產生平移動作. |
panInsideBounds( <LatLngBounds> bounds ) |
this |
平移地圖到坐落於給定邊界最接近的檢視內. |
panBy( <Point> point, <pan options> options? ) |
this |
通過給定的畫素值對地圖進行平移. |
invalidateSize( <Boolean> options?, <zoom/pan options> options? ) |
this |
檢查地圖容器的大小是否改變並更新地圖,如果是這樣的話,在動態改變地圖大小後呼叫,如果animate是true的話,對地圖進行更新. |
setMaxBounds( <LatLngBounds> bounds, <zoom/pan options> options? ) |
this |
將地圖限定在給定的邊界內 (map maxBounds). |
locate( <Locate options> options? ) |
this |
用地理定位介面Geolocation API獲取使用者位置資訊,在成功定位或定位出錯產生locationerror後解除location-found事件與定位資料,且將地圖檢視設定到檢測的確切的使用者的位置(如果定位失敗則回到地域檢視)。在Locate options中有更多詳細內容。 |
stopLocate() |
this |
停止觀看以前由map.locate({.:true})發起的位置,如果使用{setView:true}呼叫map.locate,則中止重置地圖檢視。 |
remove() |
this |
銷燬地圖並清除所有相關事件偵聽器。 |
獲取地圖狀態
方法 | 返回值 | 描述 |
---|---|---|
getCenter() |
LatLng |
返回地圖檢視的地理中心. |
getZoom() |
Number |
獲取地圖檢視現在所處的縮放級別. |
getMinZoom() |
Number |
返回地圖最小的縮放級別. |
getMaxZoom() |
Number |
返回地圖最大的縮放級別. |
getBounds() |
LatLngBounds |
返回地圖檢視的經緯度邊界. |
getBoundsZoom( <LatLngBounds> bounds, <Boolean> inside? ) |
Number |
返回適應整個地圖檢視邊界的最大縮放級別。如果inside的設定時true,這個方法返回適應整個地圖檢視邊界的最小縮放級別. |
getSize() |
Point |
返回現有地圖容器的大小. |
getPixelBounds() |
Bounds |
返回地圖檢視在畫素投影座標系下的邊界。(很多時候對使用者自定義圖層和疊加很有用). |
getPixelOrigin() |
Point |
返回地圖圖層畫素投影座標系下的左上角的點。(很多時候對使用者自定義圖層和疊加很有用). |
圖層控制/h3>
方法 | 返回值 | 描述 |
---|---|---|
addLayer( <ILayer> layer, <Boolean> insertAtTheBottom? ) |
this |
將圖層新增到地圖上。如果insertAtTheBottom的選項為true,圖層新增時在所以圖層之下。(在切換基底圖時比較有用). |
removeLayer( <ILayer> layer ) |
this |
將圖層在地圖上移除. |
hasLayer( <ILayer> layer ) |
Boolean |
如果新增的圖層是當前圖層則返回true. |
openPopup( <Popup> popup ) |
this |
當關閉前一個彈出框時彈出指定的對話方塊。(確定在同一時間只有一個開啟並可用). |
openPopup( <String> html | <HTMLElement> el, <LatLng> latlng, <Popup options> options? ) |
this |
建立帶有指定選項的彈出視窗,並在地圖上的給定點開啟彈出視窗。 |
closePopup( <Popup> popup? ) |
this |
關閉openPopup開啟的彈出框. |
addControl( <IControl> control ) |
this |
在地圖上新增控制選項. |
removeControl( <IControl> control ) |
this |
在地圖上移除控制選項. |
轉換方法
方法 | 返回值 | 描述 |
---|---|---|
latLngToLayerPoint( <LatLng> latlng ) |
Point |
返回地圖圖層上與地理座標相一致的點。(在地圖上進行位置疊加時比較有用). |
layerPointToLatLng( <Point> point ) |
LatLng |
返回給定地圖上點的地理座標系. |
containerPointToLayerPoint( <Point> point ) |
Point |
將於地圖容器相關的點轉換為地圖圖層相關的點. |
layerPointToContainerPoint( <Point> point ) |
Point |
將地圖圖層相關的點轉換為地圖容器相關的點. |
latLngToContainerPoint( <LatLng> latlng ) |
Point |
返回與給定地理座標系相符的地圖容器的點. |
containerPointToLatLng( <Point> point ) |
LatLng |
返回給定地理容器點的地理座標. |
project( <LatLng> latlng, <Number> zoom? ) |
Point |
將地理座標投影到指定縮放級別的畫素座標系中. |
unproject( <Point> point, <Number> zoom? ) |
LatLng |
將畫素座標系投影到指定縮放級別的地理座標系中。(預設為當前的縮放級別). |
mouseEventToContainerPoint( <MouseEvent> event ) |
Point |
返回滑鼠點選事件物件的畫素座標(與地圖左上角相關). |
mouseEventToLayerPoint( <MouseEvent> event ) |
Point |
返回滑鼠點選事件物件的畫素座標(與地圖圖層相關). |
mouseEventToLatLng( <MouseEvent> event ) |
LatLng |
返回滑鼠點選事件物件的地理座標. |
其他方法
方法 | 返回值 | 描述 |
---|---|---|
getContainer() |
HTMLElement |
返回地圖容器物件. |
getPanes() |
MapPanes |
返回不同地圖物件的邊框(疊加渲染). |
whenReady( <Function> fn, <Object> context? ) |
this |
當地圖的位置和縮放初始化好或是時間發生之後,執行給定的回撥方法,通常傳遞一個函式內容. |
位置選項
選項 | 型別 | 預設值 | 描述 |
---|---|---|---|
watch |
Boolean |
false |
如果該值為真,則開始利用W3C的watchPosition方法監聽位置變化情況(而不是指監聽一次)。你可以通過map.stoplocate()方法來停止監聽. |
setView |
Boolean |
false |
如果該值為真,則通過自動將地圖檢視定位到使用者一定精度範圍內的位置,如果地理定位失敗則顯示全部地圖. |
maxZoom |
Number |
Infinity |
在使用setView選項時檢視縮放的最大級別. |
timeout |
Number |
10000 |
在觸發locationerror事件之前等待地理定位的毫秒為單位的時間. |
maximumAge |
Number |
0 |
位置監聽的最大生命週期。如果比最後定位回覆後毫秒用時短,則locate返回一個快取位置. |
enableHighAccuracy |
Boolean |
false |
開啟高精度,參加 W3C SPEC的描述. |
Zoom/pan options
選項 | 型別 | 預設值 | 描述 |
---|---|---|---|
reset |
Boolean |
false |
如果是真的,地圖檢視將被完全重置(沒有任何動畫)。 |
pan |
pan options |
- |
設定平移選項(如果沒有縮放變化),如果發生。 |
zoom |
zoom options |
- |
設定縮放變焦的選項。 |
animate |
Boolean |
- |
一個相當於將動畫賦予縮放和平移選項的方法(見下文)。 |
Pan options
選項 | 型別 | 預設值 | 描述 |
---|---|---|---|
animate |
Boolean |
- |
如果真的話,如果可能的話,平移總是會被動畫化。如果為false,則它不會進行動畫搖攝,或者如果搖攝超過螢幕,則重置地圖檢視,或者只是為地圖窗格設定新的偏移量(除了“pan.”總是執行後者)。 |
duration |
Number |
0.25 |
動畫平移的持續時間。 |
easeLinearity |
Number |
0.25 |
平移動畫緩和的曲率因子(三次Bezier曲線的第三引數)。1.0表示線性動畫,曲線越彎曲越少。 |
noMoveStart |
Boolean |
false |
如果是真的,平移不會在啟動時開火(在內部用於平移慣性)。 |
Zoom options
選項 | 型別 | 預設值 | 描述 |
---|---|---|---|
animate |
Boolean |
- |
如果未指定,如果縮放原點在當前檢視內,則會發生縮放動畫。如果是真的,地圖將嘗試動畫縮放不管放在何處是變焦原點。設定“假”將使其始終完全重置檢視而無動畫 |
fitBounds options
The same as zoom/pan options and additionally:
選項 | 型別 | 預設值 | 描述 |
---|---|---|---|
paddingTopLeft |
Point |
[0,0] |
設定地圖容器左上角的填充量,在將檢視設定為適合邊界時不應該考慮這些填充量。有用的,如果你有一些控制元件覆蓋在地圖上,就像側邊欄,你不想讓它們模糊你正在縮放的物件。 |
paddingBottomRight |
Point |
[0,0] |
同樣的地圖右下角。 |
padding |
Point |
[0,0] |
相當於將左上和右下填充設定為相同的值。 |
Properties
M地圖屬性包括互動操作,允許你在執行環境中互動地控制地圖行為,比如通過拖拽和點選縮放級別顯示和不顯示某要素. Example:
map.doubleClickZoom.disable();
You can also access default map controls like attribution control through map properties:
map.attributionControl.addAttribution("Earthquake data © GeoNames");
Property | 型別 | 描述 |
---|---|---|
dragging |
IHandler |
地圖拖拽處理程式,可以通過滑鼠和觸控的形式. |
touchZoom |
IHandler |
觸控地圖縮放處理程式. |
doubleClickZoom |
IHandler |
雙擊縮放處理程式. |
scrollWheelZoom |
IHandler |
滾動縮放處理程式. |
boxZoom |
IHandler |
矩形框(利用滑鼠拖動)縮放處理程式. |
keyboard |
IHandler |
鍵盤導向處理程式. |
tap |
IHandler |
Mobile touch hacks (quick tap and touch hold) handler. |
zoomControl |
Control.Zoom |
縮放控制. |
attributionControl |
Control.Attribution |
屬性控制. |
地圖視窗
望文思義,這是一個包括可以用來放置自定義圖層的不同的地圖視窗的物件。最大的區別是圖層的疊置.
Property | 型別 | 描述 |
---|---|---|
mapPane |
HTMLElement |
包含其他地圖視窗的視窗. |
tilePane |
HTMLElement |
切片圖層的視窗. |
objectsPane |
HTMLElement |
包含除切片視窗以外所有視窗的視窗. |
shadowPane |
HTMLElement |
用來隱藏圖層的視窗(如標註的隱藏). |
overlayPane |
HTMLElement |
這線段和多邊形一類圖層的視窗. |
markerPane |
HTMLElement |
標註圖示的視窗. |
popupPane |
HTMLElement |
彈出的視窗. |