Leaflet

一個開源的 JavaScript 函式庫
用於行動裝置友善的互動式地圖

Leaflet API 參考

此參考反映 Leaflet 。如果您使用的是不同版本的 Leaflet,請查看此清單

地圖

API 的中心類別 — 用於在頁面上建立地圖並操作它。

使用範例

// 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(<字串> id, <地圖選項> options?) 給定一個 <div> 元素的 DOM ID,並可選擇使用一個包含 地圖選項 的物件字面值,來實例化一個地圖物件。
L.map(<HTMLElement> el, <地圖選項> options?) 給定一個 <div> HTML 元素的實例,並可選擇使用一個包含 地圖選項 的物件字面值,來實例化一個地圖物件。

選項

選項 類型 預設值 描述
preferCanvas 布林值 false 是否應該在 Canvas 渲染器上渲染路徑。 預設情況下,所有 路徑 都會在 SVG 渲染器中渲染。

控制項選項

選項 類型 預設值 描述
attributionControl 布林值 true 是否預設將歸屬控制項新增至地圖。
zoomControl 布林值 true 是否預設將縮放控制項新增至地圖。

互動選項

選項 類型 預設值 描述
closePopupOnClick 布林值 true 如果您不希望在使用者點擊地圖時關閉彈出視窗,請將其設定為 false
boxZoom 布林值 true 是否可以通過在按住 shift 鍵的同時拖動滑鼠來縮放到指定的矩形區域。
doubleClickZoom 布林值|字串 true 是否可以通過雙擊地圖來放大,並通過在按住 shift 的同時雙擊來縮小。如果傳遞 'center',雙擊縮放將縮放到視圖的中心,無論滑鼠在哪裡。
dragging 布林值 true 地圖是否可以用滑鼠/觸控拖曳。
zoomSnap 數字 1 強制地圖的縮放級別始終是此值的倍數,尤其是在 fitBounds() 或雙指縮放之後。預設情況下,縮放級別會捕捉到最接近的整數;較低的值(例如 0.50.1)允許更大的粒度。值為 0 表示在 fitBounds 或雙指縮放後縮放級別不會被捕捉。
zoomDelta 數字 1 控制地圖的縮放級別在 zoomIn()zoomOut()、按鍵盤上的 +-,或使用縮放控制項後將變化多少。 小於 1 的值(例如 0.5)允許更大的粒度。
trackResize 布林值 true 地圖是否會自動處理瀏覽器視窗調整大小以更新自身。

平移慣性選項

選項 類型 預設值 描述
inertia 布林值 * 如果啟用,地圖的平移將具有慣性效果,地圖在拖動時會建立動量,並在一段時間內繼續沿相同方向移動。在觸控裝置上感覺特別好。預設為啟用。
inertiaDeceleration 數字 3000 慣性運動減速的速率,以像素/秒²為單位。
inertiaMaxSpeed 數字 無限大 慣性運動的最大速度,以像素/秒為單位。
easeLinearity 數字 0.2
worldCopyJump 布林值 false 啟用此選項後,地圖會追蹤您何時平移到世界的另一個「副本」,並無縫跳轉到原始副本,以便所有覆蓋物(如標記和向量圖層)仍然可見。
maxBoundsViscosity 數字 0.0 如果設定了 maxBounds,此選項將控制在拖曳地圖時邊界有多堅實。預設值 0.0 允許使用者以正常速度將地圖拖曳到邊界之外,較高的值將減慢地圖拖曳到邊界之外的速度,而 1.0 使邊界完全堅實,防止使用者拖曳到邊界之外。

鍵盤導航選項

選項 類型 預設值 描述
keyboard 布林值 true 使地圖可聚焦,並允許使用者使用鍵盤箭頭和 +/- 鍵來導航地圖。
keyboardPanDelta 數字 80 按下箭頭鍵時平移的像素量。

滑鼠滾輪選項

選項 類型 預設值 描述
scrollWheelZoom 布林值|字串 true 是否可以使用滑鼠滾輪縮放地圖。如果傳遞 'center',它將縮放到視圖的中心,無論滑鼠在哪裡。
wheelDebounceTime 數字 40 限制滾輪觸發的速率(以毫秒為單位)。預設情況下,使用者不能以超過每 40 毫秒一次的速度通過滾輪縮放。
wheelPxPerZoomLevel 數字 60 多少滾動像素(由 L.DomEvent.getWheelDelta 報告)表示一個完整縮放級別的變化。較小的值將使滾輪縮放更快(反之亦然)。

觸控互動選項

選項 類型 預設值 描述
tapHold 布林值 啟用模擬 contextmenu 事件,對於行動 Safari,預設為 true
tapTolerance 數字 15 使用者在觸摸期間移動手指的最大像素數,使其被視為有效的點擊。
touchZoom 布林值|字串 * 是否可以使用兩指觸控拖曳來縮放地圖。如果傳遞 'center',它將縮放到視圖的中心,無論觸控事件(手指)在哪裡。為支援觸控的網頁瀏覽器啟用。
bounceAtZoomLimits 布林值 true 如果您不希望地圖在雙指縮放時縮放到最小/最大縮放範圍之外,然後彈回,請將其設定為 false。

地圖狀態選項

選項 類型 預設值 描述
crs CRS L.CRS.EPSG3857 要使用的坐標參考系統。 如果您不確定這意味著什麼,請不要更改此設定。
center LatLng 未定義 地圖的初始地理中心
zoom 數字 未定義 初始地圖縮放級別
minZoom 數字 * 地圖的最小縮放級別。如果未指定,且地圖中至少有一個 GridLayerTileLayer,則會改為使用其 minZoom 選項的最小值。
maxZoom 數字 * 地圖的最大縮放級別。如果未指定,且地圖中至少有一個 GridLayerTileLayer,則會改為使用其 maxZoom 選項的最大值。
layers 圖層[] [] 將初始新增至地圖的圖層陣列
maxBounds LatLngBounds null 設定此選項後,地圖會將視圖限制在給定的地理邊界內,如果使用者嘗試在視圖外平移,則會將使用者彈回。若要動態設定限制,請使用 setMaxBounds 方法。
renderer 渲染器 * 在地圖上繪製向量圖層的預設方法。根據瀏覽器支援,預設為L.SVGL.Canvas

動畫選項

選項 類型 預設值 描述
zoomAnimation 布林值 true 是否啟用地圖縮放動畫。預設情況下,除了 Android 之外,在所有支援 CSS3 過渡的瀏覽器中都已啟用。
zoomAnimationThreshold 數字 4 如果縮放差異超過此值,則不會產生縮放動畫。
fadeAnimation 布林值 true 是否啟用圖磚淡入淡出動畫。預設情況下,除了 Android 之外,在所有支援 CSS3 過渡的瀏覽器中都已啟用。
markerZoomAnimation 布林值 true 標記是否以縮放動畫來動畫縮放,如果停用,它們將在動畫的長度內消失。預設情況下,除了 Android 之外,在所有支援 CSS3 過渡的瀏覽器中都已啟用。
transform3DLimit 數字 2^23 定義 CSS 平移轉換的最大大小。除非網頁瀏覽器在執行大型 panBy 後將圖層放置在錯誤的位置,否則不應更改預設值。

事件

圖層事件

事件 資料 描述
baselayerchange LayersControlEvent 當通過圖層控制項更改基本圖層時觸發。
overlayadd LayersControlEvent 當通過圖層控制項選取疊加層時觸發。
overlayremove LayersControlEvent 當通過圖層控制項取消選取疊加層時觸發。
layeradd LayerEvent 當新的圖層新增到地圖時觸發。
layerremove LayerEvent 當從地圖中移除某些圖層時觸發

地圖狀態變更事件

事件 資料 描述
zoomlevelschange 事件 由於新增或移除圖層而變更地圖上的縮放級別數量時觸發。
resize ResizeEvent 當調整地圖大小時觸發。
unload 事件 當地圖被 remove 方法銷毀時觸發。
viewreset 事件 當需要地圖重新繪製其內容時觸發(這通常發生在地圖縮放或載入時)。對於建立自訂覆蓋物非常有用。
load 事件 當地圖初始化時(當其中心和縮放首次設定時)觸發。
zoomstart 事件 當地圖縮放即將變更時觸發(例如,在縮放動畫之前)。
movestart 事件 當地圖的視圖開始變更時觸發(例如,使用者開始拖曳地圖)。
zoom 事件 在縮放級別的任何變更期間重複觸發,包括縮放和飛行動畫。
move 事件 在地圖的任何移動期間重複觸發,包括平移和飛行動畫。
zoomend 事件 當地圖縮放變更後,在任何動畫之後觸發。
moveend 事件 當地圖的中心停止變更時觸發(例如,使用者停止拖曳地圖或在非中心縮放後)。

彈出視窗事件

事件 資料 描述
popupopen PopupEvent 當地圖中開啟彈出視窗時觸發
popupclose PopupEvent 當地圖中的彈出視窗關閉時觸發
autopanstart 事件 當開啟彈出視窗時,地圖開始自動平移時觸發。

工具提示事件

事件 資料 描述
tooltipopen TooltipEvent 當工具提示在地圖上開啟時觸發。
tooltipclose TooltipEvent 當地圖上的工具提示關閉時觸發。

位置事件

事件 資料 描述
locationerror ErrorEvent 當地理定位(使用 locate 方法)失敗時觸發。
locationfound LocationEvent 當地理定位(使用 locate 方法)成功時觸發。

互動事件

事件 資料 描述
click MouseEvent 當使用者點擊(或輕觸)地圖時觸發。
dblclick MouseEvent 當使用者雙擊(或雙輕觸)地圖時觸發。
mousedown MouseEvent 當使用者在地圖上按下滑鼠按鈕時觸發。
mouseup MouseEvent 當使用者在地圖上放開滑鼠按鈕時觸發。
mouseover MouseEvent 當滑鼠進入地圖時觸發。
mouseout MouseEvent 當滑鼠離開地圖時觸發。
mousemove MouseEvent 當滑鼠在地圖上移動時觸發。
contextmenu MouseEvent 當使用者在地圖上按下滑鼠右鍵時觸發,如果此事件有監聽器,則會阻止顯示預設瀏覽器上下文選單。當使用者在行動裝置上長按單點觸控一秒時也會觸發(也稱為長按)。
keypress KeyboardEvent 當使用者在地圖處於焦點時,按下鍵盤上會產生字元值的按鍵時觸發。
keydown KeyboardEvent 當使用者在地圖處於焦點時,按下鍵盤上的按鍵時觸發。與 keypress 事件不同,keydown 事件會在產生字元值的按鍵和不產生字元值的按鍵時觸發。
keyup KeyboardEvent 當使用者在地圖處於焦點時,放開鍵盤上的按鍵時觸發。
preclick MouseEvent 在地圖上點擊滑鼠之前觸發(當您希望在任何現有的點擊處理程序開始執行之前發生某些事情時,有時很有用)。

其他事件

事件 資料 描述
zoomanim ZoomAnimEvent 每次縮放動畫至少觸發一次。對於連續縮放,例如捏合縮放,在縮放期間每幀觸發一次。

方法

方法 回傳值 描述
getRenderer(<Path> layer) 渲染器

回傳應該用於渲染給定的 PathRenderer 實例。它將確保地圖和路徑的 renderer 選項受到尊重,並且渲染器確實存在於地圖上。

圖層和控制項的方法

方法 回傳值 描述
addControl(<Control> control) this

將給定的控制項新增至地圖

removeControl(<Control> control) this

從地圖中移除給定的控制項

addLayer(<Layer> layer) this

將給定的圖層新增至地圖

removeLayer(<Layer> layer) this

從地圖中移除給定的圖層。

hasLayer(<Layer> layer) 布林值

如果給定的圖層目前已新增至地圖,則回傳 true

eachLayer(<Function> fn, <Object> context?) this

疊代地圖的圖層,可選擇指定疊代器函數的上下文。

map.eachLayer(function(layer){
    layer.bindPopup('Hello');
});
openPopup(<Popup> popup) this

開啟指定的彈出視窗,同時關閉先前開啟的彈出視窗(以確保一次只開啟一個,以提高可用性)。

openPopup(<String|HTMLElement> content, <LatLng> latlng, <Popup options> options?) this

建立具有指定內容和選項的彈出視窗,並在地圖上的給定點開啟它。

closePopup(<Popup> popup?) this

關閉先前使用 openPopup 開啟的彈出視窗(或給定的彈出視窗)。

openTooltip(<Tooltip> tooltip) this

開啟指定的工具提示。

openTooltip(<String|HTMLElement> content, <LatLng> latlng, <Tooltip options> options?) this

建立具有指定內容和選項的工具提示,並開啟它。

closeTooltip(<Tooltip> tooltip) this

關閉以參數形式給定的工具提示。

修改地圖狀態的方法

方法 回傳值 描述
setView(<LatLng> center, <Number> zoom, <Zoom/pan options> options?) this

使用給定的動畫選項設定地圖的視圖(地理中心和縮放)。

setZoom(<Number> zoom, <Zoom/pan options> options?) this

設定地圖的縮放。

zoomIn(<Number> delta?, <Zoom options> options?) this

將地圖的縮放增加 delta(預設為 zoomDelta)。

zoomOut(<Number> delta?, <Zoom options> options?) this

將地圖的縮放減少 delta(預設為 zoomDelta)。

setZoomAround(<LatLng> latlng, <Number> zoom, <Zoom options> options) this

縮放地圖,同時保持地圖上指定的地理點靜止(例如,在內部用於滾動縮放和雙擊縮放)。

setZoomAround(<Point> offset, <Number> zoom, <Zoom options> options) this

縮放地圖,同時保持地圖上指定的像素(相對於左上角)靜止。

fitBounds(<LatLngBounds> bounds, <fitBounds options> options?) this

設定一個地圖視圖,其中包含給定的地理邊界,且具有可能的最大縮放級別。

fitWorld(<fitBounds options> options?) this

設定一個地圖視圖,其中主要包含整個世界,且具有可能的最大縮放級別。

panTo(<LatLng> latlng, <Pan options> options?) this

將地圖平移到給定的中心。

panBy(<Point> offset, <Pan options> options?) this

將地圖平移給定數量的像素(動畫)。

flyTo(<LatLng> latlng, <Number> zoom?, <Zoom/pan options> options?) this

設定地圖的視圖(地理中心和縮放),執行平滑的平移縮放動畫。

flyToBounds(<LatLngBounds> bounds, <fitBounds options> options?) this

使用類似 flyTo 的平滑動畫設定地圖的視圖,但採用類似 fitBounds 的邊界參數。

setMaxBounds(<LatLngBounds> bounds) this

將地圖視圖限制在給定的邊界內(請參閱 maxBounds 選項)。

setMinZoom(<Number> zoom) this

設定可用縮放級別的下限(請參閱 minZoom 選項)。

setMaxZoom(<Number> zoom) this

設定可用縮放級別的上限(請參閱 maxZoom 選項)。

panInsideBounds(<LatLngBounds> bounds, <Pan options> options?) this

將地圖平移到最接近的視圖,使其位於給定的邊界內(如果尚未位於邊界內),並使用指定的選項(如果有的話)控制動畫。

panInside(<LatLng> latlng, <padding options> options?) this

將地圖平移到最小量,以使 latlng 可見。使用邊距選項將顯示調整為更受限的邊界。如果 latlng 已在(可選的邊距)顯示邊界內,則地圖將不會平移。

invalidateSize(<Zoom/pan options> options) this

檢查地圖容器大小是否已變更,如果已變更,則更新地圖,預設也會將平移動畫化。如果 options.panfalse,則不會發生平移。如果 options.debounceMoveendtrue,則會延遲 moveend 事件,使其即使連續多次呼叫該方法也不會經常發生。

invalidateSize(<Boolean> animate) this

檢查地圖容器大小是否已變更,如果已變更,則更新地圖,預設也會將平移動畫化。

stop() this

停止目前正在執行的 panToflyTo 動畫(如果有的話)。

地理定位方法

方法 回傳值 描述
locate(<Locate options> options?) this

嘗試使用地理定位 API 定位使用者,成功時觸發包含位置資料的 locationfound 事件,失敗時觸發 locationerror 事件,並可選擇根據偵測精確度(或在地理定位失敗時設定為世界視圖)將地圖視圖設定為使用者的位置。請注意,如果您的頁面未使用 HTTPS,則此方法將在新式瀏覽器中失敗(Chrome 50 及更新版本)。如需更多詳細資訊,請參閱 Locate options

stopLocate() this

停止先前由 map.locate({watch: true}) 啟動的監看位置,如果呼叫 map.locate 時使用 {setView: true},則會中止重設地圖視圖。

其他方法

方法 回傳值 描述
addHandler(<字串> name, <Function> HandlerClass) this

根據其名稱和建構函式,將新的 Handler 新增至地圖。

remove() this

銷毀地圖並清除所有相關的事件監聽器。

createPane(<字串> name, <HTMLElement> container?) HTMLElement

如果不存在,則使用給定的名稱建立新的 地圖窗格,然後傳回它。該窗格會建立為 container 的子項,如果未設定,則會建立為主要地圖窗格的子項。

getPane(<String|HTMLElement> pane) HTMLElement

傳回 地圖窗格,並給定其名稱或其 HTML 元素(其身分)。

getPanes() Object

傳回一個純物件,其中包含所有 窗格 的名稱作為鍵,而窗格作為值。

getContainer() HTMLElement

傳回包含地圖的 HTML 元素。

whenReady(<Function> fn, <Object> context?) this

當使用視圖(中心和縮放)和至少一個圖層初始化地圖時,或在已初始化時立即執行給定的函數 fn,並且可選擇傳遞函數上下文。

取得地圖狀態的方法

方法 回傳值 描述
getCenter() LatLng

傳回地圖視圖的地理中心

getZoom() 數字

傳回地圖視圖的目前縮放級別

getBounds() LatLngBounds

傳回目前地圖視圖中可見的地理邊界

getMinZoom() 數字

傳回地圖的最小縮放級別(如果在任何圖層的地圖或 minZoom 選項中設定),否則預設為 0

getMaxZoom() 數字

傳回地圖的最大縮放級別(如果在任何圖層的地圖或 maxZoom 選項中設定)。

getBoundsZoom(<LatLngBounds> bounds, <Boolean> inside?, <Point> padding?) 數字

傳回給定邊界完全適合地圖視圖的最大縮放級別。如果將 inside(可選)設定為 true,則該方法會改為傳回地圖視圖完全適合給定邊界的最小縮放級別。

getSize() Point

傳回地圖容器的目前大小(以像素為單位)。

getPixelBounds() Bounds

返回目前地圖視圖在投影像素坐標中的邊界 (有時在圖層和疊加層的實現中很有用)。

getPixelOrigin() Point

返回地圖圖層左上角的投影像素坐標(在自定義圖層和疊加層的實現中很有用)。

getPixelWorldBounds(<Number> zoom?) Bounds

返回縮放級別 zoom 的世界像素坐標邊界。如果省略 zoom,則使用地圖當前的縮放級別。

轉換方法

方法 回傳值 描述
getZoomScale(<Number> toZoom, <Number> fromZoom) 數字

返回從縮放級別 fromZoomtoZoom 的地圖轉換所要應用的縮放比例。內部用於輔助縮放動畫。

getScaleZoom(<Number> scale, <Number> fromZoom) 數字

返回如果地圖處於 fromZoom 級別,並且所有內容都按 scale 因子縮放,則地圖將會到達的縮放級別。與 getZoomScale 相反。

project(<LatLng> latlng, <Number> zoom) Point

根據地圖 CRS 的投影來投影地理坐標 LatLng,然後根據 zoom 和 CRS 的 Transformation 進行縮放。結果是相對於 CRS 原點的像素坐標。

unproject(<Point> point, <Number> zoom) LatLng

project 相反。

layerPointToLatLng(<Point> point) LatLng

給定一個相對於原點像素的像素坐標,返回對應的地理坐標(對於當前縮放級別)。

latLngToLayerPoint(<LatLng> latlng) Point

給定一個地理坐標,返回相對於原點像素的對應像素坐標。

wrapLatLng(<LatLng> latlng) LatLng

返回一個 LatLng,其中 latlng 已根據地圖 CRS 的 wrapLatwrapLng 屬性進行包裝,如果它們在 CRS 的邊界之外。預設情況下,這表示經度環繞日期線包裝,使其值介於 -180 和 +180 度之間。

wrapLatLngBounds(<LatLngBounds> bounds) LatLngBounds

返回一個與給定大小相同的 LatLngBounds,確保其中心在 CRS 的邊界內。預設情況下,這表示中心經度環繞日期線包裝,使其值介於 -180 和 +180 度之間,並且邊界的大部分與 CRS 的邊界重疊。

distance(<LatLng> latlng1, <LatLng> latlng2) 數字

根據地圖 CRS 返回兩個地理坐標之間的距離。預設情況下,這以米為單位測量距離。

containerPointToLayerPoint(<Point> point) Point

給定一個相對於地圖容器的像素坐標,返回相對於原點像素的對應像素坐標。

layerPointToContainerPoint(<Point> point) Point

給定一個相對於原點像素的像素坐標,返回相對於地圖容器的對應像素坐標。

containerPointToLatLng(<Point> point) LatLng

給定一個相對於地圖容器的像素坐標,返回對應的地理坐標(對於當前縮放級別)。

latLngToContainerPoint(<LatLng> latlng) Point

給定一個地理坐標,返回相對於地圖容器的對應像素坐標。

mouseEventToContainerPoint(<MouseEvent> ev) Point

給定一個 MouseEvent 物件,返回事件發生位置相對於地圖容器的像素坐標。

mouseEventToLayerPoint(<MouseEvent> ev) Point

給定一個 MouseEvent 物件,返回事件發生位置相對於原點像素的像素坐標。

mouseEventToLatLng(<MouseEvent> ev) LatLng

給定一個 MouseEvent 物件,返回事件發生位置的地理坐標。

方法 回傳值 描述
on(<字串> type, <Function> fn, <Object> context?) this

將一個監聽器函數 (fn) 添加到物件的特定事件類型。您可以選擇性地指定監聽器的上下文(this 關鍵字將指向的物件)。您還可以傳遞幾個以空格分隔的類型(例如,'click dblclick')。

on(<Object> eventMap) this

添加一組類型/監聽器配對,例如 {click: onClick, mousemove: onMouseMove}

off(<字串> type, <Function> fn?, <Object> context?) this

移除先前添加的監聽器函數。如果沒有指定函數,它將從物件中移除該特定事件的所有監聽器。請注意,如果您將自定義上下文傳遞給 on,則必須將相同的上下文傳遞給 off 才能移除監聽器。

off(<Object> eventMap) this

移除一組類型/監聽器配對。

off() this

移除物件上所有事件的所有監聽器。這包括隱式附加的事件。

fire(<字串> type, <Object> data?, <Boolean> propagate?) this

觸發指定類型的事件。您可以選擇性地提供資料物件 — 監聽器函數的第一個參數將包含其屬性。事件可以選擇性地傳播到事件父級。

listens(<字串> type, <Boolean> propagate?) 布林值

如果特定事件類型有任何附加的監聽器,則返回 true。驗證可以選擇性地傳播,如果父級附加了監聽器,則它將返回 true

once() this

行為類似於 on(…),除了監聽器只會被觸發一次,然後被移除。

addEventParent(<Evented> obj) this

添加一個事件父級 — 一個 Evented,它將接收傳播的事件

removeEventParent(<Evented> obj) this

移除一個事件父級,因此它將停止接收傳播的事件

addEventListener() this

on(…) 的別名

removeEventListener() this

off(…) 的別名

clearAllEventListeners() this

off() 的別名

addOneTimeEventListener() this

once(…) 的別名

fireEvent() this

fire(…) 的別名

hasEventListeners() 布林值

listens(…) 的別名

屬性

控制項

屬性 類型 描述
zoomControl Control.Zoom 預設縮放控制項(僅當在建立地圖時 zoomControl 選項true 時可用)。

處理器

屬性 類型 描述
boxZoom 處理器 方塊 (按住 Shift 並使用滑鼠拖曳) 縮放處理器。
doubleClickZoom 處理器 雙擊縮放處理器。
dragging 處理器 地圖拖曳處理器(通過滑鼠和觸控)。
keyboard 處理器 鍵盤導航處理器。
scrollWheelZoom 處理器 滾輪縮放處理器。
tapHold 處理器 長按處理器以模擬 contextmenu 事件(在移動 Safari 中很有用)。
touchZoom 處理器 觸控縮放處理器。

地圖圖層窗格

窗格是 DOM 元素,用於控制地圖上圖層的順序。您可以使用 map.getPanemap.getPanes 方法訪問窗格。可以使用 map.createPane 方法建立新的窗格。

每個地圖都有以下預設窗格,它們僅在 zIndex 中有所不同。

窗格 類型 Z 軸索引 描述
mapPane HTMLElement 'auto' 包含所有其他地圖窗格的窗格
tilePane HTMLElement 200 GridLayerTileLayer 的窗格
overlayPane HTMLElement 400 向量(Path,例如 PolylinePolygon)、ImageOverlayVideoOverlay 的窗格
shadowPane HTMLElement 500 疊加層陰影的窗格(例如,Marker 陰影)
markerPane HTMLElement 600 MarkerIcon 窗格
tooltipPane HTMLElement 650 Tooltip 的窗格。
popupPane HTMLElement 700 Popup 的窗格。

定位選項

Map 的某些地理定位方法使用 options 參數。這是一個普通的 javascript 物件,具有以下可選組件
選項 類型 預設值 描述
watch 布林值 false 如果 true,則使用 W3C watchPosition 方法開始連續監看位置變更(而不是偵測一次)。您可以使用 map.stopLocate() 方法稍後停止監看。
setView 布林值 false setView
maxZoom 數字 無限大 如果 true,則自動將地圖視圖設置為使用者位置,並考慮偵測精度,或者如果地理定位失敗,則設置為世界視圖。
maxZoom 數字 10000 使用 setView 選項時,自動視圖設置的最大縮放級別。
timeout 數字 0 等待地理定位響應的毫秒數,然後觸發 locationerror 事件。
maximumAge 布林值 false 偵測到的位置的最大時效。如果自上次地理定位響應以來經過的時間少於此毫秒數,則 locate 將返回快取位置。

enableHighAccuracy

啟用高精度,請參閱 W3C 規範中的描述
選項 類型 預設值 描述
animate 布林值 縮放選項

某些修改縮放級別的 Map 方法使用 options 參數。這是一個普通的 javascript 物件,具有以下可選組件

animate
選項 類型 預設值 描述
animate 布林值 如果未指定,如果縮放原點在目前視圖內,則會發生縮放動畫。如果 true,則地圖將嘗試動畫縮放,而不管縮放原點在哪裡。設置 false 將使其始終完全重設視圖,而不進行動畫。
平移選項 數字 0.25 某些修改地圖中心的 Map 方法使用 options 參數。這是一個普通的 javascript 物件,具有以下可選組件
easeLinearity 數字 0.25 animate
如果 true,則盡可能始終對平移動畫化。如果 false,它將不動畫平移,或者重設地圖視圖(如果平移超過一個螢幕的距離),或者只是設定地圖窗格的新偏移量(除了 panBy 之外,它始終執行後者)。 布林值 false duration

動畫平移的持續時間,以秒為單位。

選項 類型 預設值 描述
animate 布林值 縮放選項
選項 類型 預設值 描述
平移選項 數字 0.25 某些修改地圖中心的 Map 方法使用 options 參數。這是一個普通的 javascript 物件,具有以下可選組件
easeLinearity 數字 0.25 animate
如果 true,則盡可能始終對平移動畫化。如果 false,它將不動畫平移,或者重設地圖視圖(如果平移超過一個螢幕的距離),或者只是設定地圖窗格的新偏移量(除了 panBy 之外,它始終執行後者)。 布林值 false duration

noMoveStart

選項 類型 預設值 描述
如果 true,則平移在開始時不會觸發 movestart 事件(在內部用於平移慣性)。 Point [0, 0] 縮放/平移選項
縮放選項 繼承的選項 Point [0, 0] 平移選項 繼承的選項
邊距選項 Point [0, 0] 相當於將左上和右下邊距設定為相同的值。

FitBounds 選項

選項 類型 預設值 描述
maxZoom 數字 null 可使用的最大縮放級別。
選項 類型 預設值 描述
animate 布林值 縮放選項
選項 類型 預設值 描述
平移選項 數字 0.25 某些修改地圖中心的 Map 方法使用 options 參數。這是一個普通的 javascript 物件,具有以下可選組件
easeLinearity 數字 0.25 animate
如果 true,則盡可能始終對平移動畫化。如果 false,它將不動畫平移,或者重設地圖視圖(如果平移超過一個螢幕的距離),或者只是設定地圖窗格的新偏移量(除了 panBy 之外,它始終執行後者)。 布林值 false duration
選項 類型 預設值 描述
如果 true,則平移在開始時不會觸發 movestart 事件(在內部用於平移慣性)。 Point [0, 0] 縮放/平移選項
縮放選項 繼承的選項 Point [0, 0] 平移選項 繼承的選項
邊距選項 Point [0, 0] 相當於將左上和右下邊距設定為相同的值。

標記

L.Marker 用於在地圖上顯示可點擊/可拖曳的圖示。擴展自 Layer

使用範例

L.marker([50.5, 30.5]).addTo(map);

建立

工廠 描述
L.marker(<LatLng> latlng, <標記選項> options?) 根據地理位置點和可選的選項物件,實例化一個標記物件。

選項

選項 類型 預設值 描述
icon Icon * 用於呈現標記的圖示實例。有關如何自訂標記圖示的詳細資訊,請參閱 圖示文件。如果未指定,則使用 L.Icon.Default 的通用實例。
keyboard 布林值 true 標記是否可以使用鍵盤進行 Tab 鍵瀏覽並透過按下 Enter 鍵點擊。
title 字串 '' 用於在滑鼠懸停在標記上時出現的瀏覽器工具提示文字(預設情況下沒有工具提示)。對於輔助功能非常有用
alt 字串 '標記' 圖示影像的 alt 屬性文字。對於輔助功能非常有用
zIndexOffset 數字 0 預設情況下,標記影像的 zIndex 會根據其緯度自動設定。如果您想將標記放在所有其他標記之上(或之下),請使用此選項,並指定一個較高的值,例如 1000(或較高的負值)。
opacity 數字 1.0 標記的不透明度。
riseOnHover 布林值 false 如果為 true,則當您將滑鼠懸停在標記上時,標記將會顯示在其他標記之上。
riseOffset 數字 250 用於 riseOnHover 功能的 z-index 偏移量。
pane 字串 'markerPane' 將新增標記圖示的 地圖窗格
shadowPane 字串 'shadowPane' 將新增標記陰影的 地圖窗格
bubblingMouseEvents 布林值 false 當為 true 時,此標記上的滑鼠事件將會在該地圖上觸發相同的事件(除非使用 L.DomEvent.stopPropagation)。
autoPanOnFocus 布林值 true 當為 true 時,每當標記被聚焦(例如透過在鍵盤上按下 tab 鍵)時,地圖都會平移,以確保標記在地圖的邊界內可見

可拖曳標記選項

選項 類型 預設值 描述
draggable 布林值 false 標記是否可以使用滑鼠/觸控拖曳。
autoPan 布林值 false 當將此標記拖曳到地圖邊緣附近時是否平移地圖。
autoPanPadding Point 點 (50, 50) 地圖邊緣開始平移地圖的距離(以像素為單位,到左/右和上/下)。
autoPanSpeed 數字 10 地圖應平移的像素數。
選項 類型 預設值 描述
interactive 布林值 true 如果為 false,則圖層將不會發出滑鼠事件,並且將作為底層地圖的一部分。
選項 類型 預設值 描述
attribution 字串 null 要在貢獻者控制項中顯示的字串,例如「© OpenStreetMap 貢獻者」。它描述圖層資料,並且通常是對版權所有者和圖磚提供者的法律義務。

事件

事件 資料 描述
move 事件 當標記透過 setLatLng拖曳 移動時觸發。舊的和新的座標會以 oldLatLnglatlng 的形式包含在事件引數中。

拖曳事件

事件 資料 描述
dragstart 事件 當使用者開始拖曳標記時觸發。
movestart 事件 當標記開始移動時(由於拖曳)觸發。
drag 事件 在使用者拖曳標記時重複觸發。
dragend DragEndEvent 當使用者停止拖曳標記時觸發。
moveend 事件 當標記停止移動時(由於拖曳)觸發。
事件 資料 描述
click MouseEvent 當使用者點擊(或輕觸)圖層時觸發。
dblclick MouseEvent 當使用者在圖層上雙擊(或雙輕觸)時觸發。
mousedown MouseEvent 當使用者在圖層上按下滑鼠按鈕時觸發。
mouseup MouseEvent 當使用者釋放在圖層上按下的滑鼠按鈕時觸發。
mouseover MouseEvent 當滑鼠進入圖層時觸發。
mouseout MouseEvent 當滑鼠離開圖層時觸發。
contextmenu MouseEvent 當使用者在圖層上按下滑鼠右鍵時觸發,如果此事件上有接聽程式,則會阻止顯示預設的瀏覽器上下文功能表。當使用者按住單次觸摸一秒鐘時(也稱為長按),也會在行動裝置上觸發。
事件 資料 描述
add 事件 將圖層新增至地圖後觸發
remove 事件 將圖層從地圖移除後觸發
事件 資料 描述
popupopen PopupEvent 當繫結至此圖層的彈出視窗開啟時觸發
popupclose PopupEvent 當繫結至此圖層的彈出視窗關閉時觸發
事件 資料 描述
tooltipopen TooltipEvent 當繫結至此圖層的工具提示開啟時觸發。
tooltipclose TooltipEvent 當繫結至此圖層的工具提示關閉時觸發。

方法

除了 共用圖層方法(例如 addTo()remove())和 彈出視窗方法(例如 bindPopup())之外,您也可以使用以下方法
方法 回傳值 描述
getLatLng() LatLng

傳回標記的目前地理位置。

setLatLng(<LatLng> latlng) this

將標記位置變更為給定的點。

setZIndexOffset(<Number> offset) this

變更標記的 zIndex 偏移量

getIcon() Icon

傳回標記目前使用的圖示

setIcon(<圖示> icon) this

變更標記圖示。

setOpacity(<Number> opacity) this

變更標記的不透明度。

其他方法

方法 回傳值 描述
toGeoJSON(<Number|false> precision?) Object

座標值會使用具有給定 precisionformatNum 函數四捨五入。傳回標記的 GeoJSON 表示法(作為 GeoJSON Point 特徵)。

方法 回傳值 描述
addTo(<Map|LayerGroup> map) this

將圖層新增至給定的地圖或圖層群組。

remove() this

從目前活動的地圖中移除圖層。

removeFrom(<地圖> map) this

從給定的地圖移除圖層

removeFrom(<LayerGroup> group) this

從給定的 LayerGroup 移除圖層

getPane(<字串> name?) HTMLElement

傳回代表地圖上具名窗格的 HTMLElement。如果省略 name,則傳回此圖層的窗格。

getAttribution() 字串

貢獻者控制項 使用,傳回 貢獻者選項

方法 回傳值 描述
bindPopup(<字串|HTMLElement|Function|Popup> content, <Popup options> options?) this

使用傳遞的 content 將彈出視窗繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindPopup() this

移除先前使用 bindPopup 繫結的彈出視窗。

openPopup(<LatLng> latlng?) this

在指定的 latlng 或在預設的彈出視窗錨點(如果未傳遞 latlng)開啟繫結的彈出視窗。

closePopup() this

關閉繫結至此圖層的彈出視窗(如果已開啟)。

togglePopup() this

根據其目前狀態開啟或關閉繫結至此圖層的彈出視窗。

isPopupOpen() 布林值

如果繫結至此圖層的彈出視窗目前已開啟,則傳回 true

setPopupContent(<字串|HTMLElement|Popup> content) this

設定繫結至此圖層的彈出視窗內容。

getPopup() 彈出視窗

傳回繫結至此圖層的彈出視窗。

方法 回傳值 描述
bindTooltip(<字串|HTMLElement|Function|Tooltip> content, <Tooltip options> options?) this

使用傳遞的 content 將工具提示繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindTooltip() this

移除先前使用 bindTooltip 繫結的工具提示。

openTooltip(<LatLng> latlng?) this

在指定的 latlng 或在預設的工具提示錨點(如果未傳遞 latlng)開啟繫結的工具提示。

closeTooltip() this

關閉繫結至此圖層的工具提示(如果已開啟)。

toggleTooltip() this

根據其目前狀態開啟或關閉繫結至此圖層的工具提示。

isTooltipOpen() 布林值

如果繫結至此圖層的工具提示目前已開啟,則傳回 true

setTooltipContent(<字串|HTMLElement|Tooltip> content) this

設定繫結至此圖層的工具提示內容。

getTooltip() 提示

傳回繫結至此圖層的工具提示。

方法 回傳值 描述
on(<字串> type, <Function> fn, <Object> context?) this

將一個監聽器函數 (fn) 添加到物件的特定事件類型。您可以選擇性地指定監聽器的上下文(this 關鍵字將指向的物件)。您還可以傳遞幾個以空格分隔的類型(例如,'click dblclick')。

on(<Object> eventMap) this

添加一組類型/監聽器配對,例如 {click: onClick, mousemove: onMouseMove}

off(<字串> type, <Function> fn?, <Object> context?) this

移除先前添加的監聽器函數。如果沒有指定函數,它將從物件中移除該特定事件的所有監聽器。請注意,如果您將自定義上下文傳遞給 on,則必須將相同的上下文傳遞給 off 才能移除監聽器。

off(<Object> eventMap) this

移除一組類型/監聽器配對。

off() this

移除物件上所有事件的所有監聽器。這包括隱式附加的事件。

fire(<字串> type, <Object> data?, <Boolean> propagate?) this

觸發指定類型的事件。您可以選擇性地提供資料物件 — 監聽器函數的第一個參數將包含其屬性。事件可以選擇性地傳播到事件父級。

listens(<字串> type, <Boolean> propagate?) 布林值

如果特定事件類型有任何附加的監聽器,則返回 true。驗證可以選擇性地傳播,如果父級附加了監聽器,則它將返回 true

once() this

行為類似於 on(…),除了監聽器只會被觸發一次,然後被移除。

addEventParent(<Evented> obj) this

添加一個事件父級 — 一個 Evented,它將接收傳播的事件

removeEventParent(<Evented> obj) this

移除一個事件父級,因此它將停止接收傳播的事件

addEventListener() this

on(…) 的別名

removeEventListener() this

off(…) 的別名

clearAllEventListeners() this

off() 的別名

addOneTimeEventListener() this

once(…) 的別名

fireEvent() this

fire(…) 的別名

hasEventListeners() 布林值

listens(…) 的別名

屬性

互動處理常式

互動處理常式是標記實例的屬性,可讓您在執行階段控制互動行為,啟用或停用某些功能,例如拖曳(請參閱 Handler 方法)。範例
marker.dragging.disable();
屬性 類型 描述
dragging 處理器 標記拖曳處理常式(透過滑鼠和觸控)。僅當標記在地圖上時才有效(否則設定 marker.options.draggable)。

DivOverlay

L.Popup 和 L.Tooltip 的基礎模型。從它繼承用於自訂覆蓋(如外掛程式)。

選項

選項 類型 預設值 描述
interactive 布林值 false 如果為 true,則彈出視窗/工具提示將會接聽滑鼠事件。
offset Point 點 (0, 0) 覆蓋位置的偏移量。
className 字串 '' 要指派給覆蓋的自訂 CSS 類別名稱。
pane 字串 未定義 將新增覆蓋的 地圖窗格
content 字串|HTMLElement|Function '' 在初始化時設定覆蓋的 HTML 內容。如果傳遞函數,則來源圖層將會傳遞至該函數。該函數應傳回要在覆蓋中使用的 StringHTMLElement
選項 類型 預設值 描述
bubblingMouseEvents 布林值 true 當為 true 時,此圖層上的滑鼠事件將會在該地圖上觸發相同的事件(除非使用 L.DomEvent.stopPropagation)。
選項 類型 預設值 描述
attribution 字串 null 要在貢獻者控制項中顯示的字串,例如「© OpenStreetMap 貢獻者」。它描述圖層資料,並且通常是對版權所有者和圖磚提供者的法律義務。

事件

DivOverlay 事件

事件 資料 描述
contentupdate 事件 當覆蓋的內容更新時觸發
事件 資料 描述
click MouseEvent 當使用者點擊(或輕觸)圖層時觸發。
dblclick MouseEvent 當使用者在圖層上雙擊(或雙輕觸)時觸發。
mousedown MouseEvent 當使用者在圖層上按下滑鼠按鈕時觸發。
mouseup MouseEvent 當使用者釋放在圖層上按下的滑鼠按鈕時觸發。
mouseover MouseEvent 當滑鼠進入圖層時觸發。
mouseout MouseEvent 當滑鼠離開圖層時觸發。
contextmenu MouseEvent 當使用者在圖層上按下滑鼠右鍵時觸發,如果此事件上有接聽程式,則會阻止顯示預設的瀏覽器上下文功能表。當使用者按住單次觸摸一秒鐘時(也稱為長按),也會在行動裝置上觸發。
事件 資料 描述
add 事件 將圖層新增至地圖後觸發
remove 事件 將圖層從地圖移除後觸發
事件 資料 描述
popupopen PopupEvent 當繫結至此圖層的彈出視窗開啟時觸發
popupclose PopupEvent 當繫結至此圖層的彈出視窗關閉時觸發
事件 資料 描述
tooltipopen TooltipEvent 當繫結至此圖層的工具提示開啟時觸發。
tooltipclose TooltipEvent 當繫結至此圖層的工具提示關閉時觸發。

方法

方法 回傳值 描述
openOn(<地圖> map) this

將覆蓋新增至地圖。替代方法為 map.openPopup(popup)/.openTooltip(tooltip)

close() this

關閉覆蓋。替代方法為 map.closePopup(popup)/.closeTooltip(tooltip)layer.closePopup()/.closeTooltip()

toggle(<Layer> layer?) this

根據其目前狀態開啟或關閉繫結至圖層的覆蓋。引數可以僅針對繫結至圖層的覆蓋省略。替代方法為 layer.togglePopup()/.toggleTooltip()

getLatLng() LatLng

傳回覆蓋的地理位置點。

setLatLng(<LatLng> latlng) this

設定覆蓋將會開啟的地理位置點。

getContent() 字串|HTMLElement

傳回覆蓋的內容。

setContent(<字串|HTMLElement|Function> htmlContent) this

設定覆蓋的 HTML 內容。如果傳遞函數,則來源圖層將會傳遞至該函數。該函數應傳回要在覆蓋中使用的 StringHTMLElement

getElement() 字串|HTMLElement

傳回覆蓋的 HTML 容器。

update() null

更新覆蓋內容、版面配置和位置。在內部變更某些內容(例如,影像已載入)之後更新覆蓋時很有用。

isOpen() 布林值

當覆蓋在地圖上可見時,傳回 true

bringToFront() this

將此覆蓋帶到其他覆蓋的前面(在相同的地圖窗格中)。

bringToBack() this

將此覆蓋帶到其他覆蓋的後面(在相同的地圖窗格中)。

方法 回傳值 描述
addTo(<Map|LayerGroup> map) this

將圖層新增至給定的地圖或圖層群組。

remove() this

從目前活動的地圖中移除圖層。

removeFrom(<地圖> map) this

從給定的地圖移除圖層

removeFrom(<LayerGroup> group) this

從給定的 LayerGroup 移除圖層

getPane(<字串> name?) HTMLElement

傳回代表地圖上具名窗格的 HTMLElement。如果省略 name,則傳回此圖層的窗格。

getAttribution() 字串

貢獻者控制項 使用,傳回 貢獻者選項

方法 回傳值 描述
bindPopup(<字串|HTMLElement|Function|Popup> content, <Popup options> options?) this

使用傳遞的 content 將彈出視窗繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindPopup() this

移除先前使用 bindPopup 繫結的彈出視窗。

openPopup(<LatLng> latlng?) this

在指定的 latlng 或在預設的彈出視窗錨點(如果未傳遞 latlng)開啟繫結的彈出視窗。

closePopup() this

關閉繫結至此圖層的彈出視窗(如果已開啟)。

togglePopup() this

根據其目前狀態開啟或關閉繫結至此圖層的彈出視窗。

isPopupOpen() 布林值

如果繫結至此圖層的彈出視窗目前已開啟,則傳回 true

setPopupContent(<字串|HTMLElement|Popup> content) this

設定繫結至此圖層的彈出視窗內容。

getPopup() 彈出視窗

傳回繫結至此圖層的彈出視窗。

方法 回傳值 描述
bindTooltip(<字串|HTMLElement|Function|Tooltip> content, <Tooltip options> options?) this

使用傳遞的 content 將工具提示繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindTooltip() this

移除先前使用 bindTooltip 繫結的工具提示。

openTooltip(<LatLng> latlng?) this

在指定的 latlng 或在預設的工具提示錨點(如果未傳遞 latlng)開啟繫結的工具提示。

closeTooltip() this

關閉繫結至此圖層的工具提示(如果已開啟)。

toggleTooltip() this

根據其目前狀態開啟或關閉繫結至此圖層的工具提示。

isTooltipOpen() 布林值

如果繫結至此圖層的工具提示目前已開啟,則傳回 true

setTooltipContent(<字串|HTMLElement|Tooltip> content) this

設定繫結至此圖層的工具提示內容。

getTooltip() 提示

傳回繫結至此圖層的工具提示。

方法 回傳值 描述
on(<字串> type, <Function> fn, <Object> context?) this

將一個監聽器函數 (fn) 添加到物件的特定事件類型。您可以選擇性地指定監聽器的上下文(this 關鍵字將指向的物件)。您還可以傳遞幾個以空格分隔的類型(例如,'click dblclick')。

on(<Object> eventMap) this

添加一組類型/監聽器配對,例如 {click: onClick, mousemove: onMouseMove}

off(<字串> type, <Function> fn?, <Object> context?) this

移除先前添加的監聽器函數。如果沒有指定函數,它將從物件中移除該特定事件的所有監聽器。請注意,如果您將自定義上下文傳遞給 on,則必須將相同的上下文傳遞給 off 才能移除監聽器。

off(<Object> eventMap) this

移除一組類型/監聽器配對。

off() this

移除物件上所有事件的所有監聽器。這包括隱式附加的事件。

fire(<字串> type, <Object> data?, <Boolean> propagate?) this

觸發指定類型的事件。您可以選擇性地提供資料物件 — 監聽器函數的第一個參數將包含其屬性。事件可以選擇性地傳播到事件父級。

listens(<字串> type, <Boolean> propagate?) 布林值

如果特定事件類型有任何附加的監聽器,則返回 true。驗證可以選擇性地傳播,如果父級附加了監聽器,則它將返回 true

once() this

行為類似於 on(…),除了監聽器只會被觸發一次,然後被移除。

addEventParent(<Evented> obj) this

添加一個事件父級 — 一個 Evented,它將接收傳播的事件

removeEventParent(<Evented> obj) this

移除一個事件父級,因此它將停止接收傳播的事件

addEventListener() this

on(…) 的別名

removeEventListener() this

off(…) 的別名

clearAllEventListeners() this

off() 的別名

addOneTimeEventListener() this

once(…) 的別名

fireEvent() this

fire(…) 的別名

hasEventListeners() 布林值

listens(…) 的別名

用於在地圖的特定位置開啟彈出視窗。使用 Map.openPopup 開啟彈出視窗,同時確保一次只開啟一個彈出視窗(建議使用性),或使用 Map.addLayer 開啟任意多個彈出視窗。

如果您只想將彈出視窗繫結至標記點擊,然後開啟它,這非常容易

marker.bindPopup(popupContent).openPopup();

折線等路徑覆蓋也具有 bindPopup 方法。

彈出視窗也可以是獨立的

var popup = L.popup()
	.setLatLng(latlng)
	.setContent('<p>Hello world!<br />This is a nice popup.</p>')
	.openOn(map);

var popup = L.popup(latlng, {content: '<p>Hello world!<br />This is a nice popup.</p>'})
	.openOn(map);
工廠 描述
選項 類型 預設值 描述
選項 類型 預設值 描述
選項 類型 預設值 描述
選項 類型 預設值 描述

事件

事件 資料 描述
事件 資料 描述
事件 資料 描述
事件 資料 描述
事件 資料 描述
方法 回傳值 描述
方法 回傳值 描述
方法 回傳值 描述
方法 回傳值 描述
方法 回傳值 描述
方法 回傳值 描述

提示

用於在地圖圖層上方顯示小文字。

使用範例

如果您只想將工具提示繫結到標記

marker.bindTooltip("my tooltip text").openTooltip();

路徑覆蓋層(如折線)也具有 bindTooltip 方法。

工具提示也可以獨立存在

var tooltip = L.tooltip()
	.setLatLng(latlng)
	.setContent('Hello world!<br />This is a nice tooltip.')
	.addTo(map);

var tooltip = L.tooltip(latlng, {content: 'Hello world!<br />This is a nice tooltip.'})
	.addTo(map);

關於工具提示偏移量的注意事項。Leaflet 會考慮兩個選項來計算工具提示偏移量

  • offset 工具提示選項:預設為 [0, 0],且特定於一個工具提示。新增正的 x 偏移量可將工具提示向右移動,新增正的 y 偏移量可將其向下移動。負值會將其向左和向上移動。
  • tooltipAnchor 圖示選項:這只會針對標記來考量。如果您使用自訂圖示,則應調整此值。

建立

工廠 描述
L.tooltip(<Tooltip options> options?, <Layer> source?) 根據可選的 options 物件(描述其外觀和位置)以及可選的 source 物件(用於將工具提示標記為參考其所屬的圖層),實例化一個 Tooltip 物件。
L.tooltip(<LatLng> latlng, <Tooltip options> options?) 根據 latlng (工具提示將開啟的位置)以及可選的 options 物件(描述其外觀和位置),實例化一個 Tooltip 物件。

選項

選項 類型 預設值 描述
pane 字串 'tooltipPane' 將工具提示新增到的 地圖窗格
offset Point 點 (0, 0) 工具提示位置的可選偏移量。
direction 字串 'auto' 開啟工具提示的方向。可能的值為:rightlefttopbottomcenterautoauto 會根據工具提示在地圖上的位置,在 rightleft 之間動態切換。
permanent 布林值 false 是否永久開啟工具提示,或僅在滑鼠移入時開啟。
sticky 布林值 false 如果為 true,則工具提示會追隨滑鼠,而不是固定在特徵中心。
opacity 數字 0.9 工具提示容器的不透明度。
選項 類型 預設值 描述
interactive 布林值 false 如果為 true,則彈出視窗/工具提示將會接聽滑鼠事件。
className 字串 '' 要指派給覆蓋的自訂 CSS 類別名稱。
content 字串|HTMLElement|Function '' 在初始化時設定覆蓋的 HTML 內容。如果傳遞函數,則來源圖層將會傳遞至該函數。該函數應傳回要在覆蓋中使用的 StringHTMLElement
選項 類型 預設值 描述
bubblingMouseEvents 布林值 true 當為 true 時,此圖層上的滑鼠事件將會在該地圖上觸發相同的事件(除非使用 L.DomEvent.stopPropagation)。
選項 類型 預設值 描述
attribution 字串 null 要在貢獻者控制項中顯示的字串,例如「© OpenStreetMap 貢獻者」。它描述圖層資料,並且通常是對版權所有者和圖磚提供者的法律義務。

事件

事件 資料 描述
contentupdate 事件 當覆蓋的內容更新時觸發
事件 資料 描述
click MouseEvent 當使用者點擊(或輕觸)圖層時觸發。
dblclick MouseEvent 當使用者在圖層上雙擊(或雙輕觸)時觸發。
mousedown MouseEvent 當使用者在圖層上按下滑鼠按鈕時觸發。
mouseup MouseEvent 當使用者釋放在圖層上按下的滑鼠按鈕時觸發。
mouseover MouseEvent 當滑鼠進入圖層時觸發。
mouseout MouseEvent 當滑鼠離開圖層時觸發。
contextmenu MouseEvent 當使用者在圖層上按下滑鼠右鍵時觸發,如果此事件上有接聽程式,則會阻止顯示預設的瀏覽器上下文功能表。當使用者按住單次觸摸一秒鐘時(也稱為長按),也會在行動裝置上觸發。
事件 資料 描述
add 事件 將圖層新增至地圖後觸發
remove 事件 將圖層從地圖移除後觸發
事件 資料 描述
popupopen PopupEvent 當繫結至此圖層的彈出視窗開啟時觸發
popupclose PopupEvent 當繫結至此圖層的彈出視窗關閉時觸發
事件 資料 描述
tooltipopen TooltipEvent 當繫結至此圖層的工具提示開啟時觸發。
tooltipclose TooltipEvent 當繫結至此圖層的工具提示關閉時觸發。

方法

方法 回傳值 描述
openOn(<地圖> map) this

將覆蓋新增至地圖。替代方法為 map.openPopup(popup)/.openTooltip(tooltip)

close() this

關閉覆蓋。替代方法為 map.closePopup(popup)/.closeTooltip(tooltip)layer.closePopup()/.closeTooltip()

toggle(<Layer> layer?) this

根據其目前狀態開啟或關閉繫結至圖層的覆蓋。引數可以僅針對繫結至圖層的覆蓋省略。替代方法為 layer.togglePopup()/.toggleTooltip()

getLatLng() LatLng

傳回覆蓋的地理位置點。

setLatLng(<LatLng> latlng) this

設定覆蓋將會開啟的地理位置點。

getContent() 字串|HTMLElement

傳回覆蓋的內容。

setContent(<字串|HTMLElement|Function> htmlContent) this

設定覆蓋的 HTML 內容。如果傳遞函數,則來源圖層將會傳遞至該函數。該函數應傳回要在覆蓋中使用的 StringHTMLElement

getElement() 字串|HTMLElement

傳回覆蓋的 HTML 容器。

update() null

更新覆蓋內容、版面配置和位置。在內部變更某些內容(例如,影像已載入)之後更新覆蓋時很有用。

isOpen() 布林值

當覆蓋在地圖上可見時,傳回 true

bringToFront() this

將此覆蓋帶到其他覆蓋的前面(在相同的地圖窗格中)。

bringToBack() this

將此覆蓋帶到其他覆蓋的後面(在相同的地圖窗格中)。

方法 回傳值 描述
addTo(<Map|LayerGroup> map) this

將圖層新增至給定的地圖或圖層群組。

remove() this

從目前活動的地圖中移除圖層。

removeFrom(<地圖> map) this

從給定的地圖移除圖層

removeFrom(<LayerGroup> group) this

從給定的 LayerGroup 移除圖層

getPane(<字串> name?) HTMLElement

傳回代表地圖上具名窗格的 HTMLElement。如果省略 name,則傳回此圖層的窗格。

getAttribution() 字串

貢獻者控制項 使用,傳回 貢獻者選項

方法 回傳值 描述
bindPopup(<字串|HTMLElement|Function|Popup> content, <Popup options> options?) this

使用傳遞的 content 將彈出視窗繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindPopup() this

移除先前使用 bindPopup 繫結的彈出視窗。

openPopup(<LatLng> latlng?) this

在指定的 latlng 或在預設的彈出視窗錨點(如果未傳遞 latlng)開啟繫結的彈出視窗。

closePopup() this

關閉繫結至此圖層的彈出視窗(如果已開啟)。

togglePopup() this

根據其目前狀態開啟或關閉繫結至此圖層的彈出視窗。

isPopupOpen() 布林值

如果繫結至此圖層的彈出視窗目前已開啟,則傳回 true

setPopupContent(<字串|HTMLElement|Popup> content) this

設定繫結至此圖層的彈出視窗內容。

getPopup() 彈出視窗

傳回繫結至此圖層的彈出視窗。

方法 回傳值 描述
bindTooltip(<字串|HTMLElement|Function|Tooltip> content, <Tooltip options> options?) this

使用傳遞的 content 將工具提示繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindTooltip() this

移除先前使用 bindTooltip 繫結的工具提示。

openTooltip(<LatLng> latlng?) this

在指定的 latlng 或在預設的工具提示錨點(如果未傳遞 latlng)開啟繫結的工具提示。

closeTooltip() this

關閉繫結至此圖層的工具提示(如果已開啟)。

toggleTooltip() this

根據其目前狀態開啟或關閉繫結至此圖層的工具提示。

isTooltipOpen() 布林值

如果繫結至此圖層的工具提示目前已開啟,則傳回 true

setTooltipContent(<字串|HTMLElement|Tooltip> content) this

設定繫結至此圖層的工具提示內容。

getTooltip() 提示

傳回繫結至此圖層的工具提示。

方法 回傳值 描述
on(<字串> type, <Function> fn, <Object> context?) this

將一個監聽器函數 (fn) 添加到物件的特定事件類型。您可以選擇性地指定監聽器的上下文(this 關鍵字將指向的物件)。您還可以傳遞幾個以空格分隔的類型(例如,'click dblclick')。

on(<Object> eventMap) this

添加一組類型/監聽器配對,例如 {click: onClick, mousemove: onMouseMove}

off(<字串> type, <Function> fn?, <Object> context?) this

移除先前添加的監聽器函數。如果沒有指定函數,它將從物件中移除該特定事件的所有監聽器。請注意,如果您將自定義上下文傳遞給 on,則必須將相同的上下文傳遞給 off 才能移除監聽器。

off(<Object> eventMap) this

移除一組類型/監聽器配對。

off() this

移除物件上所有事件的所有監聽器。這包括隱式附加的事件。

fire(<字串> type, <Object> data?, <Boolean> propagate?) this

觸發指定類型的事件。您可以選擇性地提供資料物件 — 監聽器函數的第一個參數將包含其屬性。事件可以選擇性地傳播到事件父級。

listens(<字串> type, <Boolean> propagate?) 布林值

如果特定事件類型有任何附加的監聽器,則返回 true。驗證可以選擇性地傳播,如果父級附加了監聽器,則它將返回 true

once() this

行為類似於 on(…),除了監聽器只會被觸發一次,然後被移除。

addEventParent(<Evented> obj) this

添加一個事件父級 — 一個 Evented,它將接收傳播的事件

removeEventParent(<Evented> obj) this

移除一個事件父級,因此它將停止接收傳播的事件

addEventListener() this

on(…) 的別名

removeEventListener() this

off(…) 的別名

clearAllEventListeners() this

off() 的別名

addOneTimeEventListener() this

once(…) 的別名

fireEvent() this

fire(…) 的別名

hasEventListeners() 布林值

listens(…) 的別名

TileLayer

用於在地圖上載入和顯示圖磚圖層。請注意,大多數圖磚伺服器都需要歸屬,您可以在 Layer 下方進行設定。擴充 GridLayer

使用範例

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}', {foo: 'bar', attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);

URL 範本

具有以下形式的字串

'https://{s}.somedomain.com/blabla/{z}/{x}/{y}{r}.png'

{s} 表示其中一個可用的子網域(依序使用以協助每個網域的瀏覽器並行請求限制;子網域值在選項中指定;預設為 abc,可以省略),{z} — 縮放層級,{x}{y} — 圖磚座標。可以使用 {r} 將 "@2x" 新增到 URL 以載入視網膜圖磚。

您可以在範本中使用自訂鍵,這些鍵將從 TileLayer 選項中 評估,例如

L.tileLayer('https://{s}.somedomain.com/{foo}/{z}/{x}/{y}.png', {foo: 'bar'});

建立

擴充方法

工廠 描述
L.tilelayer(<字串> urlTemplate, <TileLayer 選項> options?) 根據 URL 範本 和可選的選項物件,實例化圖磚圖層物件。

選項

選項 類型 預設值 描述
minZoom 數字 0 將顯示此圖層的最小縮放層級(包含)。
maxZoom 數字 18 將顯示此圖層的最大縮放層級(包含)。
subdomains 字串|字串[] 'abc' 圖磚服務的子網域。可以以一個字串的形式傳遞(其中每個字母都是子網域名稱)或以字串陣列的形式傳遞。
errorTileUrl 字串 '' 用於顯示無法載入的圖磚的圖磚影像 URL。
zoomOffset 數字 0 圖磚 URL 中使用的縮放編號將使用此值進行偏移。
tms 布林值 false 如果為 true,則反轉圖磚的 Y 軸編號(針對 TMS 服務開啟此設定)。
zoomReverse 布林值 false 如果設定為 true,則圖磚 URL 中使用的縮放編號將反轉(maxZoom - zoom 而不是 zoom
detectRetina 布林值 false 如果為 true 且使用者位於視網膜螢幕上,它會請求四個指定大小一半的圖磚,並以更大的縮放層級取代一個圖磚,以利用高解析度。
crossOrigin 布林值|字串 false 是否將 crossOrigin 屬性新增到圖磚。如果提供字串,則所有圖磚的 crossOrigin 屬性都將設定為提供的字串。如果您想要存取圖磚像素資料,則需要此屬性。如需有效的字串值,請參閱 CORS 設定
referrerPolicy 布林值|字串 false 是否將 referrerPolicy 屬性新增到圖磚。如果提供字串,則所有圖磚的 referrerPolicy 屬性都將設定為提供的字串。如果地圖的轉譯內容具有嚴格的預設值,但您的圖磚供應商需要有效的參照位址(例如,驗證 API 權杖),則可能需要此屬性。如需有效的字串值,請參閱 HTMLImageElement.referrerPolicy
選項 類型 預設值 描述
tileSize 數字|Point 256 網格中圖磚的寬度和高度。如果寬度和高度相等,則使用數字,否則使用 L.point(width, height)
opacity 數字 1.0 圖磚的不透明度。可以在 createTile() 函數中使用。
updateWhenIdle 布林值 (相依) 僅在平移結束時載入新圖磚。在行動瀏覽器上預設為 true,以避免過多請求並保持流暢的導覽。否則為 false,以便在平移期間顯示新圖磚,因為在桌上型電腦瀏覽器中,很容易在 keepBuffer 選項之外平移。
updateWhenZooming 布林值 true 預設情況下,平滑縮放動畫(在 觸控縮放flyTo() 期間)將每當達到整數縮放層級時更新網格圖層。將此選項設定為 false 將僅在平滑動畫結束時更新網格圖層。
updateInterval 數字 200 平移時,圖磚的更新頻率不會超過每 updateInterval 毫秒一次。
zIndex 數字 1 圖磚圖層的明確 zIndex。
bounds LatLngBounds 未定義 如果設定,則圖磚只會在設定的 LatLngBounds 內載入。
maxNativeZoom 數字 未定義 圖磚來源可用的最大縮放編號。如果已指定,則所有高於 maxNativeZoom 層級的縮放層級上的圖磚都將從 maxNativeZoom 層級載入並自動縮放。
minNativeZoom 數字 未定義 圖磚來源可用的最小縮放編號。如果已指定,則所有低於 minNativeZoom 層級的縮放層級上的圖磚都將從 minNativeZoom 層級載入並自動縮放。
noWrap 布林值 false 圖層是否環繞子午線。如果為 true,則 GridLayer 只會在低縮放層級顯示一次。當 地圖 CRS 不環繞時沒有效果。可以與 bounds 結合使用,以防止請求 CRS 限制之外的圖磚。
pane 字串 'tilePane' 將網格圖層新增到的 地圖窗格
className 字串 '' 要指派給圖磚圖層的自訂類別名稱。預設為空。
keepBuffer 數字 2 平移地圖時,在卸載圖磚之前,保留這麼多列和行的圖磚。
選項 類型 預設值 描述
attribution 字串 null 要在貢獻者控制項中顯示的字串,例如「© OpenStreetMap 貢獻者」。它描述圖層資料,並且通常是對版權所有者和圖磚提供者的法律義務。

事件

擴充方法

事件 資料 描述
tileabort TileEvent 當圖磚正在載入但現在不需要時觸發。
事件 資料 描述
loading 事件 當網格圖層開始載入圖磚時觸發。
tileunload TileEvent 當圖磚被移除時觸發(例如,當圖磚移出螢幕時)。
tileloadstart TileEvent 當請求圖磚並開始載入時觸發。
tileerror TileErrorEvent 當載入圖磚時發生錯誤時觸發。
tileload TileEvent 當圖磚載入時觸發。
load 事件 當網格圖層載入所有可見的圖磚時觸發。
事件 資料 描述
add 事件 將圖層新增至地圖後觸發
remove 事件 將圖層從地圖移除後觸發
事件 資料 描述
popupopen PopupEvent 當繫結至此圖層的彈出視窗開啟時觸發
popupclose PopupEvent 當繫結至此圖層的彈出視窗關閉時觸發
事件 資料 描述
tooltipopen TooltipEvent 當繫結至此圖層的工具提示開啟時觸發。
tooltipclose TooltipEvent 當繫結至此圖層的工具提示關閉時觸發。

方法

方法 回傳值 描述
setUrl(<字串> url, <Boolean> noRedraw?) this

更新圖層的 URL 範本並重新繪製(除非 noRedraw 設定為 true)。如果 URL 沒有變更,除非 noRedraw 參數設定為 false,否則圖層不會重新繪製。

createTile(<Object> coords, <Function> done?) HTMLElement

僅在內部呼叫,覆寫 GridLayer 的 createTile() 以返回一個 <img> HTML 元素,其中包含給定 coords 的適當圖片 URL。當圖磚載入完成時,會呼叫 done 回呼函式。

擴充方法

擴展 TileLayer 的圖層可能會重新實作以下方法。
方法 回傳值 描述
getTileUrl(<Object> coords) 字串

僅在內部呼叫,返回給定座標的圖磚 URL。擴展 TileLayer 的類別可以覆寫此函式,以提供自訂圖磚 URL 命名方式。

方法 回傳值 描述
bringToFront() this

將圖磚圖層帶到所有圖磚圖層的最上層。

bringToBack() this

將圖磚圖層帶到所有圖磚圖層的最底層。

getContainer() HTMLElement

返回包含此圖層圖磚的 HTML 元素。

setOpacity(<Number> opacity) this

變更網格圖層的 不透明度

setZIndex(<Number> zIndex) this

變更網格圖層的 zIndex

isLoading() 布林值

如果網格圖層中有任何圖磚尚未完成載入,則返回 true

redraw() this

導致圖層清除所有圖磚並再次請求它們。

getTileSize() Point

tileSize 選項正規化為一個點。由 createTile() 方法使用。

方法 回傳值 描述
addTo(<Map|LayerGroup> map) this

將圖層新增至給定的地圖或圖層群組。

remove() this

從目前活動的地圖中移除圖層。

removeFrom(<地圖> map) this

從給定的地圖移除圖層

removeFrom(<LayerGroup> group) this

從給定的 LayerGroup 移除圖層

getPane(<字串> name?) HTMLElement

傳回代表地圖上具名窗格的 HTMLElement。如果省略 name,則傳回此圖層的窗格。

getAttribution() 字串

貢獻者控制項 使用,傳回 貢獻者選項

方法 回傳值 描述
bindPopup(<字串|HTMLElement|Function|Popup> content, <Popup options> options?) this

使用傳遞的 content 將彈出視窗繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindPopup() this

移除先前使用 bindPopup 繫結的彈出視窗。

openPopup(<LatLng> latlng?) this

在指定的 latlng 或在預設的彈出視窗錨點(如果未傳遞 latlng)開啟繫結的彈出視窗。

closePopup() this

關閉繫結至此圖層的彈出視窗(如果已開啟)。

togglePopup() this

根據其目前狀態開啟或關閉繫結至此圖層的彈出視窗。

isPopupOpen() 布林值

如果繫結至此圖層的彈出視窗目前已開啟,則傳回 true

setPopupContent(<字串|HTMLElement|Popup> content) this

設定繫結至此圖層的彈出視窗內容。

getPopup() 彈出視窗

傳回繫結至此圖層的彈出視窗。

方法 回傳值 描述
bindTooltip(<字串|HTMLElement|Function|Tooltip> content, <Tooltip options> options?) this

使用傳遞的 content 將工具提示繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindTooltip() this

移除先前使用 bindTooltip 繫結的工具提示。

openTooltip(<LatLng> latlng?) this

在指定的 latlng 或在預設的工具提示錨點(如果未傳遞 latlng)開啟繫結的工具提示。

closeTooltip() this

關閉繫結至此圖層的工具提示(如果已開啟)。

toggleTooltip() this

根據其目前狀態開啟或關閉繫結至此圖層的工具提示。

isTooltipOpen() 布林值

如果繫結至此圖層的工具提示目前已開啟,則傳回 true

setTooltipContent(<字串|HTMLElement|Tooltip> content) this

設定繫結至此圖層的工具提示內容。

getTooltip() 提示

傳回繫結至此圖層的工具提示。

方法 回傳值 描述
on(<字串> type, <Function> fn, <Object> context?) this

將一個監聽器函數 (fn) 添加到物件的特定事件類型。您可以選擇性地指定監聽器的上下文(this 關鍵字將指向的物件)。您還可以傳遞幾個以空格分隔的類型(例如,'click dblclick')。

on(<Object> eventMap) this

添加一組類型/監聽器配對,例如 {click: onClick, mousemove: onMouseMove}

off(<字串> type, <Function> fn?, <Object> context?) this

移除先前添加的監聽器函數。如果沒有指定函數,它將從物件中移除該特定事件的所有監聽器。請注意,如果您將自定義上下文傳遞給 on,則必須將相同的上下文傳遞給 off 才能移除監聽器。

off(<Object> eventMap) this

移除一組類型/監聽器配對。

off() this

移除物件上所有事件的所有監聽器。這包括隱式附加的事件。

fire(<字串> type, <Object> data?, <Boolean> propagate?) this

觸發指定類型的事件。您可以選擇性地提供資料物件 — 監聽器函數的第一個參數將包含其屬性。事件可以選擇性地傳播到事件父級。

listens(<字串> type, <Boolean> propagate?) 布林值

如果特定事件類型有任何附加的監聽器,則返回 true。驗證可以選擇性地傳播,如果父級附加了監聽器,則它將返回 true

once() this

行為類似於 on(…),除了監聽器只會被觸發一次,然後被移除。

addEventParent(<Evented> obj) this

添加一個事件父級 — 一個 Evented,它將接收傳播的事件

removeEventParent(<Evented> obj) this

移除一個事件父級,因此它將停止接收傳播的事件

addEventListener() this

on(…) 的別名

removeEventListener() this

off(…) 的別名

clearAllEventListeners() this

off() 的別名

addOneTimeEventListener() this

once(…) 的別名

fireEvent() this

fire(…) 的別名

hasEventListeners() 布林值

listens(…) 的別名

TileLayer.WMS

用於在地圖上將 WMS 服務顯示為圖磚圖層。擴展 TileLayer

使用範例

var nexrad = L.tileLayer.wms("http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi", {
	layers: 'nexrad-n0r-900913',
	format: 'image/png',
	transparent: true,
	attribution: "Weather data © 2012 IEM Nexrad"
});

建立

工廠 描述
L.tileLayer.wms(<字串> baseUrl, <TileLayer.WMS 選項> options) 根據 WMS 服務的基本 URL 和 WMS 參數/選項物件,實例化一個 WMS 圖磚圖層物件。

選項

如果使用此處未記錄的任何自訂選項,它們將在每個請求 URL 中作為額外參數傳送至 WMS 伺服器。這對於非標準供應商 WMS 參數可能很有用。
選項 類型 預設值 描述
layers 字串 '' (必填)以逗號分隔的要顯示的 WMS 圖層清單。
styles 字串 '' 以逗號分隔的 WMS 樣式清單。
format 字串 'image/jpeg' WMS 圖片格式(對於具有透明度的圖層,請使用 'image/png')。
transparent 布林值 false 如果為 true,WMS 服務將返回具有透明度的圖片。
版本 字串 '1.1.1' 要使用的 WMS 服務版本
crs CRS null 用於 WMS 請求的座標參考系統,預設為地圖 CRS。如果您不確定這代表什麼,請勿變更此設定。
uppercase 布林值 false 如果為 true,WMS 請求參數金鑰將為大寫。
選項 類型 預設值 描述
minZoom 數字 0 將顯示此圖層的最小縮放層級(包含)。
maxZoom 數字 18 將顯示此圖層的最大縮放層級(包含)。
subdomains 字串|字串[] 'abc' 圖磚服務的子網域。可以以一個字串的形式傳遞(其中每個字母都是子網域名稱)或以字串陣列的形式傳遞。
errorTileUrl 字串 '' 用於顯示無法載入的圖磚的圖磚影像 URL。
zoomOffset 數字 0 圖磚 URL 中使用的縮放編號將使用此值進行偏移。
tms 布林值 false 如果為 true,則反轉圖磚的 Y 軸編號(針對 TMS 服務開啟此設定)。
zoomReverse 布林值 false 如果設定為 true,則圖磚 URL 中使用的縮放編號將反轉(maxZoom - zoom 而不是 zoom
detectRetina 布林值 false 如果為 true 且使用者位於視網膜螢幕上,它會請求四個指定大小一半的圖磚,並以更大的縮放層級取代一個圖磚,以利用高解析度。
crossOrigin 布林值|字串 false 是否將 crossOrigin 屬性新增到圖磚。如果提供字串,則所有圖磚的 crossOrigin 屬性都將設定為提供的字串。如果您想要存取圖磚像素資料,則需要此屬性。如需有效的字串值,請參閱 CORS 設定
referrerPolicy 布林值|字串 false 是否將 referrerPolicy 屬性新增到圖磚。如果提供字串,則所有圖磚的 referrerPolicy 屬性都將設定為提供的字串。如果地圖的轉譯內容具有嚴格的預設值,但您的圖磚供應商需要有效的參照位址(例如,驗證 API 權杖),則可能需要此屬性。如需有效的字串值,請參閱 HTMLImageElement.referrerPolicy
選項 類型 預設值 描述
tileSize 數字|Point 256 網格中圖磚的寬度和高度。如果寬度和高度相等,則使用數字,否則使用 L.point(width, height)
opacity 數字 1.0 圖磚的不透明度。可以在 createTile() 函數中使用。
updateWhenIdle 布林值 (相依) 僅在平移結束時載入新圖磚。在行動瀏覽器上預設為 true,以避免過多請求並保持流暢的導覽。否則為 false,以便在平移期間顯示新圖磚,因為在桌上型電腦瀏覽器中,很容易在 keepBuffer 選項之外平移。
updateWhenZooming 布林值 true 預設情況下,平滑縮放動畫(在 觸控縮放flyTo() 期間)將每當達到整數縮放層級時更新網格圖層。將此選項設定為 false 將僅在平滑動畫結束時更新網格圖層。
updateInterval 數字 200 平移時,圖磚的更新頻率不會超過每 updateInterval 毫秒一次。
zIndex 數字 1 圖磚圖層的明確 zIndex。
bounds LatLngBounds 未定義 如果設定,則圖磚只會在設定的 LatLngBounds 內載入。
maxNativeZoom 數字 未定義 圖磚來源可用的最大縮放編號。如果已指定,則所有高於 maxNativeZoom 層級的縮放層級上的圖磚都將從 maxNativeZoom 層級載入並自動縮放。
minNativeZoom 數字 未定義 圖磚來源可用的最小縮放編號。如果已指定,則所有低於 minNativeZoom 層級的縮放層級上的圖磚都將從 minNativeZoom 層級載入並自動縮放。
noWrap 布林值 false 圖層是否環繞子午線。如果為 true,則 GridLayer 只會在低縮放層級顯示一次。當 地圖 CRS 不環繞時沒有效果。可以與 bounds 結合使用,以防止請求 CRS 限制之外的圖磚。
pane 字串 'tilePane' 將網格圖層新增到的 地圖窗格
className 字串 '' 要指派給圖磚圖層的自訂類別名稱。預設為空。
keepBuffer 數字 2 平移地圖時,在卸載圖磚之前,保留這麼多列和行的圖磚。
選項 類型 預設值 描述
attribution 字串 null 要在貢獻者控制項中顯示的字串,例如「© OpenStreetMap 貢獻者」。它描述圖層資料,並且通常是對版權所有者和圖磚提供者的法律義務。

事件

事件 資料 描述
tileabort TileEvent 當圖磚正在載入但現在不需要時觸發。
事件 資料 描述
loading 事件 當網格圖層開始載入圖磚時觸發。
tileunload TileEvent 當圖磚被移除時觸發(例如,當圖磚移出螢幕時)。
tileloadstart TileEvent 當請求圖磚並開始載入時觸發。
tileerror TileErrorEvent 當載入圖磚時發生錯誤時觸發。
tileload TileEvent 當圖磚載入時觸發。
load 事件 當網格圖層載入所有可見的圖磚時觸發。
事件 資料 描述
add 事件 將圖層新增至地圖後觸發
remove 事件 將圖層從地圖移除後觸發
事件 資料 描述
popupopen PopupEvent 當繫結至此圖層的彈出視窗開啟時觸發
popupclose PopupEvent 當繫結至此圖層的彈出視窗關閉時觸發
事件 資料 描述
tooltipopen TooltipEvent 當繫結至此圖層的工具提示開啟時觸發。
tooltipclose TooltipEvent 當繫結至此圖層的工具提示關閉時觸發。

方法

方法 回傳值 描述
setParams(<Object> params, <Boolean> noRedraw?) this

合併帶有新參數的物件,並重新請求目前螢幕上的圖磚(除非 noRedraw 設定為 true)。

方法 回傳值 描述
setUrl(<字串> url, <Boolean> noRedraw?) this

更新圖層的 URL 範本並重新繪製(除非 noRedraw 設定為 true)。如果 URL 沒有變更,除非 noRedraw 參數設定為 false,否則圖層不會重新繪製。

createTile(<Object> coords, <Function> done?) HTMLElement

僅在內部呼叫,覆寫 GridLayer 的 createTile() 以返回一個 <img> HTML 元素,其中包含給定 coords 的適當圖片 URL。當圖磚載入完成時,會呼叫 done 回呼函式。

方法 回傳值 描述
bringToFront() this

將圖磚圖層帶到所有圖磚圖層的最上層。

bringToBack() this

將圖磚圖層帶到所有圖磚圖層的最底層。

getContainer() HTMLElement

返回包含此圖層圖磚的 HTML 元素。

setOpacity(<Number> opacity) this

變更網格圖層的 不透明度

setZIndex(<Number> zIndex) this

變更網格圖層的 zIndex

isLoading() 布林值

如果網格圖層中有任何圖磚尚未完成載入,則返回 true

redraw() this

導致圖層清除所有圖磚並再次請求它們。

getTileSize() Point

tileSize 選項正規化為一個點。由 createTile() 方法使用。

方法 回傳值 描述
addTo(<Map|LayerGroup> map) this

將圖層新增至給定的地圖或圖層群組。

remove() this

從目前活動的地圖中移除圖層。

removeFrom(<地圖> map) this

從給定的地圖移除圖層

removeFrom(<LayerGroup> group) this

從給定的 LayerGroup 移除圖層

getPane(<字串> name?) HTMLElement

傳回代表地圖上具名窗格的 HTMLElement。如果省略 name,則傳回此圖層的窗格。

getAttribution() 字串

貢獻者控制項 使用,傳回 貢獻者選項

方法 回傳值 描述
bindPopup(<字串|HTMLElement|Function|Popup> content, <Popup options> options?) this

使用傳遞的 content 將彈出視窗繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindPopup() this

移除先前使用 bindPopup 繫結的彈出視窗。

openPopup(<LatLng> latlng?) this

在指定的 latlng 或在預設的彈出視窗錨點(如果未傳遞 latlng)開啟繫結的彈出視窗。

closePopup() this

關閉繫結至此圖層的彈出視窗(如果已開啟)。

togglePopup() this

根據其目前狀態開啟或關閉繫結至此圖層的彈出視窗。

isPopupOpen() 布林值

如果繫結至此圖層的彈出視窗目前已開啟,則傳回 true

setPopupContent(<字串|HTMLElement|Popup> content) this

設定繫結至此圖層的彈出視窗內容。

getPopup() 彈出視窗

傳回繫結至此圖層的彈出視窗。

方法 回傳值 描述
bindTooltip(<字串|HTMLElement|Function|Tooltip> content, <Tooltip options> options?) this

使用傳遞的 content 將工具提示繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindTooltip() this

移除先前使用 bindTooltip 繫結的工具提示。

openTooltip(<LatLng> latlng?) this

在指定的 latlng 或在預設的工具提示錨點(如果未傳遞 latlng)開啟繫結的工具提示。

closeTooltip() this

關閉繫結至此圖層的工具提示(如果已開啟)。

toggleTooltip() this

根據其目前狀態開啟或關閉繫結至此圖層的工具提示。

isTooltipOpen() 布林值

如果繫結至此圖層的工具提示目前已開啟,則傳回 true

setTooltipContent(<字串|HTMLElement|Tooltip> content) this

設定繫結至此圖層的工具提示內容。

getTooltip() 提示

傳回繫結至此圖層的工具提示。

方法 回傳值 描述
on(<字串> type, <Function> fn, <Object> context?) this

將一個監聽器函數 (fn) 添加到物件的特定事件類型。您可以選擇性地指定監聽器的上下文(this 關鍵字將指向的物件)。您還可以傳遞幾個以空格分隔的類型(例如,'click dblclick')。

on(<Object> eventMap) this

添加一組類型/監聽器配對,例如 {click: onClick, mousemove: onMouseMove}

off(<字串> type, <Function> fn?, <Object> context?) this

移除先前添加的監聽器函數。如果沒有指定函數,它將從物件中移除該特定事件的所有監聽器。請注意,如果您將自定義上下文傳遞給 on,則必須將相同的上下文傳遞給 off 才能移除監聽器。

off(<Object> eventMap) this

移除一組類型/監聽器配對。

off() this

移除物件上所有事件的所有監聽器。這包括隱式附加的事件。

fire(<字串> type, <Object> data?, <Boolean> propagate?) this

觸發指定類型的事件。您可以選擇性地提供資料物件 — 監聽器函數的第一個參數將包含其屬性。事件可以選擇性地傳播到事件父級。

listens(<字串> type, <Boolean> propagate?) 布林值

如果特定事件類型有任何附加的監聽器,則返回 true。驗證可以選擇性地傳播,如果父級附加了監聽器,則它將返回 true

once() this

行為類似於 on(…),除了監聽器只會被觸發一次,然後被移除。

addEventParent(<Evented> obj) this

添加一個事件父級 — 一個 Evented,它將接收傳播的事件

removeEventParent(<Evented> obj) this

移除一個事件父級,因此它將停止接收傳播的事件

addEventListener() this

on(…) 的別名

removeEventListener() this

off(…) 的別名

clearAllEventListeners() this

off() 的別名

addOneTimeEventListener() this

once(…) 的別名

fireEvent() this

fire(…) 的別名

hasEventListeners() 布林值

listens(…) 的別名

ImageOverlay

用於在地圖的特定邊界上載入和顯示單一圖片。擴展 Layer

使用範例

var imageUrl = 'https://maps.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
	imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]];
L.imageOverlay(imageUrl, imageBounds).addTo(map);

建立

工廠 描述
L.imageOverlay(<字串> imageUrl, <LatLngBounds> bounds, <ImageOverlay 選項> options?) 根據圖片的 URL 和其綁定的地理邊界,實例化一個圖片覆蓋物件。

選項

選項 類型 預設值 描述
opacity 數字 1.0 圖片覆蓋的不透明度。
alt 字串 '' 圖片 alt 屬性的文字(對協助工具很有用)。
interactive 布林值 false 如果為 true,圖片覆蓋會在點擊或懸停時發出 滑鼠事件
crossOrigin 布林值|字串 false 是否將 crossOrigin 屬性新增至圖片。如果提供字串,圖片的 crossOrigin 屬性將設定為所提供的字串。如果您想要存取圖片像素資料,則需要這樣做。請參閱 CORS 設定 以取得有效的字串值。
errorOverlayUrl 字串 '' 要顯示的覆蓋圖片的 URL,以取代載入失敗的覆蓋圖片。
zIndex 數字 1 覆蓋圖層的明確 zIndex
className 字串 '' 要指派給圖片的自訂類別名稱。預設為空。
選項 類型 預設值 描述
bubblingMouseEvents 布林值 true 當為 true 時,此圖層上的滑鼠事件將會在該地圖上觸發相同的事件(除非使用 L.DomEvent.stopPropagation)。
選項 類型 預設值 描述
pane 字串 'overlayPane' 預設情況下,圖層將新增至地圖的 覆蓋窗格。覆寫此選項將導致圖層預設放置在另一個窗格上。
attribution 字串 null 要在貢獻者控制項中顯示的字串,例如「© OpenStreetMap 貢獻者」。它描述圖層資料,並且通常是對版權所有者和圖磚提供者的法律義務。

事件

事件 資料 描述
load 事件 當 ImageOverlay 圖層載入其圖片時觸發
error 事件 當 ImageOverlay 圖層無法載入其圖片時觸發
事件 資料 描述
click MouseEvent 當使用者點擊(或輕觸)圖層時觸發。
dblclick MouseEvent 當使用者在圖層上雙擊(或雙輕觸)時觸發。
mousedown MouseEvent 當使用者在圖層上按下滑鼠按鈕時觸發。
mouseup MouseEvent 當使用者釋放在圖層上按下的滑鼠按鈕時觸發。
mouseover MouseEvent 當滑鼠進入圖層時觸發。
mouseout MouseEvent 當滑鼠離開圖層時觸發。
contextmenu MouseEvent 當使用者在圖層上按下滑鼠右鍵時觸發,如果此事件上有接聽程式,則會阻止顯示預設的瀏覽器上下文功能表。當使用者按住單次觸摸一秒鐘時(也稱為長按),也會在行動裝置上觸發。
事件 資料 描述
add 事件 將圖層新增至地圖後觸發
remove 事件 將圖層從地圖移除後觸發
事件 資料 描述
popupopen PopupEvent 當繫結至此圖層的彈出視窗開啟時觸發
popupclose PopupEvent 當繫結至此圖層的彈出視窗關閉時觸發
事件 資料 描述
tooltipopen TooltipEvent 當繫結至此圖層的工具提示開啟時觸發。
tooltipclose TooltipEvent 當繫結至此圖層的工具提示關閉時觸發。

方法

方法 回傳值 描述
setOpacity(<Number> opacity) this

設定覆蓋的不透明度。

bringToFront() this

將圖層帶到所有覆蓋的最上層。

bringToBack() this

將圖層帶到所有覆蓋的最底層。

setUrl(<字串> url) this

變更圖片的 URL。

setBounds(<LatLngBounds> bounds) this

更新此 ImageOverlay 所覆蓋的邊界

setZIndex(<Number> value) this

變更圖片覆蓋的 zIndex

getBounds() LatLngBounds

取得此 ImageOverlay 所覆蓋的邊界

getElement() HTMLElement

返回此覆蓋使用的 HTMLImageElement 實例。

getCenter() LatLng

返回 ImageOverlay 的中心。

方法 回傳值 描述
addTo(<Map|LayerGroup> map) this

將圖層新增至給定的地圖或圖層群組。

remove() this

從目前活動的地圖中移除圖層。

removeFrom(<地圖> map) this

從給定的地圖移除圖層

removeFrom(<LayerGroup> group) this

從給定的 LayerGroup 移除圖層

getPane(<字串> name?) HTMLElement

傳回代表地圖上具名窗格的 HTMLElement。如果省略 name,則傳回此圖層的窗格。

getAttribution() 字串

貢獻者控制項 使用,傳回 貢獻者選項

方法 回傳值 描述
bindPopup(<字串|HTMLElement|Function|Popup> content, <Popup options> options?) this

使用傳遞的 content 將彈出視窗繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindPopup() this

移除先前使用 bindPopup 繫結的彈出視窗。

openPopup(<LatLng> latlng?) this

在指定的 latlng 或在預設的彈出視窗錨點(如果未傳遞 latlng)開啟繫結的彈出視窗。

closePopup() this

關閉繫結至此圖層的彈出視窗(如果已開啟)。

togglePopup() this

根據其目前狀態開啟或關閉繫結至此圖層的彈出視窗。

isPopupOpen() 布林值

如果繫結至此圖層的彈出視窗目前已開啟,則傳回 true

setPopupContent(<字串|HTMLElement|Popup> content) this

設定繫結至此圖層的彈出視窗內容。

getPopup() 彈出視窗

傳回繫結至此圖層的彈出視窗。

方法 回傳值 描述
bindTooltip(<字串|HTMLElement|Function|Tooltip> content, <Tooltip options> options?) this

使用傳遞的 content 將工具提示繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindTooltip() this

移除先前使用 bindTooltip 繫結的工具提示。

openTooltip(<LatLng> latlng?) this

在指定的 latlng 或在預設的工具提示錨點(如果未傳遞 latlng)開啟繫結的工具提示。

closeTooltip() this

關閉繫結至此圖層的工具提示(如果已開啟)。

toggleTooltip() this

根據其目前狀態開啟或關閉繫結至此圖層的工具提示。

isTooltipOpen() 布林值

如果繫結至此圖層的工具提示目前已開啟,則傳回 true

setTooltipContent(<字串|HTMLElement|Tooltip> content) this

設定繫結至此圖層的工具提示內容。

getTooltip() 提示

傳回繫結至此圖層的工具提示。

方法 回傳值 描述
on(<字串> type, <Function> fn, <Object> context?) this

將一個監聽器函數 (fn) 添加到物件的特定事件類型。您可以選擇性地指定監聽器的上下文(this 關鍵字將指向的物件)。您還可以傳遞幾個以空格分隔的類型(例如,'click dblclick')。

on(<Object> eventMap) this

添加一組類型/監聽器配對,例如 {click: onClick, mousemove: onMouseMove}

off(<字串> type, <Function> fn?, <Object> context?) this

移除先前添加的監聽器函數。如果沒有指定函數,它將從物件中移除該特定事件的所有監聽器。請注意,如果您將自定義上下文傳遞給 on,則必須將相同的上下文傳遞給 off 才能移除監聽器。

off(<Object> eventMap) this

移除一組類型/監聽器配對。

off() this

移除物件上所有事件的所有監聽器。這包括隱式附加的事件。

fire(<字串> type, <Object> data?, <Boolean> propagate?) this

觸發指定類型的事件。您可以選擇性地提供資料物件 — 監聽器函數的第一個參數將包含其屬性。事件可以選擇性地傳播到事件父級。

listens(<字串> type, <Boolean> propagate?) 布林值

如果特定事件類型有任何附加的監聽器,則返回 true。驗證可以選擇性地傳播,如果父級附加了監聽器,則它將返回 true

once() this

行為類似於 on(…),除了監聽器只會被觸發一次,然後被移除。

addEventParent(<Evented> obj) this

添加一個事件父級 — 一個 Evented,它將接收傳播的事件

removeEventParent(<Evented> obj) this

移除一個事件父級,因此它將停止接收傳播的事件

addEventListener() this

on(…) 的別名

removeEventListener() this

off(…) 的別名

clearAllEventListeners() this

off() 的別名

addOneTimeEventListener() this

once(…) 的別名

fireEvent() this

fire(…) 的別名

hasEventListeners() 布林值

listens(…) 的別名

VideoOverlay

用於在地圖的特定邊界上載入和顯示影片播放器。擴展 ImageOverlay

影片覆蓋使用 <video> HTML5 元素。

使用範例

var videoUrl = 'https://www.mapbox.com/bites/00188/patricia_nasa.webm',
	videoBounds = [[ 32, -130], [ 13, -100]];
L.videoOverlay(videoUrl, videoBounds ).addTo(map);

建立

工廠 描述
L.videoOverlay(<字串|陣列|HTMLVideoElement> video, <LatLngBounds> bounds, <VideoOverlay 選項> options?) 根據影片的 URL(或 URL 陣列,甚至是影片元素)和其綁定的地理邊界,實例化一個圖片覆蓋物件。

選項

選項 類型 預設值 描述
autoplay 布林值 true 是否在載入時自動開始播放影片。在某些瀏覽器上,自動播放僅在 muted: true 的情況下有效
loop 布林值 true 是否在播放影片時循環回到開頭。
keepAspectRatio 布林值 true 影片是否在投影後保留長寬比。適用於支援的瀏覽器。請參閱瀏覽器相容性
muted 布林值 false 影片在載入時是否會靜音開始。
playsInline 布林值 true 行動瀏覽器將在影片所在位置直接播放影片,而不是以全螢幕模式開啟。
選項 類型 預設值 描述
opacity 數字 1.0 圖片覆蓋的不透明度。
alt 字串 '' 圖片 alt 屬性的文字(對協助工具很有用)。
interactive 布林值 false 如果為 true,圖片覆蓋會在點擊或懸停時發出 滑鼠事件
crossOrigin 布林值|字串 false 是否將 crossOrigin 屬性新增至圖片。如果提供字串,圖片的 crossOrigin 屬性將設定為所提供的字串。如果您想要存取圖片像素資料,則需要這樣做。請參閱 CORS 設定 以取得有效的字串值。
errorOverlayUrl 字串 '' 要顯示的覆蓋圖片的 URL,以取代載入失敗的覆蓋圖片。
zIndex 數字 1 覆蓋圖層的明確 zIndex
className 字串 '' 要指派給圖片的自訂類別名稱。預設為空。
選項 類型 預設值 描述
bubblingMouseEvents 布林值 true 當為 true 時,此圖層上的滑鼠事件將會在該地圖上觸發相同的事件(除非使用 L.DomEvent.stopPropagation)。
選項 類型 預設值 描述
pane 字串 'overlayPane' 預設情況下,圖層將新增至地圖的 覆蓋窗格。覆寫此選項將導致圖層預設放置在另一個窗格上。
attribution 字串 null 要在貢獻者控制項中顯示的字串,例如「© OpenStreetMap 貢獻者」。它描述圖層資料,並且通常是對版權所有者和圖磚提供者的法律義務。

事件

事件 資料 描述
load 事件 當影片完成載入第一個影格時觸發
事件 資料 描述
error 事件 當 ImageOverlay 圖層無法載入其圖片時觸發
事件 資料 描述
click MouseEvent 當使用者點擊(或輕觸)圖層時觸發。
dblclick MouseEvent 當使用者在圖層上雙擊(或雙輕觸)時觸發。
mousedown MouseEvent 當使用者在圖層上按下滑鼠按鈕時觸發。
mouseup MouseEvent 當使用者釋放在圖層上按下的滑鼠按鈕時觸發。
mouseover MouseEvent 當滑鼠進入圖層時觸發。
mouseout MouseEvent 當滑鼠離開圖層時觸發。
contextmenu MouseEvent 當使用者在圖層上按下滑鼠右鍵時觸發,如果此事件上有接聽程式,則會阻止顯示預設的瀏覽器上下文功能表。當使用者按住單次觸摸一秒鐘時(也稱為長按),也會在行動裝置上觸發。
事件 資料 描述
add 事件 將圖層新增至地圖後觸發
remove 事件 將圖層從地圖移除後觸發
事件 資料 描述
popupopen PopupEvent 當繫結至此圖層的彈出視窗開啟時觸發
popupclose PopupEvent 當繫結至此圖層的彈出視窗關閉時觸發
事件 資料 描述
tooltipopen TooltipEvent 當繫結至此圖層的工具提示開啟時觸發。
tooltipclose TooltipEvent 當繫結至此圖層的工具提示關閉時觸發。

方法

方法 回傳值 描述
getElement() HTMLVideoElement

返回此覆蓋使用的 HTMLVideoElement 實例。

方法 回傳值 描述
setOpacity(<Number> opacity) this

設定覆蓋的不透明度。

bringToFront() this

將圖層帶到所有覆蓋的最上層。

bringToBack() this

將圖層帶到所有覆蓋的最底層。

setUrl(<字串> url) this

變更圖片的 URL。

setBounds(<LatLngBounds> bounds) this

更新此 ImageOverlay 所覆蓋的邊界

setZIndex(<Number> value) this

變更圖片覆蓋的 zIndex

getBounds() LatLngBounds

取得此 ImageOverlay 所覆蓋的邊界

getCenter() LatLng

返回 ImageOverlay 的中心。

方法 回傳值 描述
addTo(<Map|LayerGroup> map) this

將圖層新增至給定的地圖或圖層群組。

remove() this

從目前活動的地圖中移除圖層。

removeFrom(<地圖> map) this

從給定的地圖移除圖層

removeFrom(<LayerGroup> group) this

從給定的 LayerGroup 移除圖層

getPane(<字串> name?) HTMLElement

傳回代表地圖上具名窗格的 HTMLElement。如果省略 name,則傳回此圖層的窗格。

getAttribution() 字串

貢獻者控制項 使用,傳回 貢獻者選項

方法 回傳值 描述
bindPopup(<字串|HTMLElement|Function|Popup> content, <Popup options> options?) this

使用傳遞的 content 將彈出視窗繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindPopup() this

移除先前使用 bindPopup 繫結的彈出視窗。

openPopup(<LatLng> latlng?) this

在指定的 latlng 或在預設的彈出視窗錨點(如果未傳遞 latlng)開啟繫結的彈出視窗。

closePopup() this

關閉繫結至此圖層的彈出視窗(如果已開啟)。

togglePopup() this

根據其目前狀態開啟或關閉繫結至此圖層的彈出視窗。

isPopupOpen() 布林值

如果繫結至此圖層的彈出視窗目前已開啟,則傳回 true

setPopupContent(<字串|HTMLElement|Popup> content) this

設定繫結至此圖層的彈出視窗內容。

getPopup() 彈出視窗

傳回繫結至此圖層的彈出視窗。

方法 回傳值 描述
bindTooltip(<字串|HTMLElement|Function|Tooltip> content, <Tooltip options> options?) this

使用傳遞的 content 將工具提示繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindTooltip() this

移除先前使用 bindTooltip 繫結的工具提示。

openTooltip(<LatLng> latlng?) this

在指定的 latlng 或在預設的工具提示錨點(如果未傳遞 latlng)開啟繫結的工具提示。

closeTooltip() this

關閉繫結至此圖層的工具提示(如果已開啟)。

toggleTooltip() this

根據其目前狀態開啟或關閉繫結至此圖層的工具提示。

isTooltipOpen() 布林值

如果繫結至此圖層的工具提示目前已開啟,則傳回 true

setTooltipContent(<字串|HTMLElement|Tooltip> content) this

設定繫結至此圖層的工具提示內容。

getTooltip() 提示

傳回繫結至此圖層的工具提示。

方法 回傳值 描述
on(<字串> type, <Function> fn, <Object> context?) this

將一個監聽器函數 (fn) 添加到物件的特定事件類型。您可以選擇性地指定監聽器的上下文(this 關鍵字將指向的物件)。您還可以傳遞幾個以空格分隔的類型(例如,'click dblclick')。

on(<Object> eventMap) this

添加一組類型/監聽器配對,例如 {click: onClick, mousemove: onMouseMove}

off(<字串> type, <Function> fn?, <Object> context?) this

移除先前添加的監聽器函數。如果沒有指定函數,它將從物件中移除該特定事件的所有監聽器。請注意,如果您將自定義上下文傳遞給 on,則必須將相同的上下文傳遞給 off 才能移除監聽器。

off(<Object> eventMap) this

移除一組類型/監聽器配對。

off() this

移除物件上所有事件的所有監聽器。這包括隱式附加的事件。

fire(<字串> type, <Object> data?, <Boolean> propagate?) this

觸發指定類型的事件。您可以選擇性地提供資料物件 — 監聽器函數的第一個參數將包含其屬性。事件可以選擇性地傳播到事件父級。

listens(<字串> type, <Boolean> propagate?) 布林值

如果特定事件類型有任何附加的監聽器,則返回 true。驗證可以選擇性地傳播,如果父級附加了監聽器,則它將返回 true

once() this

行為類似於 on(…),除了監聽器只會被觸發一次,然後被移除。

addEventParent(<Evented> obj) this

添加一個事件父級 — 一個 Evented,它將接收傳播的事件

removeEventParent(<Evented> obj) this

移除一個事件父級,因此它將停止接收傳播的事件

addEventListener() this

on(…) 的別名

removeEventListener() this

off(…) 的別名

clearAllEventListeners() this

off() 的別名

addOneTimeEventListener() this

once(…) 的別名

fireEvent() this

fire(…) 的別名

hasEventListeners() 布林值

listens(…) 的別名

SVGOverlay

用於在地圖的特定邊界上載入、顯示和提供對 SVG 檔案的 DOM 存取權。擴展 ImageOverlay

SVG 覆蓋使用 <svg> 元素。

使用範例

var svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svgElement.setAttribute('xmlns', "http://www.w3.org/2000/svg");
svgElement.setAttribute('viewBox', "0 0 200 200");
svgElement.innerHTML = '<rect width="200" height="200"/><rect x="75" y="23" width="50" height="50" style="fill:red"/><rect x="75" y="123" width="50" height="50" style="fill:#0013ff"/>';
var svgElementBounds = [ [ 32, -130 ], [ 13, -100 ] ];
L.svgOverlay(svgElement, svgElementBounds).addTo(map);

建立

工廠 描述
L.svgOverlay(<字串|SVGElement> svg, <LatLngBounds> bounds, <SVGOverlay 選項> options?) 根據 SVG 元素和其綁定的地理邊界,實例化一個圖片覆蓋物件。SVG 元素上需要一個 viewBox 屬性才能正確縮放。

選項

選項 類型 預設值 描述
opacity 數字 1.0 圖片覆蓋的不透明度。
alt 字串 '' 圖片 alt 屬性的文字(對協助工具很有用)。
interactive 布林值 false 如果為 true,圖片覆蓋會在點擊或懸停時發出 滑鼠事件
crossOrigin 布林值|字串 false 是否將 crossOrigin 屬性新增至圖片。如果提供字串,圖片的 crossOrigin 屬性將設定為所提供的字串。如果您想要存取圖片像素資料,則需要這樣做。請參閱 CORS 設定 以取得有效的字串值。
errorOverlayUrl 字串 '' 要顯示的覆蓋圖片的 URL,以取代載入失敗的覆蓋圖片。
zIndex 數字 1 覆蓋圖層的明確 zIndex
className 字串 '' 要指派給圖片的自訂類別名稱。預設為空。
選項 類型 預設值 描述
bubblingMouseEvents 布林值 true 當為 true 時,此圖層上的滑鼠事件將會在該地圖上觸發相同的事件(除非使用 L.DomEvent.stopPropagation)。
選項 類型 預設值 描述
pane 字串 'overlayPane' 預設情況下,圖層將新增至地圖的 覆蓋窗格。覆寫此選項將導致圖層預設放置在另一個窗格上。
attribution 字串 null 要在貢獻者控制項中顯示的字串,例如「© OpenStreetMap 貢獻者」。它描述圖層資料,並且通常是對版權所有者和圖磚提供者的法律義務。

事件

事件 資料 描述
load 事件 當 ImageOverlay 圖層載入其圖片時觸發
error 事件 當 ImageOverlay 圖層無法載入其圖片時觸發
事件 資料 描述
click MouseEvent 當使用者點擊(或輕觸)圖層時觸發。
dblclick MouseEvent 當使用者在圖層上雙擊(或雙輕觸)時觸發。
mousedown MouseEvent 當使用者在圖層上按下滑鼠按鈕時觸發。
mouseup MouseEvent 當使用者釋放在圖層上按下的滑鼠按鈕時觸發。
mouseover MouseEvent 當滑鼠進入圖層時觸發。
mouseout MouseEvent 當滑鼠離開圖層時觸發。
contextmenu MouseEvent 當使用者在圖層上按下滑鼠右鍵時觸發,如果此事件上有接聽程式,則會阻止顯示預設的瀏覽器上下文功能表。當使用者按住單次觸摸一秒鐘時(也稱為長按),也會在行動裝置上觸發。
事件 資料 描述
add 事件 將圖層新增至地圖後觸發
remove 事件 將圖層從地圖移除後觸發
事件 資料 描述
popupopen PopupEvent 當繫結至此圖層的彈出視窗開啟時觸發
popupclose PopupEvent 當繫結至此圖層的彈出視窗關閉時觸發
事件 資料 描述
tooltipopen TooltipEvent 當繫結至此圖層的工具提示開啟時觸發。
tooltipclose TooltipEvent 當繫結至此圖層的工具提示關閉時觸發。

方法

方法 回傳值 描述
getElement() SVGElement

返回此覆蓋使用的 SVGElement 實例。

方法 回傳值 描述
setOpacity(<Number> opacity) this

設定覆蓋的不透明度。

bringToFront() this

將圖層帶到所有覆蓋的最上層。

bringToBack() this

將圖層帶到所有覆蓋的最底層。

setUrl(<字串> url) this

變更圖片的 URL。

setBounds(<LatLngBounds> bounds) this

更新此 ImageOverlay 所覆蓋的邊界

setZIndex(<Number> value) this

變更圖片覆蓋的 zIndex

getBounds() LatLngBounds

取得此 ImageOverlay 所覆蓋的邊界

getCenter() LatLng

返回 ImageOverlay 的中心。

方法 回傳值 描述
addTo(<Map|LayerGroup> map) this

將圖層新增至給定的地圖或圖層群組。

remove() this

從目前活動的地圖中移除圖層。

removeFrom(<地圖> map) this

從給定的地圖移除圖層

removeFrom(<LayerGroup> group) this

從給定的 LayerGroup 移除圖層

getPane(<字串> name?) HTMLElement

傳回代表地圖上具名窗格的 HTMLElement。如果省略 name,則傳回此圖層的窗格。

getAttribution() 字串

貢獻者控制項 使用,傳回 貢獻者選項

方法 回傳值 描述
bindPopup(<字串|HTMLElement|Function|Popup> content, <Popup options> options?) this

使用傳遞的 content 將彈出視窗繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindPopup() this

移除先前使用 bindPopup 繫結的彈出視窗。

openPopup(<LatLng> latlng?) this

在指定的 latlng 或在預設的彈出視窗錨點(如果未傳遞 latlng)開啟繫結的彈出視窗。

closePopup() this

關閉繫結至此圖層的彈出視窗(如果已開啟)。

togglePopup() this

根據其目前狀態開啟或關閉繫結至此圖層的彈出視窗。

isPopupOpen() 布林值

如果繫結至此圖層的彈出視窗目前已開啟,則傳回 true

setPopupContent(<字串|HTMLElement|Popup> content) this

設定繫結至此圖層的彈出視窗內容。

getPopup() 彈出視窗

傳回繫結至此圖層的彈出視窗。

方法 回傳值 描述
bindTooltip(<字串|HTMLElement|Function|Tooltip> content, <Tooltip options> options?) this

使用傳遞的 content 將工具提示繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindTooltip() this

移除先前使用 bindTooltip 繫結的工具提示。

openTooltip(<LatLng> latlng?) this

在指定的 latlng 或在預設的工具提示錨點(如果未傳遞 latlng)開啟繫結的工具提示。

closeTooltip() this

關閉繫結至此圖層的工具提示(如果已開啟)。

toggleTooltip() this

根據其目前狀態開啟或關閉繫結至此圖層的工具提示。

isTooltipOpen() 布林值

如果繫結至此圖層的工具提示目前已開啟,則傳回 true

setTooltipContent(<字串|HTMLElement|Tooltip> content) this

設定繫結至此圖層的工具提示內容。

getTooltip() 提示

傳回繫結至此圖層的工具提示。

方法 回傳值 描述
on(<字串> type, <Function> fn, <Object> context?) this

將一個監聽器函數 (fn) 添加到物件的特定事件類型。您可以選擇性地指定監聽器的上下文(this 關鍵字將指向的物件)。您還可以傳遞幾個以空格分隔的類型(例如,'click dblclick')。

on(<Object> eventMap) this

添加一組類型/監聽器配對,例如 {click: onClick, mousemove: onMouseMove}

off(<字串> type, <Function> fn?, <Object> context?) this

移除先前添加的監聽器函數。如果沒有指定函數,它將從物件中移除該特定事件的所有監聽器。請注意,如果您將自定義上下文傳遞給 on,則必須將相同的上下文傳遞給 off 才能移除監聽器。

off(<Object> eventMap) this

移除一組類型/監聽器配對。

off() this

移除物件上所有事件的所有監聽器。這包括隱式附加的事件。

fire(<字串> type, <Object> data?, <Boolean> propagate?) this

觸發指定類型的事件。您可以選擇性地提供資料物件 — 監聽器函數的第一個參數將包含其屬性。事件可以選擇性地傳播到事件父級。

listens(<字串> type, <Boolean> propagate?) 布林值

如果特定事件類型有任何附加的監聽器,則返回 true。驗證可以選擇性地傳播,如果父級附加了監聽器,則它將返回 true

once() this

行為類似於 on(…),除了監聽器只會被觸發一次,然後被移除。

addEventParent(<Evented> obj) this

添加一個事件父級 — 一個 Evented,它將接收傳播的事件

removeEventParent(<Evented> obj) this

移除一個事件父級,因此它將停止接收傳播的事件

addEventListener() this

on(…) 的別名

removeEventListener() this

off(…) 的別名

clearAllEventListeners() this

off() 的別名

addOneTimeEventListener() this

once(…) 的別名

fireEvent() this

fire(…) 的別名

hasEventListeners() 布林值

listens(…) 的別名

路徑

一個抽象類別,包含向量覆蓋(Polygon、Polyline、Circle)之間共用的選項和常數。請勿直接使用它。擴展 Layer

選項

選項 類型 預設值 描述
stroke 布林值 true 是否沿著路徑繪製筆觸。將其設定為 false 可停用多邊形或圓形的邊框。
color 字串 '#3388ff' 筆觸顏色
weight 數字 3 筆觸寬度(以像素為單位)
opacity 數字 1.0 stroke-opacity
lineCap 字串 'round' 一個字串,定義 要用於筆觸結尾的形狀
lineJoin 字串 'round' 一個字串,定義 要用於筆觸角落的形狀
dashArray 字串 null 一個字串,定義筆觸的 虛線模式。在 某些舊瀏覽器中的 Canvas 驅動圖層上無法運作。
dashOffset 字串 null 一個字串,定義 虛線模式中開始虛線的距離。在 某些舊瀏覽器中的 Canvas 驅動圖層上無法運作。
fill 布林值 depends 是否使用顏色填滿路徑。將其設定為 false 可停用多邊形或圓形的填滿。
fillColor 字串 * 填滿顏色。預設為 color 選項的值
fillOpacity 數字 0.2 填滿不透明度。
fillRule 字串 'evenodd' 一個字串,定義如何判斷形狀內部
bubblingMouseEvents 布林值 true true 時,此路徑上的滑鼠事件將觸發地圖上的相同事件(除非使用 L.DomEvent.stopPropagation)。
renderer 渲染器 將此 Renderer 的特定實例用於此路徑。優先於地圖的 預設渲染器
className 字串 null 在元素上設定的自訂類別名稱。僅適用於 SVG 渲染器。
選項 類型 預設值 描述
interactive 布林值 true 如果為 false,則圖層將不會發出滑鼠事件,並且將作為底層地圖的一部分。
選項 類型 預設值 描述
pane 字串 'overlayPane' 預設情況下,圖層將新增至地圖的 覆蓋窗格。覆寫此選項將導致圖層預設放置在另一個窗格上。
attribution 字串 null 要在貢獻者控制項中顯示的字串,例如「© OpenStreetMap 貢獻者」。它描述圖層資料,並且通常是對版權所有者和圖磚提供者的法律義務。

事件

事件 資料 描述
click MouseEvent 當使用者點擊(或輕觸)圖層時觸發。
dblclick MouseEvent 當使用者在圖層上雙擊(或雙輕觸)時觸發。
mousedown MouseEvent 當使用者在圖層上按下滑鼠按鈕時觸發。
mouseup MouseEvent 當使用者釋放在圖層上按下的滑鼠按鈕時觸發。
mouseover MouseEvent 當滑鼠進入圖層時觸發。
mouseout MouseEvent 當滑鼠離開圖層時觸發。
contextmenu MouseEvent 當使用者在圖層上按下滑鼠右鍵時觸發,如果此事件上有接聽程式,則會阻止顯示預設的瀏覽器上下文功能表。當使用者按住單次觸摸一秒鐘時(也稱為長按),也會在行動裝置上觸發。
事件 資料 描述
add 事件 將圖層新增至地圖後觸發
remove 事件 將圖層從地圖移除後觸發
事件 資料 描述
popupopen PopupEvent 當繫結至此圖層的彈出視窗開啟時觸發
popupclose PopupEvent 當繫結至此圖層的彈出視窗關閉時觸發
事件 資料 描述
tooltipopen TooltipEvent 當繫結至此圖層的工具提示開啟時觸發。
tooltipclose TooltipEvent 當繫結至此圖層的工具提示關閉時觸發。

方法

方法 回傳值 描述
redraw() this

重新繪製圖層。在變更路徑使用的座標後有時很有用。

setStyle(<路徑選項> style) this

根據 路徑選項 物件中的選項,變更路徑的外觀。

bringToFront() this

將圖層帶到所有路徑圖層的最上層。

bringToBack() this

將圖層帶到所有路徑圖層的最底層。

方法 回傳值 描述
addTo(<Map|LayerGroup> map) this

將圖層新增至給定的地圖或圖層群組。

remove() this

從目前活動的地圖中移除圖層。

removeFrom(<地圖> map) this

從給定的地圖移除圖層

removeFrom(<LayerGroup> group) this

從給定的 LayerGroup 移除圖層

getPane(<字串> name?) HTMLElement

傳回代表地圖上具名窗格的 HTMLElement。如果省略 name,則傳回此圖層的窗格。

getAttribution() 字串

貢獻者控制項 使用,傳回 貢獻者選項

方法 回傳值 描述
bindPopup(<字串|HTMLElement|Function|Popup> content, <Popup options> options?) this

使用傳遞的 content 將彈出視窗繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindPopup() this

移除先前使用 bindPopup 繫結的彈出視窗。

openPopup(<LatLng> latlng?) this

在指定的 latlng 或在預設的彈出視窗錨點(如果未傳遞 latlng)開啟繫結的彈出視窗。

closePopup() this

關閉繫結至此圖層的彈出視窗(如果已開啟)。

togglePopup() this

根據其目前狀態開啟或關閉繫結至此圖層的彈出視窗。

isPopupOpen() 布林值

如果繫結至此圖層的彈出視窗目前已開啟,則傳回 true

setPopupContent(<字串|HTMLElement|Popup> content) this

設定繫結至此圖層的彈出視窗內容。

getPopup() 彈出視窗

傳回繫結至此圖層的彈出視窗。

方法 回傳值 描述
bindTooltip(<字串|HTMLElement|Function|Tooltip> content, <Tooltip options> options?) this

使用傳遞的 content 將工具提示繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindTooltip() this

移除先前使用 bindTooltip 繫結的工具提示。

openTooltip(<LatLng> latlng?) this

在指定的 latlng 或在預設的工具提示錨點(如果未傳遞 latlng)開啟繫結的工具提示。

closeTooltip() this

關閉繫結至此圖層的工具提示(如果已開啟)。

toggleTooltip() this

根據其目前狀態開啟或關閉繫結至此圖層的工具提示。

isTooltipOpen() 布林值

如果繫結至此圖層的工具提示目前已開啟,則傳回 true

setTooltipContent(<字串|HTMLElement|Tooltip> content) this

設定繫結至此圖層的工具提示內容。

getTooltip() 提示

傳回繫結至此圖層的工具提示。

方法 回傳值 描述
on(<字串> type, <Function> fn, <Object> context?) this

將一個監聽器函數 (fn) 添加到物件的特定事件類型。您可以選擇性地指定監聽器的上下文(this 關鍵字將指向的物件)。您還可以傳遞幾個以空格分隔的類型(例如,'click dblclick')。

on(<Object> eventMap) this

添加一組類型/監聽器配對,例如 {click: onClick, mousemove: onMouseMove}

off(<字串> type, <Function> fn?, <Object> context?) this

移除先前添加的監聽器函數。如果沒有指定函數,它將從物件中移除該特定事件的所有監聽器。請注意,如果您將自定義上下文傳遞給 on,則必須將相同的上下文傳遞給 off 才能移除監聽器。

off(<Object> eventMap) this

移除一組類型/監聽器配對。

off() this

移除物件上所有事件的所有監聽器。這包括隱式附加的事件。

fire(<字串> type, <Object> data?, <Boolean> propagate?) this

觸發指定類型的事件。您可以選擇性地提供資料物件 — 監聽器函數的第一個參數將包含其屬性。事件可以選擇性地傳播到事件父級。

listens(<字串> type, <Boolean> propagate?) 布林值

如果特定事件類型有任何附加的監聽器,則返回 true。驗證可以選擇性地傳播,如果父級附加了監聽器,則它將返回 true

once() this

行為類似於 on(…),除了監聽器只會被觸發一次,然後被移除。

addEventParent(<Evented> obj) this

添加一個事件父級 — 一個 Evented,它將接收傳播的事件

removeEventParent(<Evented> obj) this

移除一個事件父級,因此它將停止接收傳播的事件

addEventListener() this

on(…) 的別名

removeEventListener() this

off(…) 的別名

clearAllEventListeners() this

off() 的別名

addOneTimeEventListener() this

once(…) 的別名

fireEvent() this

fire(…) 的別名

hasEventListeners() 布林值

listens(…) 的別名

折線

一個用於在地圖上繪製折線覆蓋的類別。擴展 Path

使用範例

// create a red polyline from an array of LatLng points
var latlngs = [
	[45.51, -122.68],
	[37.77, -122.43],
	[34.04, -118.2]
];

var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);

// zoom the map to the polyline
map.fitBounds(polyline.getBounds());

您也可以傳遞多維陣列來表示 MultiPolyline 形狀

// create a red polyline from an array of arrays of LatLng points
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]]
];

建立

工廠 描述
L.polyline(<LatLng[]> latlngs, <折線選項> options?) 根據地理點陣列和可選的選項物件,實例化一個折線物件。您可以透過傳遞地理點陣列的陣列來建立具有多個獨立線條 (MultiPolyline) 的 Polyline 物件。

選項

選項 類型 預設值 描述
smoothFactor 數字 1.0 在每個縮放層級上簡化折線的程度。越多表示效能更好且外觀更平滑,越少表示更準確的表示。
noClip 布林值 false 停用折線裁剪。
選項 類型 預設值 描述
stroke 布林值 true 是否沿著路徑繪製筆觸。將其設定為 false 可停用多邊形或圓形的邊框。
color 字串 '#3388ff' 筆觸顏色
weight 數字 3 筆觸寬度(以像素為單位)
opacity 數字 1.0 stroke-opacity
lineCap 字串 'round' 一個字串,定義 要用於筆觸結尾的形狀
lineJoin 字串 'round' 一個字串,定義 要用於筆觸角落的形狀
dashArray 字串 null 一個字串,定義筆觸的 虛線模式。在 某些舊瀏覽器中的 Canvas 驅動圖層上無法運作。
dashOffset 字串 null 一個字串,定義 虛線模式中開始虛線的距離。在 某些舊瀏覽器中的 Canvas 驅動圖層上無法運作。
fill 布林值 depends 是否使用顏色填滿路徑。將其設定為 false 可停用多邊形或圓形的填滿。
fillColor 字串 * 填滿顏色。預設為 color 選項的值
fillOpacity 數字 0.2 填滿不透明度。
fillRule 字串 'evenodd' 一個字串,定義如何判斷形狀內部
bubblingMouseEvents 布林值 true true 時,此路徑上的滑鼠事件將觸發地圖上的相同事件(除非使用 L.DomEvent.stopPropagation)。
renderer 渲染器 將此 Renderer 的特定實例用於此路徑。優先於地圖的 預設渲染器
className 字串 null 在元素上設定的自訂類別名稱。僅適用於 SVG 渲染器。
選項 類型 預設值 描述
interactive 布林值 true 如果為 false,則圖層將不會發出滑鼠事件,並且將作為底層地圖的一部分。
選項 類型 預設值 描述
pane 字串 'overlayPane' 預設情況下,圖層將新增至地圖的 覆蓋窗格。覆寫此選項將導致圖層預設放置在另一個窗格上。
attribution 字串 null 要在貢獻者控制項中顯示的字串,例如「© OpenStreetMap 貢獻者」。它描述圖層資料,並且通常是對版權所有者和圖磚提供者的法律義務。

事件

事件 資料 描述
click MouseEvent 當使用者點擊(或輕觸)圖層時觸發。
dblclick MouseEvent 當使用者在圖層上雙擊(或雙輕觸)時觸發。
mousedown MouseEvent 當使用者在圖層上按下滑鼠按鈕時觸發。
mouseup MouseEvent 當使用者釋放在圖層上按下的滑鼠按鈕時觸發。
mouseover MouseEvent 當滑鼠進入圖層時觸發。
mouseout MouseEvent 當滑鼠離開圖層時觸發。
contextmenu MouseEvent 當使用者在圖層上按下滑鼠右鍵時觸發,如果此事件上有接聽程式,則會阻止顯示預設的瀏覽器上下文功能表。當使用者按住單次觸摸一秒鐘時(也稱為長按),也會在行動裝置上觸發。
事件 資料 描述
add 事件 將圖層新增至地圖後觸發
remove 事件 將圖層從地圖移除後觸發
事件 資料 描述
popupopen PopupEvent 當繫結至此圖層的彈出視窗開啟時觸發
popupclose PopupEvent 當繫結至此圖層的彈出視窗關閉時觸發
事件 資料 描述
tooltipopen TooltipEvent 當繫結至此圖層的工具提示開啟時觸發。
tooltipclose TooltipEvent 當繫結至此圖層的工具提示關閉時觸發。

方法

方法 回傳值 描述
toGeoJSON(<Number|false> precision?) Object

座標值使用具有給定 precisionformatNum 函式進行四捨五入。返回折線的 GeoJSON 表示(作為 GeoJSON LineStringMultiLineString Feature)。

getLatLngs() LatLng[]

返回路徑中點的陣列,或在多重折線的情況下返回點的巢狀陣列。

setLatLngs(<LatLng[]> latlngs) this

使用給定的地理點陣列取代折線中的所有點。

isEmpty() 布林值

如果折線沒有 LatLngs,則傳回 true

closestLayerPoint(<Point> p) Point

傳回折線上最接近 p 的點。

getCenter() LatLng

傳回折線的中心(質心)。

getBounds() LatLngBounds

傳回路徑的 LatLngBounds

addLatLng(<LatLng> latlng, <LatLng[]> latlngs?) this

將指定的點新增至折線。預設情況下,在多重折線的情況下,會新增至折線的第一個環,但可以透過傳遞特定環作為 LatLng 陣列(您可以使用 getLatLngs 提前存取)來覆寫。

方法 回傳值 描述
redraw() this

重新繪製圖層。在變更路徑使用的座標後有時很有用。

setStyle(<路徑選項> style) this

根據 路徑選項 物件中的選項,變更路徑的外觀。

bringToFront() this

將圖層帶到所有路徑圖層的最上層。

bringToBack() this

將圖層帶到所有路徑圖層的最底層。

方法 回傳值 描述
addTo(<Map|LayerGroup> map) this

將圖層新增至給定的地圖或圖層群組。

remove() this

從目前活動的地圖中移除圖層。

removeFrom(<地圖> map) this

從給定的地圖移除圖層

removeFrom(<LayerGroup> group) this

從給定的 LayerGroup 移除圖層

getPane(<字串> name?) HTMLElement

傳回代表地圖上具名窗格的 HTMLElement。如果省略 name,則傳回此圖層的窗格。

getAttribution() 字串

貢獻者控制項 使用,傳回 貢獻者選項

方法 回傳值 描述
bindPopup(<字串|HTMLElement|Function|Popup> content, <Popup options> options?) this

使用傳遞的 content 將彈出視窗繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindPopup() this

移除先前使用 bindPopup 繫結的彈出視窗。

openPopup(<LatLng> latlng?) this

在指定的 latlng 或在預設的彈出視窗錨點(如果未傳遞 latlng)開啟繫結的彈出視窗。

closePopup() this

關閉繫結至此圖層的彈出視窗(如果已開啟)。

togglePopup() this

根據其目前狀態開啟或關閉繫結至此圖層的彈出視窗。

isPopupOpen() 布林值

如果繫結至此圖層的彈出視窗目前已開啟,則傳回 true

setPopupContent(<字串|HTMLElement|Popup> content) this

設定繫結至此圖層的彈出視窗內容。

getPopup() 彈出視窗

傳回繫結至此圖層的彈出視窗。

方法 回傳值 描述
bindTooltip(<字串|HTMLElement|Function|Tooltip> content, <Tooltip options> options?) this

使用傳遞的 content 將工具提示繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindTooltip() this

移除先前使用 bindTooltip 繫結的工具提示。

openTooltip(<LatLng> latlng?) this

在指定的 latlng 或在預設的工具提示錨點(如果未傳遞 latlng)開啟繫結的工具提示。

closeTooltip() this

關閉繫結至此圖層的工具提示(如果已開啟)。

toggleTooltip() this

根據其目前狀態開啟或關閉繫結至此圖層的工具提示。

isTooltipOpen() 布林值

如果繫結至此圖層的工具提示目前已開啟,則傳回 true

setTooltipContent(<字串|HTMLElement|Tooltip> content) this

設定繫結至此圖層的工具提示內容。

getTooltip() 提示

傳回繫結至此圖層的工具提示。

方法 回傳值 描述
on(<字串> type, <Function> fn, <Object> context?) this

將一個監聽器函數 (fn) 添加到物件的特定事件類型。您可以選擇性地指定監聽器的上下文(this 關鍵字將指向的物件)。您還可以傳遞幾個以空格分隔的類型(例如,'click dblclick')。

on(<Object> eventMap) this

添加一組類型/監聽器配對,例如 {click: onClick, mousemove: onMouseMove}

off(<字串> type, <Function> fn?, <Object> context?) this

移除先前添加的監聽器函數。如果沒有指定函數,它將從物件中移除該特定事件的所有監聽器。請注意,如果您將自定義上下文傳遞給 on,則必須將相同的上下文傳遞給 off 才能移除監聽器。

off(<Object> eventMap) this

移除一組類型/監聽器配對。

off() this

移除物件上所有事件的所有監聽器。這包括隱式附加的事件。

fire(<字串> type, <Object> data?, <Boolean> propagate?) this

觸發指定類型的事件。您可以選擇性地提供資料物件 — 監聽器函數的第一個參數將包含其屬性。事件可以選擇性地傳播到事件父級。

listens(<字串> type, <Boolean> propagate?) 布林值

如果特定事件類型有任何附加的監聽器,則返回 true。驗證可以選擇性地傳播,如果父級附加了監聽器,則它將返回 true

once() this

行為類似於 on(…),除了監聽器只會被觸發一次,然後被移除。

addEventParent(<Evented> obj) this

添加一個事件父級 — 一個 Evented,它將接收傳播的事件

removeEventParent(<Evented> obj) this

移除一個事件父級,因此它將停止接收傳播的事件

addEventListener() this

on(…) 的別名

removeEventListener() this

off(…) 的別名

clearAllEventListeners() this

off() 的別名

addOneTimeEventListener() this

once(…) 的別名

fireEvent() this

fire(…) 的別名

hasEventListeners() 布林值

listens(…) 的別名

多邊形

用於在地圖上繪製多邊形覆蓋層的類別。擴展自 Polyline

請注意,您在建立多邊形時傳遞的點不應具有與第一個點相等的額外最後一個點 — 最好過濾掉這些點。

使用範例

// create a red polygon from an array of LatLng points
var latlngs = [[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]];

var polygon = L.polygon(latlngs, {color: 'red'}).addTo(map);

// zoom the map to the polygon
map.fitBounds(polygon.getBounds());

您也可以傳遞 latlngs 陣列的陣列,第一個陣列表示外形,其他陣列表示外形中的孔洞

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
];

此外,您可以傳遞多維陣列來表示多重多邊形形狀。

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]]
  ]
];

建立

工廠 描述
L.polygon(<LatLng[]> latlngs, <折線選項> options?)

選項

選項 類型 預設值 描述
smoothFactor 數字 1.0 在每個縮放層級上簡化折線的程度。越多表示效能更好且外觀更平滑,越少表示更準確的表示。
noClip 布林值 false 停用折線裁剪。
選項 類型 預設值 描述
stroke 布林值 true 是否沿著路徑繪製筆觸。將其設定為 false 可停用多邊形或圓形的邊框。
color 字串 '#3388ff' 筆觸顏色
weight 數字 3 筆觸寬度(以像素為單位)
opacity 數字 1.0 stroke-opacity
lineCap 字串 'round' 一個字串,定義 要用於筆觸結尾的形狀
lineJoin 字串 'round' 一個字串,定義 要用於筆觸角落的形狀
dashArray 字串 null 一個字串,定義筆觸的 虛線模式。在 某些舊瀏覽器中的 Canvas 驅動圖層上無法運作。
dashOffset 字串 null 一個字串,定義 虛線模式中開始虛線的距離。在 某些舊瀏覽器中的 Canvas 驅動圖層上無法運作。
fill 布林值 depends 是否使用顏色填滿路徑。將其設定為 false 可停用多邊形或圓形的填滿。
fillColor 字串 * 填滿顏色。預設為 color 選項的值
fillOpacity 數字 0.2 填滿不透明度。
fillRule 字串 'evenodd' 一個字串,定義如何判斷形狀內部
bubblingMouseEvents 布林值 true true 時,此路徑上的滑鼠事件將觸發地圖上的相同事件(除非使用 L.DomEvent.stopPropagation)。
renderer 渲染器 將此 Renderer 的特定實例用於此路徑。優先於地圖的 預設渲染器
className 字串 null 在元素上設定的自訂類別名稱。僅適用於 SVG 渲染器。
選項 類型 預設值 描述
interactive 布林值 true 如果為 false,則圖層將不會發出滑鼠事件,並且將作為底層地圖的一部分。
選項 類型 預設值 描述
pane 字串 'overlayPane' 預設情況下,圖層將新增至地圖的 覆蓋窗格。覆寫此選項將導致圖層預設放置在另一個窗格上。
attribution 字串 null 要在貢獻者控制項中顯示的字串,例如「© OpenStreetMap 貢獻者」。它描述圖層資料,並且通常是對版權所有者和圖磚提供者的法律義務。

事件

事件 資料 描述
click MouseEvent 當使用者點擊(或輕觸)圖層時觸發。
dblclick MouseEvent 當使用者在圖層上雙擊(或雙輕觸)時觸發。
mousedown MouseEvent 當使用者在圖層上按下滑鼠按鈕時觸發。
mouseup MouseEvent 當使用者釋放在圖層上按下的滑鼠按鈕時觸發。
mouseover MouseEvent 當滑鼠進入圖層時觸發。
mouseout MouseEvent 當滑鼠離開圖層時觸發。
contextmenu MouseEvent 當使用者在圖層上按下滑鼠右鍵時觸發,如果此事件上有接聽程式,則會阻止顯示預設的瀏覽器上下文功能表。當使用者按住單次觸摸一秒鐘時(也稱為長按),也會在行動裝置上觸發。
事件 資料 描述
add 事件 將圖層新增至地圖後觸發
remove 事件 將圖層從地圖移除後觸發
事件 資料 描述
popupopen PopupEvent 當繫結至此圖層的彈出視窗開啟時觸發
popupclose PopupEvent 當繫結至此圖層的彈出視窗關閉時觸發
事件 資料 描述
tooltipopen TooltipEvent 當繫結至此圖層的工具提示開啟時觸發。
tooltipclose TooltipEvent 當繫結至此圖層的工具提示關閉時觸發。

方法

方法 回傳值 描述
toGeoJSON(<Number|false> precision?) Object

座標值使用具有給定 precisionformatNum 函數進行四捨五入。傳回多邊形的 GeoJSON 表示形式(作為 GeoJSON PolygonMultiPolygon Feature)。

getCenter() LatLng

傳回多邊形的中心(質心)。

方法 回傳值 描述
getLatLngs() LatLng[]

返回路徑中點的陣列,或在多重折線的情況下返回點的巢狀陣列。

setLatLngs(<LatLng[]> latlngs) this

使用給定的地理點陣列取代折線中的所有點。

isEmpty() 布林值

如果折線沒有 LatLngs,則傳回 true

closestLayerPoint(<Point> p) Point

傳回折線上最接近 p 的點。

getBounds() LatLngBounds

傳回路徑的 LatLngBounds

addLatLng(<LatLng> latlng, <LatLng[]> latlngs?) this

將指定的點新增至折線。預設情況下,在多重折線的情況下,會新增至折線的第一個環,但可以透過傳遞特定環作為 LatLng 陣列(您可以使用 getLatLngs 提前存取)來覆寫。

方法 回傳值 描述
redraw() this

重新繪製圖層。在變更路徑使用的座標後有時很有用。

setStyle(<路徑選項> style) this

根據 路徑選項 物件中的選項,變更路徑的外觀。

bringToFront() this

將圖層帶到所有路徑圖層的最上層。

bringToBack() this

將圖層帶到所有路徑圖層的最底層。

方法 回傳值 描述
addTo(<Map|LayerGroup> map) this

將圖層新增至給定的地圖或圖層群組。

remove() this

從目前活動的地圖中移除圖層。

removeFrom(<地圖> map) this

從給定的地圖移除圖層

removeFrom(<LayerGroup> group) this

從給定的 LayerGroup 移除圖層

getPane(<字串> name?) HTMLElement

傳回代表地圖上具名窗格的 HTMLElement。如果省略 name,則傳回此圖層的窗格。

getAttribution() 字串

貢獻者控制項 使用,傳回 貢獻者選項

方法 回傳值 描述
bindPopup(<字串|HTMLElement|Function|Popup> content, <Popup options> options?) this

使用傳遞的 content 將彈出視窗繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindPopup() this

移除先前使用 bindPopup 繫結的彈出視窗。

openPopup(<LatLng> latlng?) this

在指定的 latlng 或在預設的彈出視窗錨點(如果未傳遞 latlng)開啟繫結的彈出視窗。

closePopup() this

關閉繫結至此圖層的彈出視窗(如果已開啟)。

togglePopup() this

根據其目前狀態開啟或關閉繫結至此圖層的彈出視窗。

isPopupOpen() 布林值

如果繫結至此圖層的彈出視窗目前已開啟,則傳回 true

setPopupContent(<字串|HTMLElement|Popup> content) this

設定繫結至此圖層的彈出視窗內容。

getPopup() 彈出視窗

傳回繫結至此圖層的彈出視窗。

方法 回傳值 描述
bindTooltip(<字串|HTMLElement|Function|Tooltip> content, <Tooltip options> options?) this

使用傳遞的 content 將工具提示繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindTooltip() this

移除先前使用 bindTooltip 繫結的工具提示。

openTooltip(<LatLng> latlng?) this

在指定的 latlng 或在預設的工具提示錨點(如果未傳遞 latlng)開啟繫結的工具提示。

closeTooltip() this

關閉繫結至此圖層的工具提示(如果已開啟)。

toggleTooltip() this

根據其目前狀態開啟或關閉繫結至此圖層的工具提示。

isTooltipOpen() 布林值

如果繫結至此圖層的工具提示目前已開啟,則傳回 true

setTooltipContent(<字串|HTMLElement|Tooltip> content) this

設定繫結至此圖層的工具提示內容。

getTooltip() 提示

傳回繫結至此圖層的工具提示。

方法 回傳值 描述
on(<字串> type, <Function> fn, <Object> context?) this

將一個監聽器函數 (fn) 添加到物件的特定事件類型。您可以選擇性地指定監聽器的上下文(this 關鍵字將指向的物件)。您還可以傳遞幾個以空格分隔的類型(例如,'click dblclick')。

on(<Object> eventMap) this

添加一組類型/監聽器配對,例如 {click: onClick, mousemove: onMouseMove}

off(<字串> type, <Function> fn?, <Object> context?) this

移除先前添加的監聽器函數。如果沒有指定函數,它將從物件中移除該特定事件的所有監聽器。請注意,如果您將自定義上下文傳遞給 on,則必須將相同的上下文傳遞給 off 才能移除監聽器。

off(<Object> eventMap) this

移除一組類型/監聽器配對。

off() this

移除物件上所有事件的所有監聽器。這包括隱式附加的事件。

fire(<字串> type, <Object> data?, <Boolean> propagate?) this

觸發指定類型的事件。您可以選擇性地提供資料物件 — 監聽器函數的第一個參數將包含其屬性。事件可以選擇性地傳播到事件父級。

listens(<字串> type, <Boolean> propagate?) 布林值

如果特定事件類型有任何附加的監聽器,則返回 true。驗證可以選擇性地傳播,如果父級附加了監聽器,則它將返回 true

once() this

行為類似於 on(…),除了監聽器只會被觸發一次,然後被移除。

addEventParent(<Evented> obj) this

添加一個事件父級 — 一個 Evented,它將接收傳播的事件

removeEventParent(<Evented> obj) this

移除一個事件父級,因此它將停止接收傳播的事件

addEventListener() this

on(…) 的別名

removeEventListener() this

off(…) 的別名

clearAllEventListeners() this

off() 的別名

addOneTimeEventListener() this

once(…) 的別名

fireEvent() this

fire(…) 的別名

hasEventListeners() 布林值

listens(…) 的別名

矩形

用於在地圖上繪製矩形覆蓋層的類別。擴展自 Polygon

使用範例

// define rectangle geographical bounds
var bounds = [[54.559322, -5.767822], [56.1210604, -3.021240]];

// create an orange rectangle
L.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(map);

// zoom the map to the rectangle bounds
map.fitBounds(bounds);

建立

工廠 描述
L.rectangle(<LatLngBounds> latLngBounds, <折線選項> options?)

選項

選項 類型 預設值 描述
smoothFactor 數字 1.0 在每個縮放層級上簡化折線的程度。越多表示效能更好且外觀更平滑,越少表示更準確的表示。
noClip 布林值 false 停用折線裁剪。
選項 類型 預設值 描述
stroke 布林值 true 是否沿著路徑繪製筆觸。將其設定為 false 可停用多邊形或圓形的邊框。
color 字串 '#3388ff' 筆觸顏色
weight 數字 3 筆觸寬度(以像素為單位)
opacity 數字 1.0 stroke-opacity
lineCap 字串 'round' 一個字串,定義 要用於筆觸結尾的形狀
lineJoin 字串 'round' 一個字串,定義 要用於筆觸角落的形狀
dashArray 字串 null 一個字串,定義筆觸的 虛線模式。在 某些舊瀏覽器中的 Canvas 驅動圖層上無法運作。
dashOffset 字串 null 一個字串,定義 虛線模式中開始虛線的距離。在 某些舊瀏覽器中的 Canvas 驅動圖層上無法運作。
fill 布林值 depends 是否使用顏色填滿路徑。將其設定為 false 可停用多邊形或圓形的填滿。
fillColor 字串 * 填滿顏色。預設為 color 選項的值
fillOpacity 數字 0.2 填滿不透明度。
fillRule 字串 'evenodd' 一個字串,定義如何判斷形狀內部
bubblingMouseEvents 布林值 true true 時,此路徑上的滑鼠事件將觸發地圖上的相同事件(除非使用 L.DomEvent.stopPropagation)。
renderer 渲染器 將此 Renderer 的特定實例用於此路徑。優先於地圖的 預設渲染器
className 字串 null 在元素上設定的自訂類別名稱。僅適用於 SVG 渲染器。
選項 類型 預設值 描述
interactive 布林值 true 如果為 false,則圖層將不會發出滑鼠事件,並且將作為底層地圖的一部分。
選項 類型 預設值 描述
pane 字串 'overlayPane' 預設情況下,圖層將新增至地圖的 覆蓋窗格。覆寫此選項將導致圖層預設放置在另一個窗格上。
attribution 字串 null 要在貢獻者控制項中顯示的字串,例如「© OpenStreetMap 貢獻者」。它描述圖層資料,並且通常是對版權所有者和圖磚提供者的法律義務。

事件

事件 資料 描述
click MouseEvent 當使用者點擊(或輕觸)圖層時觸發。
dblclick MouseEvent 當使用者在圖層上雙擊(或雙輕觸)時觸發。
mousedown MouseEvent 當使用者在圖層上按下滑鼠按鈕時觸發。
mouseup MouseEvent 當使用者釋放在圖層上按下的滑鼠按鈕時觸發。
mouseover MouseEvent 當滑鼠進入圖層時觸發。
mouseout MouseEvent 當滑鼠離開圖層時觸發。
contextmenu MouseEvent 當使用者在圖層上按下滑鼠右鍵時觸發,如果此事件上有接聽程式,則會阻止顯示預設的瀏覽器上下文功能表。當使用者按住單次觸摸一秒鐘時(也稱為長按),也會在行動裝置上觸發。
事件 資料 描述
add 事件 將圖層新增至地圖後觸發
remove 事件 將圖層從地圖移除後觸發
事件 資料 描述
popupopen PopupEvent 當繫結至此圖層的彈出視窗開啟時觸發
popupclose PopupEvent 當繫結至此圖層的彈出視窗關閉時觸發
事件 資料 描述
tooltipopen TooltipEvent 當繫結至此圖層的工具提示開啟時觸發。
tooltipclose TooltipEvent 當繫結至此圖層的工具提示關閉時觸發。

方法

方法 回傳值 描述
setBounds(<LatLngBounds> latLngBounds) this

使用傳遞的邊界重新繪製矩形。

方法 回傳值 描述
toGeoJSON(<Number|false> precision?) Object

座標值使用具有給定 precisionformatNum 函數進行四捨五入。傳回多邊形的 GeoJSON 表示形式(作為 GeoJSON PolygonMultiPolygon Feature)。

getCenter() LatLng

傳回多邊形的中心(質心)。

方法 回傳值 描述
getLatLngs() LatLng[]

返回路徑中點的陣列,或在多重折線的情況下返回點的巢狀陣列。

setLatLngs(<LatLng[]> latlngs) this

使用給定的地理點陣列取代折線中的所有點。

isEmpty() 布林值

如果折線沒有 LatLngs,則傳回 true

closestLayerPoint(<Point> p) Point

傳回折線上最接近 p 的點。

getBounds() LatLngBounds

傳回路徑的 LatLngBounds

addLatLng(<LatLng> latlng, <LatLng[]> latlngs?) this

將指定的點新增至折線。預設情況下,在多重折線的情況下,會新增至折線的第一個環,但可以透過傳遞特定環作為 LatLng 陣列(您可以使用 getLatLngs 提前存取)來覆寫。

方法 回傳值 描述
redraw() this

重新繪製圖層。在變更路徑使用的座標後有時很有用。

setStyle(<路徑選項> style) this

根據 路徑選項 物件中的選項,變更路徑的外觀。

bringToFront() this

將圖層帶到所有路徑圖層的最上層。

bringToBack() this

將圖層帶到所有路徑圖層的最底層。

方法 回傳值 描述
addTo(<Map|LayerGroup> map) this

將圖層新增至給定的地圖或圖層群組。

remove() this

從目前活動的地圖中移除圖層。

removeFrom(<地圖> map) this

從給定的地圖移除圖層

removeFrom(<LayerGroup> group) this

從給定的 LayerGroup 移除圖層

getPane(<字串> name?) HTMLElement

傳回代表地圖上具名窗格的 HTMLElement。如果省略 name,則傳回此圖層的窗格。

getAttribution() 字串

貢獻者控制項 使用,傳回 貢獻者選項

方法 回傳值 描述
bindPopup(<字串|HTMLElement|Function|Popup> content, <Popup options> options?) this

使用傳遞的 content 將彈出視窗繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindPopup() this

移除先前使用 bindPopup 繫結的彈出視窗。

openPopup(<LatLng> latlng?) this

在指定的 latlng 或在預設的彈出視窗錨點(如果未傳遞 latlng)開啟繫結的彈出視窗。

closePopup() this

關閉繫結至此圖層的彈出視窗(如果已開啟)。

togglePopup() this

根據其目前狀態開啟或關閉繫結至此圖層的彈出視窗。

isPopupOpen() 布林值

如果繫結至此圖層的彈出視窗目前已開啟,則傳回 true

setPopupContent(<字串|HTMLElement|Popup> content) this

設定繫結至此圖層的彈出視窗內容。

getPopup() 彈出視窗

傳回繫結至此圖層的彈出視窗。

方法 回傳值 描述
bindTooltip(<字串|HTMLElement|Function|Tooltip> content, <Tooltip options> options?) this

使用傳遞的 content 將工具提示繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindTooltip() this

移除先前使用 bindTooltip 繫結的工具提示。

openTooltip(<LatLng> latlng?) this

在指定的 latlng 或在預設的工具提示錨點(如果未傳遞 latlng)開啟繫結的工具提示。

closeTooltip() this

關閉繫結至此圖層的工具提示(如果已開啟)。

toggleTooltip() this

根據其目前狀態開啟或關閉繫結至此圖層的工具提示。

isTooltipOpen() 布林值

如果繫結至此圖層的工具提示目前已開啟,則傳回 true

setTooltipContent(<字串|HTMLElement|Tooltip> content) this

設定繫結至此圖層的工具提示內容。

getTooltip() 提示

傳回繫結至此圖層的工具提示。

方法 回傳值 描述
on(<字串> type, <Function> fn, <Object> context?) this

將一個監聽器函數 (fn) 添加到物件的特定事件類型。您可以選擇性地指定監聽器的上下文(this 關鍵字將指向的物件)。您還可以傳遞幾個以空格分隔的類型(例如,'click dblclick')。

on(<Object> eventMap) this

添加一組類型/監聽器配對,例如 {click: onClick, mousemove: onMouseMove}

off(<字串> type, <Function> fn?, <Object> context?) this

移除先前添加的監聽器函數。如果沒有指定函數,它將從物件中移除該特定事件的所有監聽器。請注意,如果您將自定義上下文傳遞給 on,則必須將相同的上下文傳遞給 off 才能移除監聽器。

off(<Object> eventMap) this

移除一組類型/監聽器配對。

off() this

移除物件上所有事件的所有監聽器。這包括隱式附加的事件。

fire(<字串> type, <Object> data?, <Boolean> propagate?) this

觸發指定類型的事件。您可以選擇性地提供資料物件 — 監聽器函數的第一個參數將包含其屬性。事件可以選擇性地傳播到事件父級。

listens(<字串> type, <Boolean> propagate?) 布林值

如果特定事件類型有任何附加的監聽器,則返回 true。驗證可以選擇性地傳播,如果父級附加了監聽器,則它將返回 true

once() this

行為類似於 on(…),除了監聽器只會被觸發一次,然後被移除。

addEventParent(<Evented> obj) this

添加一個事件父級 — 一個 Evented,它將接收傳播的事件

removeEventParent(<Evented> obj) this

移除一個事件父級,因此它將停止接收傳播的事件

addEventListener() this

on(…) 的別名

removeEventListener() this

off(…) 的別名

clearAllEventListeners() this

off() 的別名

addOneTimeEventListener() this

once(…) 的別名

fireEvent() this

fire(…) 的別名

hasEventListeners() 布林值

listens(…) 的別名

圓形

用於在地圖上繪製圓形覆蓋層的類別。擴展自 CircleMarker

這是一個近似值,並且由於投影失真,在接近兩極時開始偏離真實的圓形。

使用範例

L.circle([50.5, 30.5], {radius: 200}).addTo(map);

建立

工廠 描述
L.circle(<LatLng> latlng, <圓形選項> options?) 給定地理點和包含圓形半徑的選項物件,實例化一個圓形物件。
L.circle(<LatLng> latlng, <Number> radius, <圓形選項> options?) 實例化圓形的過時方法,用於與 0.7.x 程式碼相容。請勿在新應用程式或外掛程式中使用。

選項

選項 類型 預設值 描述
radius 數字 圓形的半徑,以公尺為單位。
選項 類型 預設值 描述
stroke 布林值 true 是否沿著路徑繪製筆觸。將其設定為 false 可停用多邊形或圓形的邊框。
color 字串 '#3388ff' 筆觸顏色
weight 數字 3 筆觸寬度(以像素為單位)
opacity 數字 1.0 stroke-opacity
lineCap 字串 'round' 一個字串,定義 要用於筆觸結尾的形狀
lineJoin 字串 'round' 一個字串,定義 要用於筆觸角落的形狀
dashArray 字串 null 一個字串,定義筆觸的 虛線模式。在 某些舊瀏覽器中的 Canvas 驅動圖層上無法運作。
dashOffset 字串 null 一個字串,定義 虛線模式中開始虛線的距離。在 某些舊瀏覽器中的 Canvas 驅動圖層上無法運作。
fill 布林值 depends 是否使用顏色填滿路徑。將其設定為 false 可停用多邊形或圓形的填滿。
fillColor 字串 * 填滿顏色。預設為 color 選項的值
fillOpacity 數字 0.2 填滿不透明度。
fillRule 字串 'evenodd' 一個字串,定義如何判斷形狀內部
bubblingMouseEvents 布林值 true true 時,此路徑上的滑鼠事件將觸發地圖上的相同事件(除非使用 L.DomEvent.stopPropagation)。
renderer 渲染器 將此 Renderer 的特定實例用於此路徑。優先於地圖的 預設渲染器
className 字串 null 在元素上設定的自訂類別名稱。僅適用於 SVG 渲染器。
選項 類型 預設值 描述
interactive 布林值 true 如果為 false,則圖層將不會發出滑鼠事件,並且將作為底層地圖的一部分。
選項 類型 預設值 描述
pane 字串 'overlayPane' 預設情況下,圖層將新增至地圖的 覆蓋窗格。覆寫此選項將導致圖層預設放置在另一個窗格上。
attribution 字串 null 要在貢獻者控制項中顯示的字串,例如「© OpenStreetMap 貢獻者」。它描述圖層資料,並且通常是對版權所有者和圖磚提供者的法律義務。

事件

事件 資料 描述
move 事件 當標記透過 setLatLng 移動時觸發。舊座標和新座標會作為 oldLatLnglatlng 包含在事件引數中。
事件 資料 描述
click MouseEvent 當使用者點擊(或輕觸)圖層時觸發。
dblclick MouseEvent 當使用者在圖層上雙擊(或雙輕觸)時觸發。
mousedown MouseEvent 當使用者在圖層上按下滑鼠按鈕時觸發。
mouseup MouseEvent 當使用者釋放在圖層上按下的滑鼠按鈕時觸發。
mouseover MouseEvent 當滑鼠進入圖層時觸發。
mouseout MouseEvent 當滑鼠離開圖層時觸發。
contextmenu MouseEvent 當使用者在圖層上按下滑鼠右鍵時觸發,如果此事件上有接聽程式,則會阻止顯示預設的瀏覽器上下文功能表。當使用者按住單次觸摸一秒鐘時(也稱為長按),也會在行動裝置上觸發。
事件 資料 描述
add 事件 將圖層新增至地圖後觸發
remove 事件 將圖層從地圖移除後觸發
事件 資料 描述
popupopen PopupEvent 當繫結至此圖層的彈出視窗開啟時觸發
popupclose PopupEvent 當繫結至此圖層的彈出視窗關閉時觸發
事件 資料 描述
tooltipopen TooltipEvent 當繫結至此圖層的工具提示開啟時觸發。
tooltipclose TooltipEvent 當繫結至此圖層的工具提示關閉時觸發。

方法

方法 回傳值 描述
setRadius(<Number> radius) this

設定圓形的半徑。單位為公尺。

getRadius() 數字

傳回圓形目前的半徑。單位為公尺。

getBounds() LatLngBounds

傳回路徑的 LatLngBounds

方法 回傳值 描述
toGeoJSON(<Number|false> precision?) Object

座標值使用具有給定 precisionformatNum 函數進行四捨五入。傳回圓形標記的 GeoJSON 表示形式(作為 GeoJSON Point Feature)。

setLatLng(<LatLng> latLng) this

將圓形標記的位置設定為新位置。

getLatLng() LatLng

傳回圓形標記目前的地理位置

方法 回傳值 描述
redraw() this

重新繪製圖層。在變更路徑使用的座標後有時很有用。

setStyle(<路徑選項> style) this

根據 路徑選項 物件中的選項,變更路徑的外觀。

bringToFront() this

將圖層帶到所有路徑圖層的最上層。

bringToBack() this

將圖層帶到所有路徑圖層的最底層。

方法 回傳值 描述
addTo(<Map|LayerGroup> map) this

將圖層新增至給定的地圖或圖層群組。

remove() this

從目前活動的地圖中移除圖層。

removeFrom(<地圖> map) this

從給定的地圖移除圖層

removeFrom(<LayerGroup> group) this

從給定的 LayerGroup 移除圖層

getPane(<字串> name?) HTMLElement

傳回代表地圖上具名窗格的 HTMLElement。如果省略 name,則傳回此圖層的窗格。

getAttribution() 字串

貢獻者控制項 使用,傳回 貢獻者選項

方法 回傳值 描述
bindPopup(<字串|HTMLElement|Function|Popup> content, <Popup options> options?) this

使用傳遞的 content 將彈出視窗繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindPopup() this

移除先前使用 bindPopup 繫結的彈出視窗。

openPopup(<LatLng> latlng?) this

在指定的 latlng 或在預設的彈出視窗錨點(如果未傳遞 latlng)開啟繫結的彈出視窗。

closePopup() this

關閉繫結至此圖層的彈出視窗(如果已開啟)。

togglePopup() this

根據其目前狀態開啟或關閉繫結至此圖層的彈出視窗。

isPopupOpen() 布林值

如果繫結至此圖層的彈出視窗目前已開啟,則傳回 true

setPopupContent(<字串|HTMLElement|Popup> content) this

設定繫結至此圖層的彈出視窗內容。

getPopup() 彈出視窗

傳回繫結至此圖層的彈出視窗。

方法 回傳值 描述
bindTooltip(<字串|HTMLElement|Function|Tooltip> content, <Tooltip options> options?) this

使用傳遞的 content 將工具提示繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindTooltip() this

移除先前使用 bindTooltip 繫結的工具提示。

openTooltip(<LatLng> latlng?) this

在指定的 latlng 或在預設的工具提示錨點(如果未傳遞 latlng)開啟繫結的工具提示。

closeTooltip() this

關閉繫結至此圖層的工具提示(如果已開啟)。

toggleTooltip() this

根據其目前狀態開啟或關閉繫結至此圖層的工具提示。

isTooltipOpen() 布林值

如果繫結至此圖層的工具提示目前已開啟,則傳回 true

setTooltipContent(<字串|HTMLElement|Tooltip> content) this

設定繫結至此圖層的工具提示內容。

getTooltip() 提示

傳回繫結至此圖層的工具提示。

方法 回傳值 描述
on(<字串> type, <Function> fn, <Object> context?) this

將一個監聽器函數 (fn) 添加到物件的特定事件類型。您可以選擇性地指定監聽器的上下文(this 關鍵字將指向的物件)。您還可以傳遞幾個以空格分隔的類型(例如,'click dblclick')。

on(<Object> eventMap) this

添加一組類型/監聽器配對,例如 {click: onClick, mousemove: onMouseMove}

off(<字串> type, <Function> fn?, <Object> context?) this

移除先前添加的監聽器函數。如果沒有指定函數,它將從物件中移除該特定事件的所有監聽器。請注意,如果您將自定義上下文傳遞給 on,則必須將相同的上下文傳遞給 off 才能移除監聽器。

off(<Object> eventMap) this

移除一組類型/監聽器配對。

off() this

移除物件上所有事件的所有監聽器。這包括隱式附加的事件。

fire(<字串> type, <Object> data?, <Boolean> propagate?) this

觸發指定類型的事件。您可以選擇性地提供資料物件 — 監聽器函數的第一個參數將包含其屬性。事件可以選擇性地傳播到事件父級。

listens(<字串> type, <Boolean> propagate?) 布林值

如果特定事件類型有任何附加的監聽器,則返回 true。驗證可以選擇性地傳播,如果父級附加了監聽器,則它將返回 true

once() this

行為類似於 on(…),除了監聽器只會被觸發一次,然後被移除。

addEventParent(<Evented> obj) this

添加一個事件父級 — 一個 Evented,它將接收傳播的事件

removeEventParent(<Evented> obj) this

移除一個事件父級,因此它將停止接收傳播的事件

addEventListener() this

on(…) 的別名

removeEventListener() this

off(…) 的別名

clearAllEventListeners() this

off() 的別名

addOneTimeEventListener() this

once(…) 的別名

fireEvent() this

fire(…) 的別名

hasEventListeners() 布林值

listens(…) 的別名

圓形標記

具有固定大小的圓形,半徑以像素為單位指定。擴展自 Path

建立

工廠 描述
L.circleMarker(<LatLng> latlng, <圓形標記選項> options?) 給定地理點和一個可選的選項物件,實例化一個圓形標記物件。

選項

選項 類型 預設值 描述
radius 數字 10 圓形標記的半徑,以像素為單位
選項 類型 預設值 描述
stroke 布林值 true 是否沿著路徑繪製筆觸。將其設定為 false 可停用多邊形或圓形的邊框。
color 字串 '#3388ff' 筆觸顏色
weight 數字 3 筆觸寬度(以像素為單位)
opacity 數字 1.0 stroke-opacity
lineCap 字串 'round' 一個字串,定義 要用於筆觸結尾的形狀
lineJoin 字串 'round' 一個字串,定義 要用於筆觸角落的形狀
dashArray 字串 null 一個字串,定義筆觸的 虛線模式。在 某些舊瀏覽器中的 Canvas 驅動圖層上無法運作。
dashOffset 字串 null 一個字串,定義 虛線模式中開始虛線的距離。在 某些舊瀏覽器中的 Canvas 驅動圖層上無法運作。
fill 布林值 depends 是否使用顏色填滿路徑。將其設定為 false 可停用多邊形或圓形的填滿。
fillColor 字串 * 填滿顏色。預設為 color 選項的值
fillOpacity 數字 0.2 填滿不透明度。
fillRule 字串 'evenodd' 一個字串,定義如何判斷形狀內部
bubblingMouseEvents 布林值 true true 時,此路徑上的滑鼠事件將觸發地圖上的相同事件(除非使用 L.DomEvent.stopPropagation)。
renderer 渲染器 將此 Renderer 的特定實例用於此路徑。優先於地圖的 預設渲染器
className 字串 null 在元素上設定的自訂類別名稱。僅適用於 SVG 渲染器。
選項 類型 預設值 描述
interactive 布林值 true 如果為 false,則圖層將不會發出滑鼠事件,並且將作為底層地圖的一部分。
選項 類型 預設值 描述
pane 字串 'overlayPane' 預設情況下,圖層將新增至地圖的 覆蓋窗格。覆寫此選項將導致圖層預設放置在另一個窗格上。
attribution 字串 null 要在貢獻者控制項中顯示的字串,例如「© OpenStreetMap 貢獻者」。它描述圖層資料,並且通常是對版權所有者和圖磚提供者的法律義務。

事件

事件 資料 描述
move 事件 當標記透過 setLatLng 移動時觸發。舊座標和新座標會作為 oldLatLnglatlng 包含在事件引數中。
事件 資料 描述
click MouseEvent 當使用者點擊(或輕觸)圖層時觸發。
dblclick MouseEvent 當使用者在圖層上雙擊(或雙輕觸)時觸發。
mousedown MouseEvent 當使用者在圖層上按下滑鼠按鈕時觸發。
mouseup MouseEvent 當使用者釋放在圖層上按下的滑鼠按鈕時觸發。
mouseover MouseEvent 當滑鼠進入圖層時觸發。
mouseout MouseEvent 當滑鼠離開圖層時觸發。
contextmenu MouseEvent 當使用者在圖層上按下滑鼠右鍵時觸發,如果此事件上有接聽程式,則會阻止顯示預設的瀏覽器上下文功能表。當使用者按住單次觸摸一秒鐘時(也稱為長按),也會在行動裝置上觸發。
事件 資料 描述
add 事件 將圖層新增至地圖後觸發
remove 事件 將圖層從地圖移除後觸發
事件 資料 描述
popupopen PopupEvent 當繫結至此圖層的彈出視窗開啟時觸發
popupclose PopupEvent 當繫結至此圖層的彈出視窗關閉時觸發
事件 資料 描述
tooltipopen TooltipEvent 當繫結至此圖層的工具提示開啟時觸發。
tooltipclose TooltipEvent 當繫結至此圖層的工具提示關閉時觸發。

方法

方法 回傳值 描述
toGeoJSON(<Number|false> precision?) Object

座標值使用具有給定 precisionformatNum 函數進行四捨五入。傳回圓形標記的 GeoJSON 表示形式(作為 GeoJSON Point Feature)。

setLatLng(<LatLng> latLng) this

將圓形標記的位置設定為新位置。

getLatLng() LatLng

傳回圓形標記目前的地理位置

setRadius(<Number> radius) this

設定圓形標記的半徑。單位為像素。

getRadius() 數字

傳回圓形目前的半徑

方法 回傳值 描述
redraw() this

重新繪製圖層。在變更路徑使用的座標後有時很有用。

setStyle(<路徑選項> style) this

根據 路徑選項 物件中的選項,變更路徑的外觀。

bringToFront() this

將圖層帶到所有路徑圖層的最上層。

bringToBack() this

將圖層帶到所有路徑圖層的最底層。

方法 回傳值 描述
addTo(<Map|LayerGroup> map) this

將圖層新增至給定的地圖或圖層群組。

remove() this

從目前活動的地圖中移除圖層。

removeFrom(<地圖> map) this

從給定的地圖移除圖層

removeFrom(<LayerGroup> group) this

從給定的 LayerGroup 移除圖層

getPane(<字串> name?) HTMLElement

傳回代表地圖上具名窗格的 HTMLElement。如果省略 name,則傳回此圖層的窗格。

getAttribution() 字串

貢獻者控制項 使用,傳回 貢獻者選項

方法 回傳值 描述
bindPopup(<字串|HTMLElement|Function|Popup> content, <Popup options> options?) this

使用傳遞的 content 將彈出視窗繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindPopup() this

移除先前使用 bindPopup 繫結的彈出視窗。

openPopup(<LatLng> latlng?) this

在指定的 latlng 或在預設的彈出視窗錨點(如果未傳遞 latlng)開啟繫結的彈出視窗。

closePopup() this

關閉繫結至此圖層的彈出視窗(如果已開啟)。

togglePopup() this

根據其目前狀態開啟或關閉繫結至此圖層的彈出視窗。

isPopupOpen() 布林值

如果繫結至此圖層的彈出視窗目前已開啟,則傳回 true

setPopupContent(<字串|HTMLElement|Popup> content) this

設定繫結至此圖層的彈出視窗內容。

getPopup() 彈出視窗

傳回繫結至此圖層的彈出視窗。

方法 回傳值 描述
bindTooltip(<字串|HTMLElement|Function|Tooltip> content, <Tooltip options> options?) this

使用傳遞的 content 將工具提示繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindTooltip() this

移除先前使用 bindTooltip 繫結的工具提示。

openTooltip(<LatLng> latlng?) this

在指定的 latlng 或在預設的工具提示錨點(如果未傳遞 latlng)開啟繫結的工具提示。

closeTooltip() this

關閉繫結至此圖層的工具提示(如果已開啟)。

toggleTooltip() this

根據其目前狀態開啟或關閉繫結至此圖層的工具提示。

isTooltipOpen() 布林值

如果繫結至此圖層的工具提示目前已開啟,則傳回 true

setTooltipContent(<字串|HTMLElement|Tooltip> content) this

設定繫結至此圖層的工具提示內容。

getTooltip() 提示

傳回繫結至此圖層的工具提示。

方法 回傳值 描述
on(<字串> type, <Function> fn, <Object> context?) this

將一個監聽器函數 (fn) 添加到物件的特定事件類型。您可以選擇性地指定監聽器的上下文(this 關鍵字將指向的物件)。您還可以傳遞幾個以空格分隔的類型(例如,'click dblclick')。

on(<Object> eventMap) this

添加一組類型/監聽器配對,例如 {click: onClick, mousemove: onMouseMove}

off(<字串> type, <Function> fn?, <Object> context?) this

移除先前添加的監聽器函數。如果沒有指定函數,它將從物件中移除該特定事件的所有監聽器。請注意,如果您將自定義上下文傳遞給 on,則必須將相同的上下文傳遞給 off 才能移除監聽器。

off(<Object> eventMap) this

移除一組類型/監聽器配對。

off() this

移除物件上所有事件的所有監聽器。這包括隱式附加的事件。

fire(<字串> type, <Object> data?, <Boolean> propagate?) this

觸發指定類型的事件。您可以選擇性地提供資料物件 — 監聽器函數的第一個參數將包含其屬性。事件可以選擇性地傳播到事件父級。

listens(<字串> type, <Boolean> propagate?) 布林值

如果特定事件類型有任何附加的監聽器,則返回 true。驗證可以選擇性地傳播,如果父級附加了監聽器,則它將返回 true

once() this

行為類似於 on(…),除了監聽器只會被觸發一次,然後被移除。

addEventParent(<Evented> obj) this

添加一個事件父級 — 一個 Evented,它將接收傳播的事件

removeEventParent(<Evented> obj) this

移除一個事件父級,因此它將停止接收傳播的事件

addEventListener() this

on(…) 的別名

removeEventListener() this

off(…) 的別名

clearAllEventListeners() this

off() 的別名

addOneTimeEventListener() this

once(…) 的別名

fireEvent() this

fire(…) 的別名

hasEventListeners() 布林值

listens(…) 的別名

SVG

允許使用 SVG 顯示向量圖層。繼承自 Renderer

由於 技術限制,並非所有網頁瀏覽器都提供 SVG,特別是 Android 2.x 和 3.x。

雖然 IE7 和 IE8 上不提供 SVG,但這些瀏覽器支援 VML(一種現已棄用的技術),並且在這種情況下,SVG 渲染器會回復為 VML。

VML 已在 2012 年棄用,這表示 VML 功能僅適用於與舊版 Internet Explorer 的回溯相容性。

使用範例

預設情況下,對地圖中的所有路徑使用 SVG

var map = L.map('map', {
	renderer: L.svg()
});

使用具有特定向量幾何形狀額外邊距的 SVG 渲染器

var map = L.map('map');
var myRenderer = L.svg({ padding: 0.5 });
var line = L.polyline( coordinates, { renderer: myRenderer } );
var circle = L.circle( center, { renderer: myRenderer } );

建立

工廠 描述
L.svg(<渲染器選項> options?) 使用給定的選項建立 SVG 渲染器。

選項

選項 類型 預設值 描述
邊距選項 數字 0.1 在地圖視圖周圍擴展裁剪區域的程度(相對於其大小),例如 0.1 將是每個方向上地圖視圖的 10%
選項 類型 預設值 描述
pane 字串 'overlayPane' 預設情況下,圖層將新增至地圖的 覆蓋窗格。覆寫此選項將導致圖層預設放置在另一個窗格上。
attribution 字串 null 要在貢獻者控制項中顯示的字串,例如「© OpenStreetMap 貢獻者」。它描述圖層資料,並且通常是對版權所有者和圖磚提供者的法律義務。

事件

事件 資料 描述
update 事件 當渲染器更新其邊界、中心和縮放時觸發,例如當其地圖移動時
事件 資料 描述
add 事件 將圖層新增至地圖後觸發
remove 事件 將圖層從地圖移除後觸發
事件 資料 描述
popupopen PopupEvent 當繫結至此圖層的彈出視窗開啟時觸發
popupclose PopupEvent 當繫結至此圖層的彈出視窗關閉時觸發
事件 資料 描述
tooltipopen TooltipEvent 當繫結至此圖層的工具提示開啟時觸發。
tooltipclose TooltipEvent 當繫結至此圖層的工具提示關閉時觸發。

方法

方法 回傳值 描述
addTo(<Map|LayerGroup> map) this

將圖層新增至給定的地圖或圖層群組。

remove() this

從目前活動的地圖中移除圖層。

removeFrom(<地圖> map) this

從給定的地圖移除圖層

removeFrom(<LayerGroup> group) this

從給定的 LayerGroup 移除圖層

getPane(<字串> name?) HTMLElement

傳回代表地圖上具名窗格的 HTMLElement。如果省略 name,則傳回此圖層的窗格。

getAttribution() 字串

貢獻者控制項 使用,傳回 貢獻者選項

方法 回傳值 描述
bindPopup(<字串|HTMLElement|Function|Popup> content, <Popup options> options?) this

使用傳遞的 content 將彈出視窗繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindPopup() this

移除先前使用 bindPopup 繫結的彈出視窗。

openPopup(<LatLng> latlng?) this

在指定的 latlng 或在預設的彈出視窗錨點(如果未傳遞 latlng)開啟繫結的彈出視窗。

closePopup() this

關閉繫結至此圖層的彈出視窗(如果已開啟)。

togglePopup() this

根據其目前狀態開啟或關閉繫結至此圖層的彈出視窗。

isPopupOpen() 布林值

如果繫結至此圖層的彈出視窗目前已開啟,則傳回 true

setPopupContent(<字串|HTMLElement|Popup> content) this

設定繫結至此圖層的彈出視窗內容。

getPopup() 彈出視窗

傳回繫結至此圖層的彈出視窗。

方法 回傳值 描述
bindTooltip(<字串|HTMLElement|Function|Tooltip> content, <Tooltip options> options?) this

使用傳遞的 content 將工具提示繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindTooltip() this

移除先前使用 bindTooltip 繫結的工具提示。

openTooltip(<LatLng> latlng?) this

在指定的 latlng 或在預設的工具提示錨點(如果未傳遞 latlng)開啟繫結的工具提示。

closeTooltip() this

關閉繫結至此圖層的工具提示(如果已開啟)。

toggleTooltip() this

根據其目前狀態開啟或關閉繫結至此圖層的工具提示。

isTooltipOpen() 布林值

如果繫結至此圖層的工具提示目前已開啟,則傳回 true

setTooltipContent(<字串|HTMLElement|Tooltip> content) this

設定繫結至此圖層的工具提示內容。

getTooltip() 提示

傳回繫結至此圖層的工具提示。

方法 回傳值 描述
on(<字串> type, <Function> fn, <Object> context?) this

將一個監聽器函數 (fn) 添加到物件的特定事件類型。您可以選擇性地指定監聽器的上下文(this 關鍵字將指向的物件)。您還可以傳遞幾個以空格分隔的類型(例如,'click dblclick')。

on(<Object> eventMap) this

添加一組類型/監聽器配對,例如 {click: onClick, mousemove: onMouseMove}

off(<字串> type, <Function> fn?, <Object> context?) this

移除先前添加的監聽器函數。如果沒有指定函數,它將從物件中移除該特定事件的所有監聽器。請注意,如果您將自定義上下文傳遞給 on,則必須將相同的上下文傳遞給 off 才能移除監聽器。

off(<Object> eventMap) this

移除一組類型/監聽器配對。

off() this

移除物件上所有事件的所有監聽器。這包括隱式附加的事件。

fire(<字串> type, <Object> data?, <Boolean> propagate?) this

觸發指定類型的事件。您可以選擇性地提供資料物件 — 監聽器函數的第一個參數將包含其屬性。事件可以選擇性地傳播到事件父級。

listens(<字串> type, <Boolean> propagate?) 布林值

如果特定事件類型有任何附加的監聽器,則返回 true。驗證可以選擇性地傳播,如果父級附加了監聽器,則它將返回 true

once() this

行為類似於 on(…),除了監聽器只會被觸發一次,然後被移除。

addEventParent(<Evented> obj) this

添加一個事件父級 — 一個 Evented,它將接收傳播的事件

removeEventParent(<Evented> obj) this

移除一個事件父級,因此它將停止接收傳播的事件

addEventListener() this

on(…) 的別名

removeEventListener() this

off(…) 的別名

clearAllEventListeners() this

off() 的別名

addOneTimeEventListener() this

once(…) 的別名

fireEvent() this

fire(…) 的別名

hasEventListeners() 布林值

listens(…) 的別名

函式

有幾個靜態函式可以在不實例化 L.SVG 的情況下呼叫
函式 回傳值 描述
create(<字串> name) SVGElement 傳回 SVGElement 的實例,對應於傳遞的類別名稱。例如,使用 'line' 將傳回 SVGLineElement 的實例。
pointsToPath(<Point[]> rings, <Boolean> closed) 字串 為多個環產生 SVG 路徑字串,每個環都轉換為 "M..L..L.." 指令

畫布

允許使用 <canvas> 顯示向量圖層。繼承自 Renderer

由於 技術限制,並非所有網頁瀏覽器都提供 Canvas,特別是 IE8,並且在某些邊緣情況下,重疊的幾何形狀可能無法正確顯示。

使用範例

預設情況下,對地圖中的所有路徑使用 Canvas

var map = L.map('map', {
	renderer: L.canvas()
});

使用具有特定向量幾何形狀額外邊距的 Canvas 渲染器

var map = L.map('map');
var myRenderer = L.canvas({ padding: 0.5 });
var line = L.polyline( coordinates, { renderer: myRenderer } );
var circle = L.circle( center, { renderer: myRenderer } );

建立

工廠 描述
L.canvas(<渲染器選項> options?) 使用給定的選項建立 Canvas 渲染器。

選項

選項 類型 預設值 描述
tolerance 數字 0 在地圖上的路徑/物件周圍擴展點擊容差的程度。
選項 類型 預設值 描述
邊距選項 數字 0.1 在地圖視圖周圍擴展裁剪區域的程度(相對於其大小),例如 0.1 將是每個方向上地圖視圖的 10%
選項 類型 預設值 描述
pane 字串 'overlayPane' 預設情況下,圖層將新增至地圖的 覆蓋窗格。覆寫此選項將導致圖層預設放置在另一個窗格上。
attribution 字串 null 要在貢獻者控制項中顯示的字串,例如「© OpenStreetMap 貢獻者」。它描述圖層資料,並且通常是對版權所有者和圖磚提供者的法律義務。

事件

事件 資料 描述
update 事件 當渲染器更新其邊界、中心和縮放時觸發,例如當其地圖移動時
事件 資料 描述
add 事件 將圖層新增至地圖後觸發
remove 事件 將圖層從地圖移除後觸發
事件 資料 描述
popupopen PopupEvent 當繫結至此圖層的彈出視窗開啟時觸發
popupclose PopupEvent 當繫結至此圖層的彈出視窗關閉時觸發
事件 資料 描述
tooltipopen TooltipEvent 當繫結至此圖層的工具提示開啟時觸發。
tooltipclose TooltipEvent 當繫結至此圖層的工具提示關閉時觸發。

方法

方法 回傳值 描述
addTo(<Map|LayerGroup> map) this

將圖層新增至給定的地圖或圖層群組。

remove() this

從目前活動的地圖中移除圖層。

removeFrom(<地圖> map) this

從給定的地圖移除圖層

removeFrom(<LayerGroup> group) this

從給定的 LayerGroup 移除圖層

getPane(<字串> name?) HTMLElement

傳回代表地圖上具名窗格的 HTMLElement。如果省略 name,則傳回此圖層的窗格。

getAttribution() 字串

貢獻者控制項 使用,傳回 貢獻者選項

方法 回傳值 描述
bindPopup(<字串|HTMLElement|Function|Popup> content, <Popup options> options?) this

使用傳遞的 content 將彈出視窗繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindPopup() this

移除先前使用 bindPopup 繫結的彈出視窗。

openPopup(<LatLng> latlng?) this

在指定的 latlng 或在預設的彈出視窗錨點(如果未傳遞 latlng)開啟繫結的彈出視窗。

closePopup() this

關閉繫結至此圖層的彈出視窗(如果已開啟)。

togglePopup() this

根據其目前狀態開啟或關閉繫結至此圖層的彈出視窗。

isPopupOpen() 布林值

如果繫結至此圖層的彈出視窗目前已開啟,則傳回 true

setPopupContent(<字串|HTMLElement|Popup> content) this

設定繫結至此圖層的彈出視窗內容。

getPopup() 彈出視窗

傳回繫結至此圖層的彈出視窗。

方法 回傳值 描述
bindTooltip(<字串|HTMLElement|Function|Tooltip> content, <Tooltip options> options?) this

使用傳遞的 content 將工具提示繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindTooltip() this

移除先前使用 bindTooltip 繫結的工具提示。

openTooltip(<LatLng> latlng?) this

在指定的 latlng 或在預設的工具提示錨點(如果未傳遞 latlng)開啟繫結的工具提示。

closeTooltip() this

關閉繫結至此圖層的工具提示(如果已開啟)。

toggleTooltip() this

根據其目前狀態開啟或關閉繫結至此圖層的工具提示。

isTooltipOpen() 布林值

如果繫結至此圖層的工具提示目前已開啟,則傳回 true

setTooltipContent(<字串|HTMLElement|Tooltip> content) this

設定繫結至此圖層的工具提示內容。

getTooltip() 提示

傳回繫結至此圖層的工具提示。

方法 回傳值 描述
on(<字串> type, <Function> fn, <Object> context?) this

將一個監聽器函數 (fn) 添加到物件的特定事件類型。您可以選擇性地指定監聽器的上下文(this 關鍵字將指向的物件)。您還可以傳遞幾個以空格分隔的類型(例如,'click dblclick')。

on(<Object> eventMap) this

添加一組類型/監聽器配對,例如 {click: onClick, mousemove: onMouseMove}

off(<字串> type, <Function> fn?, <Object> context?) this

移除先前添加的監聽器函數。如果沒有指定函數,它將從物件中移除該特定事件的所有監聽器。請注意,如果您將自定義上下文傳遞給 on,則必須將相同的上下文傳遞給 off 才能移除監聽器。

off(<Object> eventMap) this

移除一組類型/監聽器配對。

off() this

移除物件上所有事件的所有監聽器。這包括隱式附加的事件。

fire(<字串> type, <Object> data?, <Boolean> propagate?) this

觸發指定類型的事件。您可以選擇性地提供資料物件 — 監聽器函數的第一個參數將包含其屬性。事件可以選擇性地傳播到事件父級。

listens(<字串> type, <Boolean> propagate?) 布林值

如果特定事件類型有任何附加的監聽器,則返回 true。驗證可以選擇性地傳播,如果父級附加了監聽器,則它將返回 true

once() this

行為類似於 on(…),除了監聽器只會被觸發一次,然後被移除。

addEventParent(<Evented> obj) this

添加一個事件父級 — 一個 Evented,它將接收傳播的事件

removeEventParent(<Evented> obj) this

移除一個事件父級,因此它將停止接收傳播的事件

addEventListener() this

on(…) 的別名

removeEventListener() this

off(…) 的別名

clearAllEventListeners() this

off() 的別名

addOneTimeEventListener() this

once(…) 的別名

fireEvent() this

fire(…) 的別名

hasEventListeners() 布林值

listens(…) 的別名

LayerGroup

用於對多個圖層進行分組,並將其作為一個圖層來處理。如果將其新增至地圖,則從群組新增或移除的任何圖層也將在地圖上新增/移除。擴展自 Layer

使用範例

L.layerGroup([marker1, marker2])
	.addLayer(polyline)
	.addTo(map);

建立

工廠 描述
L.layerGroup(<Layer[]> layers?, <Object> options?) 建立圖層群組,可選擇提供一組初始圖層和 options 物件。

選項

選項 類型 預設值 描述
interactive 布林值 true 如果為 false,則圖層將不會發出滑鼠事件,並且將作為底層地圖的一部分。
bubblingMouseEvents 布林值 true 當為 true 時,此圖層上的滑鼠事件將會在該地圖上觸發相同的事件(除非使用 L.DomEvent.stopPropagation)。
選項 類型 預設值 描述
pane 字串 'overlayPane' 預設情況下,圖層將新增至地圖的 覆蓋窗格。覆寫此選項將導致圖層預設放置在另一個窗格上。
attribution 字串 null 要在貢獻者控制項中顯示的字串,例如「© OpenStreetMap 貢獻者」。它描述圖層資料,並且通常是對版權所有者和圖磚提供者的法律義務。

事件

事件 資料 描述
click MouseEvent 當使用者點擊(或輕觸)圖層時觸發。
dblclick MouseEvent 當使用者在圖層上雙擊(或雙輕觸)時觸發。
mousedown MouseEvent 當使用者在圖層上按下滑鼠按鈕時觸發。
mouseup MouseEvent 當使用者釋放在圖層上按下的滑鼠按鈕時觸發。
mouseover MouseEvent 當滑鼠進入圖層時觸發。
mouseout MouseEvent 當滑鼠離開圖層時觸發。
contextmenu MouseEvent 當使用者在圖層上按下滑鼠右鍵時觸發,如果此事件上有接聽程式,則會阻止顯示預設的瀏覽器上下文功能表。當使用者按住單次觸摸一秒鐘時(也稱為長按),也會在行動裝置上觸發。
事件 資料 描述
add 事件 將圖層新增至地圖後觸發
remove 事件 將圖層從地圖移除後觸發
事件 資料 描述
popupopen PopupEvent 當繫結至此圖層的彈出視窗開啟時觸發
popupclose PopupEvent 當繫結至此圖層的彈出視窗關閉時觸發
事件 資料 描述
tooltipopen TooltipEvent 當繫結至此圖層的工具提示開啟時觸發。
tooltipclose TooltipEvent 當繫結至此圖層的工具提示關閉時觸發。

方法

方法 回傳值 描述
toGeoJSON(<Number|false> precision?) Object

座標值使用具有給定 precisionformatNum 函數進行四捨五入。傳回圖層群組的 GeoJSON 表示形式(作為 GeoJSON FeatureCollectionGeometryCollectionMultiPoint)。

addLayer(<Layer> layer) this

將給定的圖層新增至群組。

removeLayer(<Layer> layer) this

從群組中移除給定的圖層。

removeLayer(<Number> id) this

從群組中移除具有給定內部 ID 的圖層。

hasLayer(<Layer> layer) 布林值

如果給定的圖層目前已新增至群組,則傳回 true

hasLayer(<Number> id) 布林值

如果給定的內部 ID 目前已新增至群組,則傳回 true

clearLayers() this

從群組中移除所有圖層。

invoke(<字串> methodName, ) this

在包含在此群組中的每個圖層上呼叫 methodName,並傳遞任何其他參數。如果包含的圖層未實作 methodName,則無效。

eachLayer(<Function> fn, <Object> context?) this

反覆運算群組的圖層,可選擇指定反覆運算器函式的內容。

group.eachLayer(function (layer) {
	layer.bindPopup('Hello');
});
getLayer(<Number> id) Layer

傳回具有給定內部 ID 的圖層。

getLayers() 圖層[]

傳回新增至群組的所有圖層的陣列。

setZIndex(<Number> zIndex) this

在包含在此群組中的每個圖層上呼叫 setZIndex,並傳遞 z 索引。

getLayerId(<Layer> layer) 數字

傳回圖層的內部 ID

方法 回傳值 描述
addTo(<Map|LayerGroup> map) this

將圖層新增至給定的地圖或圖層群組。

remove() this

從目前活動的地圖中移除圖層。

removeFrom(<地圖> map) this

從給定的地圖移除圖層

removeFrom(<LayerGroup> group) this

從給定的 LayerGroup 移除圖層

getPane(<字串> name?) HTMLElement

傳回代表地圖上具名窗格的 HTMLElement。如果省略 name,則傳回此圖層的窗格。

getAttribution() 字串

貢獻者控制項 使用,傳回 貢獻者選項

方法 回傳值 描述
bindPopup(<字串|HTMLElement|Function|Popup> content, <Popup options> options?) this

使用傳遞的 content 將彈出視窗繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindPopup() this

移除先前使用 bindPopup 繫結的彈出視窗。

openPopup(<LatLng> latlng?) this

在指定的 latlng 或在預設的彈出視窗錨點(如果未傳遞 latlng)開啟繫結的彈出視窗。

closePopup() this

關閉繫結至此圖層的彈出視窗(如果已開啟)。

togglePopup() this

根據其目前狀態開啟或關閉繫結至此圖層的彈出視窗。

isPopupOpen() 布林值

如果繫結至此圖層的彈出視窗目前已開啟,則傳回 true

setPopupContent(<字串|HTMLElement|Popup> content) this

設定繫結至此圖層的彈出視窗內容。

getPopup() 彈出視窗

傳回繫結至此圖層的彈出視窗。

方法 回傳值 描述
bindTooltip(<字串|HTMLElement|Function|Tooltip> content, <Tooltip options> options?) this

使用傳遞的 content 將工具提示繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindTooltip() this

移除先前使用 bindTooltip 繫結的工具提示。

openTooltip(<LatLng> latlng?) this

在指定的 latlng 或在預設的工具提示錨點(如果未傳遞 latlng)開啟繫結的工具提示。

closeTooltip() this

關閉繫結至此圖層的工具提示(如果已開啟)。

toggleTooltip() this

根據其目前狀態開啟或關閉繫結至此圖層的工具提示。

isTooltipOpen() 布林值

如果繫結至此圖層的工具提示目前已開啟,則傳回 true

setTooltipContent(<字串|HTMLElement|Tooltip> content) this

設定繫結至此圖層的工具提示內容。

getTooltip() 提示

傳回繫結至此圖層的工具提示。

方法 回傳值 描述
on(<字串> type, <Function> fn, <Object> context?) this

將一個監聽器函數 (fn) 添加到物件的特定事件類型。您可以選擇性地指定監聽器的上下文(this 關鍵字將指向的物件)。您還可以傳遞幾個以空格分隔的類型(例如,'click dblclick')。

on(<Object> eventMap) this

添加一組類型/監聽器配對,例如 {click: onClick, mousemove: onMouseMove}

off(<字串> type, <Function> fn?, <Object> context?) this

移除先前添加的監聽器函數。如果沒有指定函數,它將從物件中移除該特定事件的所有監聽器。請注意,如果您將自定義上下文傳遞給 on,則必須將相同的上下文傳遞給 off 才能移除監聽器。

off(<Object> eventMap) this

移除一組類型/監聽器配對。

off() this

移除物件上所有事件的所有監聽器。這包括隱式附加的事件。

fire(<字串> type, <Object> data?, <Boolean> propagate?) this

觸發指定類型的事件。您可以選擇性地提供資料物件 — 監聽器函數的第一個參數將包含其屬性。事件可以選擇性地傳播到事件父級。

listens(<字串> type, <Boolean> propagate?) 布林值

如果特定事件類型有任何附加的監聽器,則返回 true。驗證可以選擇性地傳播,如果父級附加了監聽器,則它將返回 true

once() this

行為類似於 on(…),除了監聽器只會被觸發一次,然後被移除。

addEventParent(<Evented> obj) this

添加一個事件父級 — 一個 Evented,它將接收傳播的事件

removeEventParent(<Evented> obj) this

移除一個事件父級,因此它將停止接收傳播的事件

addEventListener() this

on(…) 的別名

removeEventListener() this

off(…) 的別名

clearAllEventListeners() this

off() 的別名

addOneTimeEventListener() this

once(…) 的別名

fireEvent() this

fire(…) 的別名

hasEventListeners() 布林值

listens(…) 的別名

FeatureGroup

擴展的 LayerGroup,可更輕鬆地對其所有成員圖層執行相同的操作

使用範例

L.featureGroup([marker1, marker2, polyline])
	.bindPopup('Hello world!')
	.on('click', function() { alert('Clicked on a member of the group!'); })
	.addTo(map);

建立

工廠 描述
L.featureGroup(<Layer[]> layers?, <Object> options?) 建立要素群組,可選擇提供一組初始圖層和 options 物件。

選項

選項 類型 預設值 描述
interactive 布林值 true 如果為 false,則圖層將不會發出滑鼠事件,並且將作為底層地圖的一部分。
bubblingMouseEvents 布林值 true 當為 true 時,此圖層上的滑鼠事件將會在該地圖上觸發相同的事件(除非使用 L.DomEvent.stopPropagation)。
選項 類型 預設值 描述
pane 字串 'overlayPane' 預設情況下,圖層將新增至地圖的 覆蓋窗格。覆寫此選項將導致圖層預設放置在另一個窗格上。
attribution 字串 null 要在貢獻者控制項中顯示的字串,例如「© OpenStreetMap 貢獻者」。它描述圖層資料,並且通常是對版權所有者和圖磚提供者的法律義務。

事件

事件 資料 描述
layeradd LayerEvent 當圖層新增至此 FeatureGroup 時觸發
layerremove LayerEvent 當圖層從此 FeatureGroup 移除時觸發
事件 資料 描述
click MouseEvent 當使用者點擊(或輕觸)圖層時觸發。
dblclick MouseEvent 當使用者在圖層上雙擊(或雙輕觸)時觸發。
mousedown MouseEvent 當使用者在圖層上按下滑鼠按鈕時觸發。
mouseup MouseEvent 當使用者釋放在圖層上按下的滑鼠按鈕時觸發。
mouseover MouseEvent 當滑鼠進入圖層時觸發。
mouseout MouseEvent 當滑鼠離開圖層時觸發。
contextmenu MouseEvent 當使用者在圖層上按下滑鼠右鍵時觸發,如果此事件上有接聽程式,則會阻止顯示預設的瀏覽器上下文功能表。當使用者按住單次觸摸一秒鐘時(也稱為長按),也會在行動裝置上觸發。
事件 資料 描述
add 事件 將圖層新增至地圖後觸發
remove 事件 將圖層從地圖移除後觸發
事件 資料 描述
popupopen PopupEvent 當繫結至此圖層的彈出視窗開啟時觸發
popupclose PopupEvent 當繫結至此圖層的彈出視窗關閉時觸發
事件 資料 描述
tooltipopen TooltipEvent 當繫結至此圖層的工具提示開啟時觸發。
tooltipclose TooltipEvent 當繫結至此圖層的工具提示關閉時觸發。

方法

方法 回傳值 描述
setStyle(<路徑選項> style) this

將給定的路徑選項設定為具有 setStyle 方法的群組的每個圖層。

bringToFront() this

將圖層群組帶到所有其他圖層的頂部

bringToBack() this

將圖層群組帶到所有其他圖層的底部

getBounds() LatLngBounds

傳回要素群組的 LatLngBounds(從其子系的邊界和座標建立)。

方法 回傳值 描述
toGeoJSON(<Number|false> precision?) Object

座標值使用具有給定 precisionformatNum 函數進行四捨五入。傳回圖層群組的 GeoJSON 表示形式(作為 GeoJSON FeatureCollectionGeometryCollectionMultiPoint)。

addLayer(<Layer> layer) this

將給定的圖層新增至群組。

removeLayer(<Layer> layer) this

從群組中移除給定的圖層。

removeLayer(<Number> id) this

從群組中移除具有給定內部 ID 的圖層。

hasLayer(<Layer> layer) 布林值

如果給定的圖層目前已新增至群組,則傳回 true

hasLayer(<Number> id) 布林值

如果給定的內部 ID 目前已新增至群組,則傳回 true

clearLayers() this

從群組中移除所有圖層。

invoke(<字串> methodName, ) this

在包含在此群組中的每個圖層上呼叫 methodName,並傳遞任何其他參數。如果包含的圖層未實作 methodName,則無效。

eachLayer(<Function> fn, <Object> context?) this

反覆運算群組的圖層,可選擇指定反覆運算器函式的內容。

group.eachLayer(function (layer) {
	layer.bindPopup('Hello');
});
getLayer(<Number> id) Layer

傳回具有給定內部 ID 的圖層。

getLayers() 圖層[]

傳回新增至群組的所有圖層的陣列。

setZIndex(<Number> zIndex) this

在包含在此群組中的每個圖層上呼叫 setZIndex,並傳遞 z 索引。

getLayerId(<Layer> layer) 數字

傳回圖層的內部 ID

方法 回傳值 描述
addTo(<Map|LayerGroup> map) this

將圖層新增至給定的地圖或圖層群組。

remove() this

從目前活動的地圖中移除圖層。

removeFrom(<地圖> map) this

從給定的地圖移除圖層

removeFrom(<LayerGroup> group) this

從給定的 LayerGroup 移除圖層

getPane(<字串> name?) HTMLElement

傳回代表地圖上具名窗格的 HTMLElement。如果省略 name,則傳回此圖層的窗格。

getAttribution() 字串

貢獻者控制項 使用,傳回 貢獻者選項

方法 回傳值 描述
bindPopup(<字串|HTMLElement|Function|Popup> content, <Popup options> options?) this

使用傳遞的 content 將彈出視窗繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindPopup() this

移除先前使用 bindPopup 繫結的彈出視窗。

openPopup(<LatLng> latlng?) this

在指定的 latlng 或在預設的彈出視窗錨點(如果未傳遞 latlng)開啟繫結的彈出視窗。

closePopup() this

關閉繫結至此圖層的彈出視窗(如果已開啟)。

togglePopup() this

根據其目前狀態開啟或關閉繫結至此圖層的彈出視窗。

isPopupOpen() 布林值

如果繫結至此圖層的彈出視窗目前已開啟,則傳回 true

setPopupContent(<字串|HTMLElement|Popup> content) this

設定繫結至此圖層的彈出視窗內容。

getPopup() 彈出視窗

傳回繫結至此圖層的彈出視窗。

方法 回傳值 描述
bindTooltip(<字串|HTMLElement|Function|Tooltip> content, <Tooltip options> options?) this

使用傳遞的 content 將工具提示繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindTooltip() this

移除先前使用 bindTooltip 繫結的工具提示。

openTooltip(<LatLng> latlng?) this

在指定的 latlng 或在預設的工具提示錨點(如果未傳遞 latlng)開啟繫結的工具提示。

closeTooltip() this

關閉繫結至此圖層的工具提示(如果已開啟)。

toggleTooltip() this

根據其目前狀態開啟或關閉繫結至此圖層的工具提示。

isTooltipOpen() 布林值

如果繫結至此圖層的工具提示目前已開啟,則傳回 true

setTooltipContent(<字串|HTMLElement|Tooltip> content) this

設定繫結至此圖層的工具提示內容。

getTooltip() 提示

傳回繫結至此圖層的工具提示。

方法 回傳值 描述
on(<字串> type, <Function> fn, <Object> context?) this

將一個監聽器函數 (fn) 添加到物件的特定事件類型。您可以選擇性地指定監聽器的上下文(this 關鍵字將指向的物件)。您還可以傳遞幾個以空格分隔的類型(例如,'click dblclick')。

on(<Object> eventMap) this

添加一組類型/監聽器配對,例如 {click: onClick, mousemove: onMouseMove}

off(<字串> type, <Function> fn?, <Object> context?) this

移除先前添加的監聽器函數。如果沒有指定函數,它將從物件中移除該特定事件的所有監聽器。請注意,如果您將自定義上下文傳遞給 on,則必須將相同的上下文傳遞給 off 才能移除監聽器。

off(<Object> eventMap) this

移除一組類型/監聽器配對。

off() this

移除物件上所有事件的所有監聽器。這包括隱式附加的事件。

fire(<字串> type, <Object> data?, <Boolean> propagate?) this

觸發指定類型的事件。您可以選擇性地提供資料物件 — 監聽器函數的第一個參數將包含其屬性。事件可以選擇性地傳播到事件父級。

listens(<字串> type, <Boolean> propagate?) 布林值

如果特定事件類型有任何附加的監聽器,則返回 true。驗證可以選擇性地傳播,如果父級附加了監聽器,則它將返回 true

once() this

行為類似於 on(…),除了監聽器只會被觸發一次,然後被移除。

addEventParent(<Evented> obj) this

添加一個事件父級 — 一個 Evented,它將接收傳播的事件

removeEventParent(<Evented> obj) this

移除一個事件父級,因此它將停止接收傳播的事件

addEventListener() this

on(…) 的別名

removeEventListener() this

off(…) 的別名

clearAllEventListeners() this

off() 的別名

addOneTimeEventListener() this

once(…) 的別名

fireEvent() this

fire(…) 的別名

hasEventListeners() 布林值

listens(…) 的別名

GeoJSON

表示 GeoJSON 物件或 GeoJSON 物件的陣列。允許您剖析 GeoJSON 資料並將其顯示在地圖上。擴展自 FeatureGroup

使用範例

L.geoJSON(data, {
	style: function (feature) {
		return {color: feature.properties.color};
	}
}).bindPopup(function (layer) {
	return layer.feature.properties.description;
}).addTo(map);

建立

工廠 描述
L.geoJSON(<Object> geojson?, <GeoJSON 選項> options?) 建立 GeoJSON 圖層。可選擇接受 GeoJSON 格式的物件以顯示在地圖上(您也可以稍後使用 addData 方法新增)和 options 物件。

選項

選項 類型 預設值 描述
pointToLayer 函式 * 定義 GeoJSON 點如何產生 Leaflet 圖層的 Function。當新增資料時,它會在內部呼叫,並傳遞 GeoJSON 點要素及其 LatLng。預設值是產生預設的 Marker
function(geoJsonPoint, latlng) {
	return L.marker(latlng);
}
style 函式 * 定義用於設定 GeoJSON 線條和多邊形樣式的 Path 選項Function,當新增資料時,會在內部呼叫。預設值是不覆寫任何預設值
function (geoJsonFeature) {
	return {}
}
onEachFeature 函式 * 一個 Function,在每個建立的 Feature 被建立和設定樣式後會被呼叫一次。適用於將事件和彈出視窗附加到圖徵。預設值是不對新建立的圖層執行任何操作。
function (feature, layer) {}
filter 函式 * 一個 Function,用於決定是否包含圖徵。預設值是包含所有圖徵。
function (geoJsonFeature) {
	return true;
}

注意:動態變更 filter 選項只會影響新加入的資料。它不會重新評估已包含的圖徵。

coordsToLatLng 函式 * 一個 Function,用於將 GeoJSON 座標轉換為 LatLng。預設值是 coordsToLatLng 靜態方法。
markersInheritOptions 布林值 false 「Point」類型圖徵的預設標記是否繼承自群組選項。
選項 類型 預設值 描述
interactive 布林值 true 如果為 false,則圖層將不會發出滑鼠事件,並且將作為底層地圖的一部分。
bubblingMouseEvents 布林值 true 當為 true 時,此圖層上的滑鼠事件將會在該地圖上觸發相同的事件(除非使用 L.DomEvent.stopPropagation)。
選項 類型 預設值 描述
pane 字串 'overlayPane' 預設情況下,圖層將新增至地圖的 覆蓋窗格。覆寫此選項將導致圖層預設放置在另一個窗格上。
attribution 字串 null 要在貢獻者控制項中顯示的字串,例如「© OpenStreetMap 貢獻者」。它描述圖層資料,並且通常是對版權所有者和圖磚提供者的法律義務。

事件

事件 資料 描述
layeradd LayerEvent 當圖層新增至此 FeatureGroup 時觸發
layerremove LayerEvent 當圖層從此 FeatureGroup 移除時觸發
事件 資料 描述
click MouseEvent 當使用者點擊(或輕觸)圖層時觸發。
dblclick MouseEvent 當使用者在圖層上雙擊(或雙輕觸)時觸發。
mousedown MouseEvent 當使用者在圖層上按下滑鼠按鈕時觸發。
mouseup MouseEvent 當使用者釋放在圖層上按下的滑鼠按鈕時觸發。
mouseover MouseEvent 當滑鼠進入圖層時觸發。
mouseout MouseEvent 當滑鼠離開圖層時觸發。
contextmenu MouseEvent 當使用者在圖層上按下滑鼠右鍵時觸發,如果此事件上有接聽程式,則會阻止顯示預設的瀏覽器上下文功能表。當使用者按住單次觸摸一秒鐘時(也稱為長按),也會在行動裝置上觸發。
事件 資料 描述
add 事件 將圖層新增至地圖後觸發
remove 事件 將圖層從地圖移除後觸發
事件 資料 描述
popupopen PopupEvent 當繫結至此圖層的彈出視窗開啟時觸發
popupclose PopupEvent 當繫結至此圖層的彈出視窗關閉時觸發
事件 資料 描述
tooltipopen TooltipEvent 當繫結至此圖層的工具提示開啟時觸發。
tooltipclose TooltipEvent 當繫結至此圖層的工具提示關閉時觸發。

方法

方法 回傳值 描述
addData(data) this

將 GeoJSON 物件加入到圖層。

resetStyle(layer?) this

將給定向量圖層的樣式重設為原始 GeoJSON 樣式,適用於在滑鼠懸停事件後重設樣式。如果省略 layer,則會重設目前圖層中所有圖徵的樣式。

setStyle(style) this

使用給定的樣式函數變更 GeoJSON 向量圖層的樣式。

方法 回傳值 描述
bringToFront() this

將圖層群組帶到所有其他圖層的頂部

bringToBack() this

將圖層群組帶到所有其他圖層的底部

getBounds() LatLngBounds

傳回要素群組的 LatLngBounds(從其子系的邊界和座標建立)。

方法 回傳值 描述
toGeoJSON(<Number|false> precision?) Object

座標值使用具有給定 precisionformatNum 函數進行四捨五入。傳回圖層群組的 GeoJSON 表示形式(作為 GeoJSON FeatureCollectionGeometryCollectionMultiPoint)。

addLayer(<Layer> layer) this

將給定的圖層新增至群組。

removeLayer(<Layer> layer) this

從群組中移除給定的圖層。

removeLayer(<Number> id) this

從群組中移除具有給定內部 ID 的圖層。

hasLayer(<Layer> layer) 布林值

如果給定的圖層目前已新增至群組,則傳回 true

hasLayer(<Number> id) 布林值

如果給定的內部 ID 目前已新增至群組,則傳回 true

clearLayers() this

從群組中移除所有圖層。

invoke(<字串> methodName, ) this

在包含在此群組中的每個圖層上呼叫 methodName,並傳遞任何其他參數。如果包含的圖層未實作 methodName,則無效。

eachLayer(<Function> fn, <Object> context?) this

反覆運算群組的圖層,可選擇指定反覆運算器函式的內容。

group.eachLayer(function (layer) {
	layer.bindPopup('Hello');
});
getLayer(<Number> id) Layer

傳回具有給定內部 ID 的圖層。

getLayers() 圖層[]

傳回新增至群組的所有圖層的陣列。

setZIndex(<Number> zIndex) this

在包含在此群組中的每個圖層上呼叫 setZIndex,並傳遞 z 索引。

getLayerId(<Layer> layer) 數字

傳回圖層的內部 ID

方法 回傳值 描述
addTo(<Map|LayerGroup> map) this

將圖層新增至給定的地圖或圖層群組。

remove() this

從目前活動的地圖中移除圖層。

removeFrom(<地圖> map) this

從給定的地圖移除圖層

removeFrom(<LayerGroup> group) this

從給定的 LayerGroup 移除圖層

getPane(<字串> name?) HTMLElement

傳回代表地圖上具名窗格的 HTMLElement。如果省略 name,則傳回此圖層的窗格。

getAttribution() 字串

貢獻者控制項 使用,傳回 貢獻者選項

方法 回傳值 描述
bindPopup(<字串|HTMLElement|Function|Popup> content, <Popup options> options?) this

使用傳遞的 content 將彈出視窗繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindPopup() this

移除先前使用 bindPopup 繫結的彈出視窗。

openPopup(<LatLng> latlng?) this

在指定的 latlng 或在預設的彈出視窗錨點(如果未傳遞 latlng)開啟繫結的彈出視窗。

closePopup() this

關閉繫結至此圖層的彈出視窗(如果已開啟)。

togglePopup() this

根據其目前狀態開啟或關閉繫結至此圖層的彈出視窗。

isPopupOpen() 布林值

如果繫結至此圖層的彈出視窗目前已開啟,則傳回 true

setPopupContent(<字串|HTMLElement|Popup> content) this

設定繫結至此圖層的彈出視窗內容。

getPopup() 彈出視窗

傳回繫結至此圖層的彈出視窗。

方法 回傳值 描述
bindTooltip(<字串|HTMLElement|Function|Tooltip> content, <Tooltip options> options?) this

使用傳遞的 content 將工具提示繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindTooltip() this

移除先前使用 bindTooltip 繫結的工具提示。

openTooltip(<LatLng> latlng?) this

在指定的 latlng 或在預設的工具提示錨點(如果未傳遞 latlng)開啟繫結的工具提示。

closeTooltip() this

關閉繫結至此圖層的工具提示(如果已開啟)。

toggleTooltip() this

根據其目前狀態開啟或關閉繫結至此圖層的工具提示。

isTooltipOpen() 布林值

如果繫結至此圖層的工具提示目前已開啟,則傳回 true

setTooltipContent(<字串|HTMLElement|Tooltip> content) this

設定繫結至此圖層的工具提示內容。

getTooltip() 提示

傳回繫結至此圖層的工具提示。

方法 回傳值 描述
on(<字串> type, <Function> fn, <Object> context?) this

將一個監聽器函數 (fn) 添加到物件的特定事件類型。您可以選擇性地指定監聽器的上下文(this 關鍵字將指向的物件)。您還可以傳遞幾個以空格分隔的類型(例如,'click dblclick')。

on(<Object> eventMap) this

添加一組類型/監聽器配對,例如 {click: onClick, mousemove: onMouseMove}

off(<字串> type, <Function> fn?, <Object> context?) this

移除先前添加的監聽器函數。如果沒有指定函數,它將從物件中移除該特定事件的所有監聽器。請注意,如果您將自定義上下文傳遞給 on,則必須將相同的上下文傳遞給 off 才能移除監聽器。

off(<Object> eventMap) this

移除一組類型/監聽器配對。

off() this

移除物件上所有事件的所有監聽器。這包括隱式附加的事件。

fire(<字串> type, <Object> data?, <Boolean> propagate?) this

觸發指定類型的事件。您可以選擇性地提供資料物件 — 監聽器函數的第一個參數將包含其屬性。事件可以選擇性地傳播到事件父級。

listens(<字串> type, <Boolean> propagate?) 布林值

如果特定事件類型有任何附加的監聽器,則返回 true。驗證可以選擇性地傳播,如果父級附加了監聽器,則它將返回 true

once() this

行為類似於 on(…),除了監聽器只會被觸發一次,然後被移除。

addEventParent(<Evented> obj) this

添加一個事件父級 — 一個 Evented,它將接收傳播的事件

removeEventParent(<Evented> obj) this

移除一個事件父級,因此它將停止接收傳播的事件

addEventListener() this

on(…) 的別名

removeEventListener() this

off(…) 的別名

clearAllEventListeners() this

off() 的別名

addOneTimeEventListener() this

once(…) 的別名

fireEvent() this

fire(…) 的別名

hasEventListeners() 布林值

listens(…) 的別名

函式

有幾個靜態函數可以在不實例化 L.GeoJSON 的情況下呼叫
函式 回傳值 描述
geometryToLayer(<Object> featureData, <GeoJSON 選項> options?) Layer 從給定的 GeoJSON 圖徵建立 Layer。如果提供作為選項,可以使用自訂的 pointToLayer 和/或 coordsToLatLng 函數。
coordsToLatLng(<Array> coords) LatLng 從 GeoJSON 中用於點的 2 個數字(經度、緯度)或 3 個數字(經度、緯度、海拔高度)的陣列建立 LatLng 物件。
coordsToLatLngs(<Array> coords, <Number> levelsDeep?, <Function> coordsToLatLng?) Array 從 GeoJSON 座標陣列建立 LatLng 的多維陣列。levelsDeep 指定巢狀層級(0 表示點的陣列,1 表示點的陣列的陣列,依此類推,預設值為 0)。可以使用自訂的 coordsToLatLng 函數。
latLngToCoords(<LatLng> latlng, <Number|false> precision?) Array coordsToLatLng 的反向操作。座標值會使用 formatNum 函數進行四捨五入。
latLngsToCoords(<Array> latlngs, <Number> levelsDeep?, <Boolean> closed?, <Number|false> precision?) Array coordsToLatLngs 的反向操作。closed 決定是否應將第一個點附加到陣列末尾以關閉圖徵,僅當 levelsDeep 為 0 時使用。預設值為 False。座標值會使用 formatNum 函數進行四捨五入。
asFeature(<Object> geojson) Object 將 GeoJSON 幾何/圖徵正規化為 GeoJSON 圖徵。

GridLayer

用於處理 HTML 元素平鋪網格的通用類別。這是所有圖塊圖層的基類,並取代了 TileLayer.Canvas。可以擴充 GridLayer 以建立 HTML 元素(例如 <canvas><img><div>)的平鋪網格。GridLayer 將會處理為您建立和動畫這些 DOM 元素。

使用範例

同步使用

若要建立自訂圖層,請擴充 GridLayer 並實作 createTile() 方法,該方法會傳遞一個 Point 物件,其中包含 xyz(縮放層級)座標以繪製您的圖塊。

var CanvasLayer = L.GridLayer.extend({
    createTile: function(coords){
        // create a <canvas> element for drawing
        var tile = L.DomUtil.create('canvas', 'leaflet-tile');

        // setup tile width and height according to the options
        var size = this.getTileSize();
        tile.width = size.x;
        tile.height = size.y;

        // get a canvas context and draw something on it using coords.x, coords.y and coords.z
        var ctx = tile.getContext('2d');

        // return the tile so it can be rendered on screen
        return tile;
    }
});

非同步使用

圖塊建立也可以是非同步的,當使用第三方繪圖庫時這很有用。一旦圖塊完成繪製,就可以將其傳遞給 done() 回呼。

var CanvasLayer = L.GridLayer.extend({
    createTile: function(coords, done){
        var error;

        // create a <canvas> element for drawing
        var tile = L.DomUtil.create('canvas', 'leaflet-tile');

        // setup tile width and height according to the options
        var size = this.getTileSize();
        tile.width = size.x;
        tile.height = size.y;

        // draw something asynchronously and pass the tile to the done() callback
        setTimeout(function() {
            done(error, tile);
        }, 1000);

        return tile;
    }
});

建立

工廠 描述
L.gridLayer(<GridLayer 選項> options?) 使用提供的選項建立 GridLayer 的新執行個體。

選項

選項 類型 預設值 描述
tileSize 數字|Point 256 網格中圖磚的寬度和高度。如果寬度和高度相等,則使用數字,否則使用 L.point(width, height)
opacity 數字 1.0 圖磚的不透明度。可以在 createTile() 函數中使用。
updateWhenIdle 布林值 (相依) 僅在平移結束時載入新圖磚。在行動瀏覽器上預設為 true,以避免過多請求並保持流暢的導覽。否則為 false,以便在平移期間顯示新圖磚,因為在桌上型電腦瀏覽器中,很容易在 keepBuffer 選項之外平移。
updateWhenZooming 布林值 true 預設情況下,平滑縮放動畫(在 觸控縮放flyTo() 期間)將每當達到整數縮放層級時更新網格圖層。將此選項設定為 false 將僅在平滑動畫結束時更新網格圖層。
updateInterval 數字 200 平移時,圖磚的更新頻率不會超過每 updateInterval 毫秒一次。
zIndex 數字 1 圖磚圖層的明確 zIndex。
bounds LatLngBounds 未定義 如果設定,則圖磚只會在設定的 LatLngBounds 內載入。
minZoom 數字 0 將顯示此圖層的最小縮放層級(包含)。
maxZoom 數字 未定義 將顯示此圖層的最大縮放層級(包含)。
maxNativeZoom 數字 未定義 圖磚來源可用的最大縮放編號。如果已指定,則所有高於 maxNativeZoom 層級的縮放層級上的圖磚都將從 maxNativeZoom 層級載入並自動縮放。
minNativeZoom 數字 未定義 圖磚來源可用的最小縮放編號。如果已指定,則所有低於 minNativeZoom 層級的縮放層級上的圖磚都將從 minNativeZoom 層級載入並自動縮放。
noWrap 布林值 false 圖層是否環繞子午線。如果為 true,則 GridLayer 只會在低縮放層級顯示一次。當 地圖 CRS 不環繞時沒有效果。可以與 bounds 結合使用,以防止請求 CRS 限制之外的圖磚。
pane 字串 'tilePane' 將網格圖層新增到的 地圖窗格
className 字串 '' 要指派給圖磚圖層的自訂類別名稱。預設為空。
keepBuffer 數字 2 平移地圖時,在卸載圖磚之前,保留這麼多列和行的圖磚。
選項 類型 預設值 描述
attribution 字串 null 要在貢獻者控制項中顯示的字串,例如「© OpenStreetMap 貢獻者」。它描述圖層資料,並且通常是對版權所有者和圖磚提供者的法律義務。

事件

事件 資料 描述
loading 事件 當網格圖層開始載入圖磚時觸發。
tileunload TileEvent 當圖磚被移除時觸發(例如,當圖磚移出螢幕時)。
tileloadstart TileEvent 當請求圖磚並開始載入時觸發。
tileerror TileErrorEvent 當載入圖磚時發生錯誤時觸發。
tileload TileEvent 當圖磚載入時觸發。
load 事件 當網格圖層載入所有可見的圖磚時觸發。
事件 資料 描述
add 事件 將圖層新增至地圖後觸發
remove 事件 將圖層從地圖移除後觸發
事件 資料 描述
popupopen PopupEvent 當繫結至此圖層的彈出視窗開啟時觸發
popupclose PopupEvent 當繫結至此圖層的彈出視窗關閉時觸發
事件 資料 描述
tooltipopen TooltipEvent 當繫結至此圖層的工具提示開啟時觸發。
tooltipclose TooltipEvent 當繫結至此圖層的工具提示關閉時觸發。

方法

方法 回傳值 描述
bringToFront() this

將圖磚圖層帶到所有圖磚圖層的最上層。

bringToBack() this

將圖磚圖層帶到所有圖磚圖層的最底層。

getContainer() HTMLElement

返回包含此圖層圖磚的 HTML 元素。

setOpacity(<Number> opacity) this

變更網格圖層的 不透明度

setZIndex(<Number> zIndex) this

變更網格圖層的 zIndex

isLoading() 布林值

如果網格圖層中有任何圖磚尚未完成載入,則返回 true

redraw() this

導致圖層清除所有圖磚並再次請求它們。

getTileSize() Point

tileSize 選項正規化為一個點。由 createTile() 方法使用。

擴充方法

擴充 GridLayer 的圖層應重新實作下列方法。
方法 回傳值 描述
createTile(<Object> coords, <Function> done?) HTMLElement

僅在內部呼叫,必須由擴充 GridLayer 的類別覆寫。傳回對應於給定 coordsHTMLElement。如果指定了 done 回呼,則必須在圖塊完成載入和繪製時呼叫它。

方法 回傳值 描述
addTo(<Map|LayerGroup> map) this

將圖層新增至給定的地圖或圖層群組。

remove() this

從目前活動的地圖中移除圖層。

removeFrom(<地圖> map) this

從給定的地圖移除圖層

removeFrom(<LayerGroup> group) this

從給定的 LayerGroup 移除圖層

getPane(<字串> name?) HTMLElement

傳回代表地圖上具名窗格的 HTMLElement。如果省略 name,則傳回此圖層的窗格。

getAttribution() 字串

貢獻者控制項 使用,傳回 貢獻者選項

方法 回傳值 描述
bindPopup(<字串|HTMLElement|Function|Popup> content, <Popup options> options?) this

使用傳遞的 content 將彈出視窗繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindPopup() this

移除先前使用 bindPopup 繫結的彈出視窗。

openPopup(<LatLng> latlng?) this

在指定的 latlng 或在預設的彈出視窗錨點(如果未傳遞 latlng)開啟繫結的彈出視窗。

closePopup() this

關閉繫結至此圖層的彈出視窗(如果已開啟)。

togglePopup() this

根據其目前狀態開啟或關閉繫結至此圖層的彈出視窗。

isPopupOpen() 布林值

如果繫結至此圖層的彈出視窗目前已開啟,則傳回 true

setPopupContent(<字串|HTMLElement|Popup> content) this

設定繫結至此圖層的彈出視窗內容。

getPopup() 彈出視窗

傳回繫結至此圖層的彈出視窗。

方法 回傳值 描述
bindTooltip(<字串|HTMLElement|Function|Tooltip> content, <Tooltip options> options?) this

使用傳遞的 content 將工具提示繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindTooltip() this

移除先前使用 bindTooltip 繫結的工具提示。

openTooltip(<LatLng> latlng?) this

在指定的 latlng 或在預設的工具提示錨點(如果未傳遞 latlng)開啟繫結的工具提示。

closeTooltip() this

關閉繫結至此圖層的工具提示(如果已開啟)。

toggleTooltip() this

根據其目前狀態開啟或關閉繫結至此圖層的工具提示。

isTooltipOpen() 布林值

如果繫結至此圖層的工具提示目前已開啟,則傳回 true

setTooltipContent(<字串|HTMLElement|Tooltip> content) this

設定繫結至此圖層的工具提示內容。

getTooltip() 提示

傳回繫結至此圖層的工具提示。

方法 回傳值 描述
on(<字串> type, <Function> fn, <Object> context?) this

將一個監聽器函數 (fn) 添加到物件的特定事件類型。您可以選擇性地指定監聽器的上下文(this 關鍵字將指向的物件)。您還可以傳遞幾個以空格分隔的類型(例如,'click dblclick')。

on(<Object> eventMap) this

添加一組類型/監聽器配對,例如 {click: onClick, mousemove: onMouseMove}

off(<字串> type, <Function> fn?, <Object> context?) this

移除先前添加的監聽器函數。如果沒有指定函數,它將從物件中移除該特定事件的所有監聽器。請注意,如果您將自定義上下文傳遞給 on,則必須將相同的上下文傳遞給 off 才能移除監聽器。

off(<Object> eventMap) this

移除一組類型/監聽器配對。

off() this

移除物件上所有事件的所有監聽器。這包括隱式附加的事件。

fire(<字串> type, <Object> data?, <Boolean> propagate?) this

觸發指定類型的事件。您可以選擇性地提供資料物件 — 監聽器函數的第一個參數將包含其屬性。事件可以選擇性地傳播到事件父級。

listens(<字串> type, <Boolean> propagate?) 布林值

如果特定事件類型有任何附加的監聽器,則返回 true。驗證可以選擇性地傳播,如果父級附加了監聽器,則它將返回 true

once() this

行為類似於 on(…),除了監聽器只會被觸發一次,然後被移除。

addEventParent(<Evented> obj) this

添加一個事件父級 — 一個 Evented,它將接收傳播的事件

removeEventParent(<Evented> obj) this

移除一個事件父級,因此它將停止接收傳播的事件

addEventListener() this

on(…) 的別名

removeEventListener() this

off(…) 的別名

clearAllEventListeners() this

off() 的別名

addOneTimeEventListener() this

once(…) 的別名

fireEvent() this

fire(…) 的別名

hasEventListeners() 布林值

listens(…) 的別名

LatLng

表示具有特定緯度和經度的地理點。

使用範例

var latlng = L.latLng(50.5, 30.5);

所有接受 LatLng 物件的 Leaflet 方法也接受它們的簡單陣列形式和簡單物件形式(除非另有說明),因此這些行是等效的

map.panTo([50, 30]);
map.panTo({lng: 30, lat: 50});
map.panTo({lat: 50, lng: 30});
map.panTo(L.latLng(50, 30));

請注意,LatLng 不會繼承自 Leaflet 的 Class 物件,這表示新的類別無法從它繼承,並且無法使用 include 函數將新方法新增至它。

建立

工廠 描述
L.latLng(<Number> latitude, <Number> longitude, <Number> altitude?) 建立一個物件,表示具有給定緯度和經度(以及可選海拔高度)的地理點。
L.latLng(<Array> coords) 改為預期格式為 [Number, Number][Number, Number, Number] 的陣列。
L.latLng(<Object> coords) 改為預期格式為 {lat: Number, lng: Number}{lat: Number, lng: Number, alt: Number} 的純物件。

方法

方法 回傳值 描述
equals(<LatLng> otherLatLng, <Number> maxMargin?) 布林值

如果給定的 LatLng 點位於相同的位置(在小的誤差範圍內),則傳回 true。可以將 maxMargin 設定為小數字來覆寫誤差範圍。

toString() 字串

傳回點的字串表示法(用於偵錯目的)。

distanceTo(<LatLng> otherLatLng) 數字

傳回使用 球面餘弦定律計算的到給定 LatLng 的距離(以公尺為單位)。

wrap() LatLng

傳回一個新的 LatLng 物件,其中經度已包裝,使其始終介於 -180 和 +180 度之間。

toBounds(<Number> sizeInMeters) LatLngBounds

傳回一個新的 LatLngBounds 物件,其中每個邊界與 LatLng 相距 sizeInMeters/2 公尺。

屬性

屬性 類型 描述
lat 數字 以度為單位的緯度
lng 數字 以度為單位的經度
alt 數字 以公尺為單位的高度(可選)

LatLngBounds

表示地圖上的矩形地理區域。

使用範例

var corner1 = L.latLng(40.712, -74.227),
corner2 = L.latLng(40.774, -74.125),
bounds = L.latLngBounds(corner1, corner2);

所有接受 LatLngBounds 物件的 Leaflet 方法也接受它們的簡單陣列形式(除非另有說明),因此上面的範圍範例可以這樣傳遞

map.fitBounds([
	[40.712, -74.227],
	[40.774, -74.125]
]);

警告:如果區域跨越本初子午線(經常與國際日期變更線混淆),您必須指定 [-180, 180] 度經度範圍之外的角落。

請注意,LatLngBounds 不會繼承自 Leaflet 的 Class 物件,這表示新的類別無法從它繼承,並且無法使用 include 函數將新方法新增至它。

建立

工廠 描述
L.latLngBounds(<LatLng> corner1, <LatLng> corner2) 透過定義矩形的兩個對角建立 LatLngBounds 物件。
L.latLngBounds(<LatLng[]> latlngs) 透過其中包含的地理點定義建立 LatLngBounds 物件。對於使用 fitBounds 將地圖縮放到適合特定位置集非常有用。

方法

方法 回傳值 描述
extend(<LatLng> latlng) this

延伸範圍以包含給定點

extend(<LatLngBounds> otherBounds) this

延伸範圍以包含給定範圍

pad(<Number> bufferRatio) LatLngBounds

傳回透過在每個方向按給定比例延伸或縮回目前範圍所建立的範圍。例如,比例 0.5 會在每個方向延伸範圍 50%。負值會縮回範圍。

getCenter() LatLng

傳回範圍的中心點。

getSouthWest() LatLng

傳回範圍的西南點。

getNorthEast() LatLng

傳回範圍的東北點。

getNorthWest() LatLng

傳回範圍的西北點。

getSouthEast() LatLng

傳回範圍的東南點。

getWest() 數字

傳回範圍的西經度

getSouth() 數字

傳回範圍的南緯度

getEast() 數字

傳回範圍的東經度

getNorth() 數字

傳回範圍的北緯度

contains(<LatLngBounds> otherBounds) 布林值

如果矩形包含給定矩形,則傳回 true

contains(<LatLng> latlng) 布林值

如果矩形包含給定點,則傳回 true

intersects(<LatLngBounds> otherBounds) 布林值

如果矩形與給定範圍相交,則傳回 true。如果兩個範圍至少有一個共同點,則它們相交。

overlaps(<LatLngBounds> otherBounds) 布林值

如果矩形與給定範圍重疊,則傳回 true。如果兩個範圍的交集是一個區域,則它們重疊。

toBBoxString() 字串

以 'southwest_lng,southwest_lat,northeast_lng,northeast_lat' 格式傳回包含邊界框座標的字串。適用於將請求傳送至傳回地理資料的網路服務。

equals(<LatLngBounds> otherBounds, <Number> maxMargin?) 布林值

如果矩形等效於(在小的誤差範圍內)給定的範圍,則傳回 true。可以將 maxMargin 設定為小數字來覆寫誤差範圍。

isValid() 布林值

如果範圍已正確初始化,則傳回 true

Point

表示具有像素為單位的 xy 座標的點。

使用範例

var point = L.point(200, 300);

所有接受 Point 物件的 Leaflet 方法和選項也接受它們的簡單陣列形式(除非另有說明),因此這些行是等效的

map.panBy([200, 300]);
map.panBy(L.point(200, 300));

請注意,Point 不會繼承自 Leaflet 的 Class 物件,這表示新的類別無法從它繼承,並且無法使用 include 函數將新方法新增至它。

建立

工廠 描述
L.point(<Number> x, <Number> y, <Boolean> round?) 建立具有給定 xy 座標的 Point 物件。如果將可選的 round 設定為 true,則會將 xy 值四捨五入。
L.point(<Number[]> coords) 改為預期格式為 [x, y] 的陣列。
L.point(<Object> coords) 改為預期格式為 {x: Number, y: Number} 的純物件。

方法

方法 回傳值 描述
clone() Point

傳回目前點的複本。

add(<Point> otherPoint) Point

傳回目前點和給定點相加的結果。

subtract(<Point> otherPoint) Point

傳回從目前點減去給定點的結果。

divideBy(<Number> num) Point

傳回目前點除以給定數字的結果。

multiplyBy(<Number> num) Point

傳回目前點乘以給定數字的結果。

scaleBy(<Point> scale) Point

將目前點的每個座標乘以 scale 的每個座標。用線性代數術語來說,將點乘以由 scale 定義的 縮放矩陣

unscaleBy(<Point> scale) Point

scaleBy 的反向操作。將目前點的每個座標除以 scale 的每個座標。

round() Point

傳回具有四捨五入座標的目前點複本。

floor() Point

傳回具有底值座標(向下捨入)的目前點複本。

ceil() Point

傳回具有頂值座標(向上捨入)的目前點複本。

trunc() Point

傳回具有截斷座標(向零捨入)的目前點複本。

distanceTo(<Point> otherPoint) 數字

傳回目前點和給定點之間的笛卡爾距離。

equals(<Point> otherPoint) 布林值

如果給定點具有相同的座標,則傳回 true

contains(<Point> otherPoint) 布林值

如果給定點的兩個座標都小於目前點的對應座標(絕對值),則返回 true

toString() 字串

返回用於除錯目的的點的字串表示形式。

屬性

屬性 類型 描述
x 數字 點的 x 座標
y 數字 點的 y 座標

Bounds

表示像素座標中的矩形區域。

使用範例

var p1 = L.point(10, 10),
p2 = L.point(40, 60),
bounds = L.bounds(p1, p2);

所有接受 Bounds 物件的 Leaflet 方法也接受簡單的陣列形式(除非另有說明),因此可以像這樣傳遞上面的 bounds 範例

otherBounds.intersects([[10, 10], [40, 60]]);

請注意,Bounds 並不繼承自 Leaflet 的 Class 物件,這表示新的類別無法繼承它,也無法使用 include 函式將新的方法新增到其中。

建立

工廠 描述
L.bounds(<Point> corner1, <Point> corner2) 從兩個角座標對建立 Bounds 物件。
L.bounds(<Point[]> points) 從給定的點陣列建立 Bounds 物件。

方法

方法 回傳值 描述
extend(<Point> point) this

擴展 bounds 以包含給定的點。

extend(<Bounds> otherBounds) this

延伸範圍以包含給定範圍

getCenter(<Boolean> round?) Point

傳回範圍的中心點。

getBottomLeft() Point

返回 bounds 的左下角點。

getTopRight() Point

返回 bounds 的右上角點。

getTopLeft() Point

返回 bounds 的左上角點(即 this.min)。

getBottomRight() Point

返回 bounds 的右下角點(即 this.max)。

getSize() Point

返回給定 bounds 的大小

contains(<Bounds> otherBounds) 布林值

如果矩形包含給定矩形,則傳回 true

contains(<Point> point) 布林值

如果矩形包含給定點,則傳回 true

intersects(<Bounds> otherBounds) 布林值

如果矩形與給定範圍相交,則傳回 true。如果兩個範圍至少有一個共同點,則它們相交。

overlaps(<Bounds> otherBounds) 布林值

如果矩形與給定範圍重疊,則傳回 true。如果兩個範圍的交集是一個區域,則它們重疊。

isValid() 布林值

如果範圍已正確初始化,則傳回 true

pad(<Number> bufferRatio) Bounds

傳回透過在每個方向按給定比例延伸或縮回目前範圍所建立的範圍。例如,比例 0.5 會在每個方向延伸範圍 50%。負值會縮回範圍。

equals(<Bounds> otherBounds) 布林值

如果矩形等同於給定的 bounds,則返回 true

屬性

屬性 類型 描述
min Point 矩形的左上角。
max Point 矩形的右下角。

Icon

表示建立標記時要提供的圖示。

使用範例

var myIcon = L.icon({
    iconUrl: 'my-icon.png',
    iconSize: [38, 95],
    iconAnchor: [22, 94],
    popupAnchor: [-3, -76],
    shadowUrl: 'my-icon-shadow.png',
    shadowSize: [68, 95],
    shadowAnchor: [22, 94]
});

L.marker([50.505, 30.57], {icon: myIcon}).addTo(map);

L.Icon.Default 繼承自 L.Icon,是 Leaflet 預設用於標記的藍色圖示。

建立

工廠 描述
L.icon(<圖示選項> options) 使用給定的選項建立圖示實例。

選項

選項 類型 預設值 描述
iconUrl 字串 null (必填) 圖示影像的 URL(絕對或相對於您的腳本路徑)。
iconRetinaUrl 字串 null 圖示影像的 Retina 尺寸版本的 URL(絕對或相對於您的腳本路徑)。用於 Retina 螢幕裝置。
iconSize Point null 圖示影像的大小(以像素為單位)。
iconAnchor Point null 圖示「尖端」的座標(相對於其左上角)。圖示將對齊,使此點位於標記的地理位置。如果指定大小,則預設為置中,也可以在 CSS 中使用負邊距來設定。
popupAnchor Point [0, 0] 彈出視窗將從中「開啟」的點的座標(相對於圖示錨點)。
tooltipAnchor Point [0, 0] 工具提示將從中「開啟」的點的座標(相對於圖示錨點)。
shadowUrl 字串 null 圖示陰影影像的 URL。如果未指定,則不會建立陰影影像。
shadowRetinaUrl 字串 null
shadowSize Point null 陰影影像的大小(以像素為單位)。
shadowAnchor Point null 陰影「尖端」的座標(相對於其左上角)(如果未指定,則與 iconAnchor 相同)。
className 字串 '' 要分配給圖示和陰影影像的自訂類別名稱。預設為空。
crossOrigin 布林值|字串 false 是否將 crossOrigin 屬性新增到圖磚。如果提供字串,則所有圖磚的 crossOrigin 屬性都將設定為提供的字串。如果您想要存取圖磚像素資料,則需要此屬性。如需有效的字串值,請參閱 CORS 設定

方法

方法 回傳值 描述
createIcon(<HTMLElement> oldIcon?) HTMLElement

當必須顯示圖示時,會在內部呼叫此函式,並返回根據選項設定樣式的 <img> HTML 元素。

createShadow(<HTMLElement> oldIcon?) HTMLElement

createIcon 相同,但用於其下方的陰影。

Icon.Default

Icon 的一個簡單子類別,表示在未指定圖示時,在 Marker 中使用的圖示。指向 Leaflet 版本隨附的藍色標記影像。

為了自訂預設圖示,只需變更 L.Icon.Default.prototype.options 的屬性(這是一組 圖示選項)。

如果您想完全取代預設圖示,請改為使用您自己的圖示覆寫 L.Marker.prototype.options.icon

選項 類型 預設值 描述
imagePath 字串 Icon.Default 將嘗試自動偵測藍色圖示影像的位置。如果您以非標準方式放置這些影像,請將此選項設定為指向正確的路徑。

DivIcon

表示用於標記的輕量型圖示,它使用簡單的 <div> 元素而不是影像。繼承自 Icon,但忽略 iconUrl 和陰影選項。

使用範例

var myIcon = L.divIcon({className: 'my-div-icon'});
// you can set .my-div-icon styles in CSS

L.marker([50.505, 30.57], {icon: myIcon}).addTo(map);

預設情況下,它具有 'leaflet-div-icon' CSS 類別,並設定樣式為帶有陰影的小白色正方形。

建立

工廠 描述
L.divIcon(<DivIcon 選項> options) 使用給定的選項建立 DivIcon 實例。

選項

選項 類型 預設值 描述
html 字串|HTMLElement '' 要放入 div 元素內的自訂 HTML 程式碼,預設為空。或者,HTMLElement 的實例。
bgPos Point [0, 0] 背景的選用相對位置,以像素為單位
選項 類型 預設值 描述
iconUrl 字串 null (必填) 圖示影像的 URL(絕對或相對於您的腳本路徑)。
iconRetinaUrl 字串 null 圖示影像的 Retina 尺寸版本的 URL(絕對或相對於您的腳本路徑)。用於 Retina 螢幕裝置。
iconSize Point null 圖示影像的大小(以像素為單位)。
iconAnchor Point null 圖示「尖端」的座標(相對於其左上角)。圖示將對齊,使此點位於標記的地理位置。如果指定大小,則預設為置中,也可以在 CSS 中使用負邊距來設定。
popupAnchor Point [0, 0] 彈出視窗將從中「開啟」的點的座標(相對於圖示錨點)。
tooltipAnchor Point [0, 0] 工具提示將從中「開啟」的點的座標(相對於圖示錨點)。
shadowUrl 字串 null 圖示陰影影像的 URL。如果未指定,則不會建立陰影影像。
shadowRetinaUrl 字串 null
shadowSize Point null 陰影影像的大小(以像素為單位)。
shadowAnchor Point null 陰影「尖端」的座標(相對於其左上角)(如果未指定,則與 iconAnchor 相同)。
className 字串 '' 要分配給圖示和陰影影像的自訂類別名稱。預設為空。
crossOrigin 布林值|字串 false 是否將 crossOrigin 屬性新增到圖磚。如果提供字串,則所有圖磚的 crossOrigin 屬性都將設定為提供的字串。如果您想要存取圖磚像素資料,則需要此屬性。如需有效的字串值,請參閱 CORS 設定

方法

方法 回傳值 描述
createIcon(<HTMLElement> oldIcon?) HTMLElement

當必須顯示圖示時,會在內部呼叫此函式,並返回根據選項設定樣式的 <img> HTML 元素。

createShadow(<HTMLElement> oldIcon?) HTMLElement

createIcon 相同,但用於其下方的陰影。

Control.Zoom

具有兩個按鈕(放大和縮小)的基本縮放控制項。預設情況下,它會放在地圖上,除非您將其 zoomControl 選項 設定為 false。繼承自 Control

建立

工廠 描述
L.control.zoom(<Control.Zoom 選項> options) 建立縮放控制項

選項

選項 類型 預設值 描述
zoomInText 字串 '<span aria-hidden="true">+</span>' 設定在「放大」按鈕上的文字。
zoomInTitle 字串 '放大' 設定在「放大」按鈕上的標題。
zoomOutText 字串 '<span aria-hidden="true">&#x2212;</span>' 設定在「縮小」按鈕上的文字。
zoomOutTitle 字串 '縮小' 設定在「縮小」按鈕上的標題。
選項 類型 預設值 描述
position 字串 'topright' 控制項的位置(地圖的其中一個角落)。可能的值為 'topleft''topright''bottomleft''bottomright'

方法

方法 回傳值 描述
getPosition() 字串

返回控制項的位置。

setPosition(<字串> position) this

設定控制項的位置。

getContainer() HTMLElement

返回包含控制項的 HTMLElement。

addTo(<地圖> map) this

將控制項新增至給定的地圖。

remove() this

從目前作用中的地圖中移除控制項。

Control.Attribution

歸屬控制項允許您在地圖上以小型文字方塊顯示歸屬資料。預設情況下,它會放在地圖上,除非您將其 attributionControl 選項 設定為 false,並且它會自動從具有 getAttribution 方法的圖層擷取歸屬文字。繼承自 Control。

建立

工廠 描述
L.control.attribution(<Control.Attribution 選項> options) 建立歸屬控制項。

選項

選項 類型 預設值 描述
prefix 字串|false 'Leaflet' 在歸屬之前顯示的 HTML 文字。傳遞 false 以停用。
選項 類型 預設值 描述
position 字串 'topright' 控制項的位置(地圖的其中一個角落)。可能的值為 'topleft''topright''bottomleft''bottomright'

方法

方法 回傳值 描述
setPrefix(<字串|false> prefix) this

在歸屬之前顯示的 HTML 文字。傳遞 false 以停用。

addAttribution(<字串> text) this

新增歸屬文字(例如 '&copy; OpenStreetMap contributors')。

removeAttribution(<字串> text) this

移除歸屬文字。

方法 回傳值 描述
getPosition() 字串

返回控制項的位置。

setPosition(<字串> position) this

設定控制項的位置。

getContainer() HTMLElement

返回包含控制項的 HTMLElement。

addTo(<地圖> map) this

將控制項新增至給定的地圖。

remove() this

從目前作用中的地圖中移除控制項。

Control.Layers

圖層控制項讓使用者能夠在不同的底圖之間切換,以及開啟/關閉覆蓋圖(請查看詳細範例)。繼承自 Control

使用範例

var baseLayers = {
	"Mapbox": mapbox,
	"OpenStreetMap": osm
};

var overlays = {
	"Marker": marker,
	"Roads": roadsLayer
};

L.control.layers(baseLayers, overlays).addTo(map);

baseLayersoverlays 參數是物件文字,其中圖層名稱為鍵,Layer 物件為值

{
    "<someName1>": layer1,
    "<someName2>": layer2
}

圖層名稱可以包含 HTML,這讓您可以將其他樣式新增至項目

{"<img src='my-layer-icon' /> <span class='my-layer-item'>My Layer</span>": myLayer}

建立

工廠 描述
L.control.layers(<Object> baselayers?, <Object> overlays?, <Control.Layers 選項> options?) 使用給定的圖層建立圖層控制項。底圖將使用單選按鈕切換,而覆蓋圖將使用核取方塊切換。請注意,所有底圖都應傳遞至底圖物件中,但應僅在地圖建立期間將一個底圖新增至地圖。

選項

選項 類型 預設值 描述
collapsed 布林值 true 如果為 true,則控制項將折疊為圖示,並在滑鼠懸停、觸碰或鍵盤啟動時展開。
autoZIndex 布林值 true 如果為 true,則控制項將以遞增順序將 zIndex 指派給其所有圖層,以便在開啟/關閉它們時保留順序。
hideSingleBase 布林值 false 如果為 true,當只有一個底圖時,控制項中的底圖將會隱藏。
sortLayers 布林值 false 是否排序圖層。當為 false 時,圖層將保留新增至控制項的順序。
sortFunction 函式 * sortLayerstrue 時,將用於排序圖層的比較函式。此函式會接收 L.Layer 實例及其名稱,如 sortFunction(layerA, layerB, nameA, nameB) 中所示。預設情況下,它會按名稱依字母順序排序圖層。
選項 類型 預設值 描述
position 字串 'topright' 控制項的位置(地圖的其中一個角落)。可能的值為 'topleft''topright''bottomleft''bottomright'

方法

方法 回傳值 描述
addBaseLayer(<Layer> layer, <字串> name) this

將具有給定名稱的底圖(單選按鈕項目)新增至控制項。

addOverlay(<Layer> layer, <字串> name) this

將具有給定名稱的覆蓋圖(核取方塊項目)新增至控制項。

removeLayer(<Layer> layer) this

從控制項中移除給定的圖層。

expand() this

如果已折疊,則展開控制項容器。

collapse() this

如果已展開,則折疊控制項容器。

方法 回傳值 描述
getPosition() 字串

返回控制項的位置。

setPosition(<字串> position) this

設定控制項的位置。

getContainer() HTMLElement

返回包含控制項的 HTMLElement。

addTo(<地圖> map) this

將控制項新增至給定的地圖。

remove() this

從目前作用中的地圖中移除控制項。

Control.Scale

一個簡單的比例尺控制項,以公制 (m/km) 和英制 (mi/ft) 系統顯示螢幕目前中心的比例尺。繼承自 Control

使用範例

L.control.scale().addTo(map);

建立

工廠 描述
L.control.scale(<Control.Scale 選項> options?) 使用給定的選項建立比例尺控制項。

選項

選項 類型 預設值 描述
maxWidth 數字 100 控制項的最大寬度(以像素為單位)。寬度會動態設定為顯示四捨五入的值(例如 100、200、500)。
metric 布林值 True 是否顯示公制比例線 (m/km)。
imperial 布林值 True 是否顯示英制比例線 (mi/ft)。
updateWhenIdle 布林值 false 如果為 true,則控制項會在 moveend 時更新,否則它會始終保持最新狀態(在 move 時更新)。
選項 類型 預設值 描述
position 字串 'topright' 控制項的位置(地圖的其中一個角落)。可能的值為 'topleft''topright''bottomleft''bottomright'

方法

方法 回傳值 描述
getPosition() 字串

返回控制項的位置。

setPosition(<字串> position) this

設定控制項的位置。

getContainer() HTMLElement

返回包含控制項的 HTMLElement。

addTo(<地圖> map) this

將控制項新增至給定的地圖。

remove() this

從目前作用中的地圖中移除控制項。

瀏覽器

包含 Leaflet 在內部使用的瀏覽器/功能偵測的靜態屬性的命名空間。

使用範例

if (L.Browser.ielt9) {
  alert('Upgrade your browser, dude!');
}

屬性

屬性 類型 描述
ie 布林值 對於所有 Internet Explorer 版本(非 Edge)為 true
ielt9 布林值 對於小於 9 的 Internet Explorer 版本為 true
edge 布林值 對於 Edge 網頁瀏覽器為 true
webkit 布林值; 對於基於 webkit 的瀏覽器(如 Chrome 和 Safari(包括行動版本))為 true
android 布林值 已淘汰。 對於在 Android 平台上執行的任何瀏覽器為 true
android23 布林值 已淘汰。 對於在 Android 2 或 Android 3 上執行的瀏覽器為 true
androidStock 布林值 已淘汰。 對於 Android Stock 瀏覽器(即非 Chrome)為 true
opera 布林值 對於 Opera 瀏覽器為 true
chrome 布林值 對於 Chrome 瀏覽器為 true
gecko 布林值 對於基於 gecko 的瀏覽器(如 Firefox)為 true
safari 布林值 對於 Safari 瀏覽器為 true
opera12 布林值 對於支援 CSS 轉換的 Opera 瀏覽器(12 或更新版本)為 true
win 布林值 當瀏覽器在 Windows 平台中執行時為 true
ie3d 布林值 對於所有支援 CSS 轉換的 Internet Explorer 版本為 true
webkit3d 布林值 對於支援 CSS 轉換的基於 webkit 的瀏覽器為 true
gecko3d 布林值 對於支援 CSS 轉換的基於 gecko 的瀏覽器為 true
any3d 布林值 對於所有支援 CSS 轉換的瀏覽器為 true
mobile 布林值 對於在行動裝置中執行的所有瀏覽器為 true
mobileWebkit 布林值 對於行動裝置中的所有基於 webkit 的瀏覽器為 true
mobileWebkit3d 布林值 對於行動裝置中支援 CSS 轉換的所有基於 webkit 的瀏覽器為 true
msPointer 布林值 對於實作 Microsoft 觸控事件模型(特別是 IE10)的瀏覽器為 true
pointer 布林值 對於所有支援指標事件的瀏覽器,此值為 true
touchNative 布林值 對於所有支援觸控事件的瀏覽器,此值為 true這不一定表示瀏覽器正在具有觸控螢幕的電腦上執行,它僅表示瀏覽器能夠理解觸控事件。
touch 布林值 對於所有支援觸控指標事件的瀏覽器,此值為 true。請注意:指標事件將優先處理(如果可用),並處理所有 touch* 監聽器。
mobileOpera 布林值 對於行動裝置上的 Opera 瀏覽器,此值為 true
mobileGecko 布林值 對於在行動裝置上執行的 gecko 型瀏覽器,此值為 true
retina 布林值 對於高解析度「retina」螢幕上的瀏覽器,或瀏覽器顯示縮放比例超過 100% 時的任何螢幕上的瀏覽器,此值為 true
passiveEvents 布林值 對於支援被動事件的瀏覽器,此值為 true
canvas 布林值 當瀏覽器支援 <canvas> 時,此值為 true
svg 布林值 當瀏覽器支援 SVG 時,此值為 true
vml 布林值 如果瀏覽器支援 VML,則此值為 true
mac 布林值 當瀏覽器在 Mac 平台上執行時,此值為 true,當瀏覽器在 Linux 平台上執行時,此值為 true

Util

Leaflet 內部使用的各種實用工具函式。

函式

函式 回傳值 描述
extend(<Object> dest, <Object> src?) Object src 物件(或多個物件)的屬性合併到 dest 物件中,並傳回後者。具有 L.extend 捷徑。
create(<Object> proto, <Object> properties?) Object Object.create 的相容性 polyfill。
bind(<Function> fn, ) 函式 傳回一個綁定到傳遞的引數的新函式,類似 Function.prototype.bind。具有 L.bind() 捷徑。
stamp(<Object> obj) 數字 傳回物件的唯一 ID,如果物件沒有 ID,則會指派一個。
throttle(<Function> fn, <Number> time, <Object> context) 函式 傳回一個函式,該函式以給定的範圍 context 執行函式 fn(以便 this 關鍵字在 fn 的程式碼內引用 context)。函式 fn 在給定的 time 量內最多會被呼叫一次。綁定函式接收的引數將是在綁定函式時傳遞的任何引數,後跟呼叫綁定函式時傳遞的任何引數。具有 L.throttle 捷徑。
wrapNum(<Number> num, <Number[]> range, <Boolean> includeMax?) 數字 以這樣的方式傳回 num 模數 range 的數字,使其位於 range[0]range[1] 之間。傳回的值將永遠小於 range[1],除非 includeMax 設定為 true
falseFn() 函式 傳回一個始終傳回 false 的函式。
formatNum(<Number> num, <Number|false> precision?) 數字 傳回以指定的 precision 四捨五入的數字 num。預設的 precision 值為 6 個小數位數。可以傳遞 false 來跳過任何處理(有助於避免捨入誤差)。
trim(<字串> str) 字串 String.prototype.trim 的相容性 polyfill。
splitWords(<字串> str) String[] 修剪字串並以空格分割,並傳回各部分的陣列。
setOptions(<Object> obj, <Object> options) Object 將給定的屬性合併到 obj 物件的 options 中,並傳回結果選項。請參閱 Class options。具有 L.setOptions 捷徑。
getParamString(<Object> obj, <字串> existingUrl?, <Boolean> uppercase?) 字串 將物件轉換為參數 URL 字串,例如 {a: "foo", b: "bar"} 轉換為 '?a=foo&b=bar'。如果設定 existingUrl,則參數將附加在結尾。如果 uppercasetrue,則參數名稱將會是大寫字母 (例如 '?A=foo&B=bar')
template(<字串> str, <Object> data) 字串 簡單的範本功能,接受 'Hello {a}, {b}' 形式的範本字串和像 {a: 'foo', b: 'bar'} 這樣的資料物件,傳回已評估的字串 ('Hello foo, bar')。您也可以為資料值指定函式,而不是字串 — 它們將會被評估,並將 data 作為引數傳遞。
isArray(obj) 布林值 Array.isArray 的相容性 polyfill。
indexOf(<Array> array, <Object> el) 數字 Array.prototype.indexOf 的相容性 polyfill。
requestAnimFrame(<Function> fn, <Object> context?, <Boolean> immediate?) 數字 安排在瀏覽器重新繪製時執行 fn。如果給定 context,則將 fn 綁定到 context。當設定 immediate 時,如果瀏覽器不支援 window.requestAnimationFrame 的原生支援,則立即呼叫 fn,否則會延遲呼叫。傳回可以用於取消請求的請求 ID。
cancelAnimFrame(<Number> id) 未定義 取消先前的 requestAnimFrame。另請參閱 window.cancelAnimationFrame

屬性

屬性 類型 描述
lastId 數字 stamp() 使用的最後一個唯一 ID
emptyImageUrl 字串 包含 base64 編碼空白 GIF 圖像的 Data URI 字串。用作一種駭客方法,以釋放 WebKit 驅動的行動裝置上未使用圖像的記憶體(將圖像 src 設定為此字串)。

轉換

表示仿射轉換:一組係數 abcd,用於將 (x, y) 形式的點轉換為 (a*x + b, c*y + d) 並執行反向轉換。由 Leaflet 在其投影程式碼中使用。

使用範例

var transformation = L.transformation(2, 5, -1, 10),
	p = L.point(1, 2),
	p2 = transformation.transform(p), //  L.point(7, 8)
	p3 = transformation.untransform(p2); //  L.point(1, 2)

建立

工廠 描述
L.transformation(<Number> a, <Number> b, <Number> c, <Number> d) 使用給定的係數執行 Transformation 物件的例項化。
L.transformation(<Array> coefficients) 預期係數陣列的形式為 [a: Number, b: Number, c: Number, d: Number]

方法

方法 回傳值 描述
transform(<Point> point, <Number> scale?) Point

傳回轉換後的點,選擇性地乘以給定的比例。僅接受實際的 L.Point 例項,而不是陣列。

untransform(<Point> point, <Number> scale?) Point

傳回給定點的反向轉換,選擇性地除以給定的比例。僅接受實際的 L.Point 例項,而不是陣列。

LineUtil

用於折線點處理的各種實用工具函式,由 Leaflet 內部使用,使折線快速如閃電。

函式

函式 回傳值 描述
simplify(<Point[]> points, <Number> tolerance) Point[] 使用 Ramer-Douglas-Peucker 演算法,顯著減少折線中的點數,同時保留其形狀,並傳回新的簡化點陣列。在處理/顯示每個縮放級別的 Leaflet 折線時使用,可以大幅提升效能,並減少視覺雜訊。tolerance 會影響簡化的數量(較小的值表示較高品質,但較慢且點數較多)。也以獨立的微型程式庫 Simplify.js 發布。
pointToSegmentDistance(<Point> p, <Point> p1, <Point> p2) 數字 傳回點 p 與線段 p1p2 之間的距離。
closestPointOnSegment(<Point> p, <Point> p1, <Point> p2) 數字 傳回線段 p1p2 上距離點 p 最近的點。
clipSegment(<Point> a, <Point> b, <Bounds> bounds, <Boolean> useLastCode?, <Boolean> round?) Point[]|Boolean 使用 Cohen-Sutherland 演算法,將線段 a 到 b 裁剪為矩形邊界(直接修改線段點!)。Leaflet 用於僅顯示螢幕上或附近的折線點,以提高效能。
isFlat(<LatLng[]> latlngs) 布林值 如果 latlngs 是一個平面陣列,則傳回 true,如果是巢狀,則傳回 false。
polylineCenter(<LatLng[]> latlngs, <CRS> crs) LatLng 傳回折線中傳遞的 LatLngs(第一個環)的中心 (形心)。

PolyUtil

用於多邊形幾何的各種實用工具函式。

函式

函式 回傳值 描述
clipPolygon(<Point[]> points, <Bounds> bounds, <Boolean> round?) Point[] 使用給定的邊界裁剪由給定的 points 定義的多邊形幾何(使用 Sutherland-Hodgman 演算法)。Leaflet 用於僅顯示螢幕上或附近的多邊形點,以提高效能。請注意,多邊形點需要與折線不同的裁剪演算法,因此有一個單獨的方法。
polygonCenter(<LatLng[]> latlngs, <CRS> crs) LatLng 傳回多邊形中傳遞的 LatLngs(第一個環)的中心 (形心)。
centroid(<LatLng[]> latlngs) LatLng 傳回傳遞的 LatLngs 的「質量中心」。

DomEvent

用於處理 DOM 事件 的實用工具函式,由 Leaflet 內部使用。

函式

函式 回傳值 描述
on(<HTMLElement> el, <字串> types, <Function> fn, <Object> context?) this 將監聽器函式 (fn) 新增到元素 el 的特定 DOM 事件類型。您可以選擇性地指定監聽器的內容(this 關鍵字將指向的物件)。您還可以傳遞多個以空格分隔的類型 (例如 'click dblclick')。
on(<HTMLElement> el, <Object> eventMap, <Object> context?) this 添加一組類型/監聽器配對,例如 {click: onClick, mousemove: onMouseMove}
off(<HTMLElement> el, <字串> types, <Function> fn, <Object> context?) this 移除先前新增的監聽器函式。請注意,如果您將自訂內容傳遞給 on,則必須將相同的內容傳遞給 off 才能移除監聽器。
off(<HTMLElement> el, <Object> eventMap, <Object> context?) this 移除一組類型/監聽器配對,例如 {click: onClick, mousemove: onMouseMove}
off(<HTMLElement> el, <字串> types) this 移除先前新增的所有給定類型的監聽器。
off(<HTMLElement> el) this 移除先前從給定的 HTMLElement 新增的所有監聽器
stopPropagation(<DOMEvent> ev) this 停止給定的事件傳播到父元素。在監聽器函式內部使用
L.DomEvent.on(div, 'click', function (ev) {
	L.DomEvent.stopPropagation(ev);
});
disableScrollPropagation(<HTMLElement> el) this stopPropagation 新增到元素的 'wheel' 事件(加上瀏覽器變體)。
disableClickPropagation(<HTMLElement> el) this stopPropagation 新增到元素的 'click''dblclick''contextmenu''mousedown''touchstart' 事件(加上瀏覽器變體)。
preventDefault(<DOMEvent> ev) this 防止 DOM 事件 ev 的預設動作發生(例如,在 a 元素的 href 中追蹤連結,或在提交 <form> 時使用頁面重新載入執行 POST 請求)。在監聽器函式內部使用。
stop(<DOMEvent> ev) this 同時執行 stopPropagationpreventDefault
getPropagationPath(<DOMEvent> ev) Array Event.composedPath() 的相容性 polyfill。傳回一個陣列,其中包含給定的 DOM 事件應傳播到的 HTMLElement(如果未停止)。
getMousePosition(<DOMEvent> ev, <HTMLElement> container?) Point 從相對於 container(不包括邊框)或在未指定時相對於整個頁面的 DOM 事件取得標準化的滑鼠位置。
getWheelDelta(<DOMEvent> ev) 數字 從滾輪 DOM 事件取得標準化的滾輪增量,以垂直像素捲動(向下捲動時為負數)。來自沒有精確捲動的指標裝置的事件會映射到 60 像素的最佳猜測。
addListener() this L.DomEvent.on 的別名
removeListener() this L.DomEvent.off 的別名

DomUtil

用於處理 DOM 樹狀結構的實用工具函式,由 Leaflet 內部使用。

大多數預期或傳回 HTMLElement 的函式也適用於 SVG 元素。唯一的區別是類別指的是 HTML 中的 CSS 類別和 SVG 中的 SVG 類別。

函式

函式 回傳值 描述
get(<String|HTMLElement> id) HTMLElement 傳回給定 DOM ID 的元素,如果直接傳遞,則傳回元素本身。
getStyle(<HTMLElement> el, <字串> styleAttrib) 字串 傳回元素上特定樣式屬性的值,包括計算值或通過 CSS 設定的值。
create(<字串> tagName, <字串> className?, <HTMLElement> container?) HTMLElement 使用 tagName 建立 HTML 元素,將其類別設定為 className,並選擇性地將其附加到 container 元素。
remove(<HTMLElement> el) 從其父元素中移除 el
empty(<HTMLElement> el) el 中移除 el 的所有子元素
toFront(<HTMLElement> el) 使 el 成為其父元素的最後一個子元素,以便它在其他子元素前面呈現。
toBack(<HTMLElement> el) 使 el 成為其父元素的第一個子元素,以便它在其他子元素後面呈現。
hasClass(<HTMLElement> el, <字串> name) 布林值 如果元素的類別屬性包含 name,則傳回 true
addClass(<HTMLElement> el, <字串> name) name 加入元素的 class 屬性。
removeClass(<HTMLElement> el, <字串> name) 從元素的 class 屬性移除 name
setClass(<HTMLElement> el, <字串> name) 設定元素的 class。
getClass(<HTMLElement> el) 字串 回傳元素的 class。
setOpacity(<HTMLElement> el, <Number> opacity) 設定元素的透明度(包含舊版 IE 支援)。opacity 必須是介於 01 的數字。
testProp(<String[]> props) 字串|false 遍歷樣式名稱的陣列,並回傳第一個對元素有效的樣式名稱。如果沒有找到此名稱,則回傳 false。對於像是 transform 這類有供應商前綴的樣式很有用。
setTransform(<HTMLElement> el, <Point> offset, <Number> scale?) 重設 el 的 3D CSS 轉換,使其依 offset 像素平移,並可選擇依 scale 縮放。如果瀏覽器不支援 3D CSS 轉換,則不會有效果。
setPosition(<HTMLElement> el, <Point> position) 使用 CSS translate 或 top/left 定位(取決於瀏覽器),將 el 的位置設定為 position 所指定的座標(Leaflet 內部使用此方法來定位圖層)。
getPosition(<HTMLElement> el) Point 回傳先前使用 setPosition 定位的元素的座標。
disableTextSelection() 防止使用者產生 selectstart DOM 事件,此事件通常在使用者拖曳滑鼠經過帶有文字的頁面時產生。Leaflet 內部使用此方法來覆寫地圖上任何點擊並拖曳互動的行為。會影響整個文件的拖曳互動。
enableTextSelection() 取消先前 L.DomUtil.disableTextSelection 的效果。
disableImageDrag() 如同 L.DomUtil.disableTextSelection,但針對 dragstart DOM 事件,此事件通常在使用者拖曳圖片時產生。
enableImageDrag() 取消先前 L.DomUtil.disableImageDrag 的效果。
preventOutline(<HTMLElement> el) 使元素 el外框 看不見。Leaflet 內部使用此方法來防止當使用者在可聚焦的元素上執行拖曳互動時,顯示外框。
restoreOutline() 取消先前 L.DomUtil.preventOutline 的效果。
getSizedParentNode(<HTMLElement> el) HTMLElement 尋找大小(寬度和高度)不為 null 的最近父節點。
getScale(<HTMLElement> el) Object 計算目前套用在元素上的 CSS 縮放比例。回傳一個物件,其中包含 xy 成員,分別代表水平和垂直縮放比例,以及 boundingClientRect 作為 getBoundingClientRect() 的結果。

屬性

屬性 類型 描述
TRANSFORM 字串 具有供應商前綴的 transform 樣式名稱(例如,WebKit 的 'webkitTransform')。
TRANSITION 字串 具有供應商前綴的 transition 樣式名稱。
TRANSITION_END 字串 具有供應商前綴的 transitionend 事件名稱。

PosAnimation

在內部用於平移動畫,針對現代瀏覽器使用 CSS3 Transitions,而 IE6-9 則使用計時器作為備案。

使用範例

var myPositionMarker = L.marker([48.864716, 2.294694]).addTo(map);

myPositionMarker.on("click", function() {
	var pos = map.latLngToLayerPoint(myPositionMarker.getLatLng());
	pos.y -= 25;
	var fx = new L.PosAnimation();

	fx.once('end',function() {
		pos.y += 25;
		fx.run(myPositionMarker._icon, pos, 0.8);
	});

	fx.run(myPositionMarker._icon, pos, 0.3);
});

建構子

建構子 描述
L.PosAnimation() 建立一個 PosAnimation 物件。

事件

事件 資料 描述
start 事件 動畫開始時觸發
step 事件 動畫期間持續觸發。
end 事件 動畫結束時觸發。

方法

方法 回傳值 描述
run(<HTMLElement> el, <Point> newPos, <Number> duration?, <Number> easeLinearity?)

執行指定元素的動畫,使其移動到新的位置,可選擇設定動畫持續時間(以秒為單位,預設為 0.25)和緩和線性因數(cubic bezier 曲線 的第三個引數,預設為 0.5)。

stop()

停止動畫(如果目前正在執行)。

方法 回傳值 描述
on(<字串> type, <Function> fn, <Object> context?) this

將一個監聽器函數 (fn) 添加到物件的特定事件類型。您可以選擇性地指定監聽器的上下文(this 關鍵字將指向的物件)。您還可以傳遞幾個以空格分隔的類型(例如,'click dblclick')。

on(<Object> eventMap) this

添加一組類型/監聽器配對,例如 {click: onClick, mousemove: onMouseMove}

off(<字串> type, <Function> fn?, <Object> context?) this

移除先前添加的監聽器函數。如果沒有指定函數,它將從物件中移除該特定事件的所有監聽器。請注意,如果您將自定義上下文傳遞給 on,則必須將相同的上下文傳遞給 off 才能移除監聽器。

off(<Object> eventMap) this

移除一組類型/監聽器配對。

off() this

移除物件上所有事件的所有監聽器。這包括隱式附加的事件。

fire(<字串> type, <Object> data?, <Boolean> propagate?) this

觸發指定類型的事件。您可以選擇性地提供資料物件 — 監聽器函數的第一個參數將包含其屬性。事件可以選擇性地傳播到事件父級。

listens(<字串> type, <Boolean> propagate?) 布林值

如果特定事件類型有任何附加的監聽器,則返回 true。驗證可以選擇性地傳播,如果父級附加了監聽器,則它將返回 true

once() this

行為類似於 on(…),除了監聽器只會被觸發一次,然後被移除。

addEventParent(<Evented> obj) this

添加一個事件父級 — 一個 Evented,它將接收傳播的事件

removeEventParent(<Evented> obj) this

移除一個事件父級,因此它將停止接收傳播的事件

addEventListener() this

on(…) 的別名

removeEventListener() this

off(…) 的別名

clearAllEventListeners() this

off() 的別名

addOneTimeEventListener() this

once(…) 的別名

fireEvent() this

fire(…) 的別名

hasEventListeners() 布林值

listens(…) 的別名

Draggable

用於使 DOM 元素可拖曳的類別(包含觸控支援)。在內部用於地圖和標記的拖曳。僅適用於使用 L.DomUtil.setPosition 定位的元素。

使用範例

var draggable = new L.Draggable(elementToDrag);
draggable.enable();

建構子

建構子 描述
L.Draggable(<HTMLElement> el, <HTMLElement> dragHandle?, <Boolean> preventOutline?, <Draggable 選項> options?) 建立一個 Draggable 物件,用於在您開始拖曳 dragHandle 元素時移動 el (預設情況下等於 el 本身)。

選項

選項 類型 預設值 描述
clickTolerance 數字 3 在點擊期間,使用者可以移動滑鼠指標的最大像素數,以被視為有效的點擊(而不是滑鼠拖曳)。

事件

事件 資料 描述
down 事件 即將開始拖曳時觸發。
dragstart 事件 開始拖曳時觸發
predrag 事件 在每次對應更新元素位置之前,在拖曳期間持續觸發。
drag 事件 在拖曳期間持續觸發。
dragend DragEndEvent 拖曳結束時觸發。

方法

方法 回傳值 描述
enable()

啟用拖曳功能

disable()

停用拖曳功能

方法 回傳值 描述
on(<字串> type, <Function> fn, <Object> context?) this

將一個監聽器函數 (fn) 添加到物件的特定事件類型。您可以選擇性地指定監聽器的上下文(this 關鍵字將指向的物件)。您還可以傳遞幾個以空格分隔的類型(例如,'click dblclick')。

on(<Object> eventMap) this

添加一組類型/監聽器配對,例如 {click: onClick, mousemove: onMouseMove}

off(<字串> type, <Function> fn?, <Object> context?) this

移除先前添加的監聽器函數。如果沒有指定函數,它將從物件中移除該特定事件的所有監聽器。請注意,如果您將自定義上下文傳遞給 on,則必須將相同的上下文傳遞給 off 才能移除監聽器。

off(<Object> eventMap) this

移除一組類型/監聽器配對。

off() this

移除物件上所有事件的所有監聽器。這包括隱式附加的事件。

fire(<字串> type, <Object> data?, <Boolean> propagate?) this

觸發指定類型的事件。您可以選擇性地提供資料物件 — 監聽器函數的第一個參數將包含其屬性。事件可以選擇性地傳播到事件父級。

listens(<字串> type, <Boolean> propagate?) 布林值

如果特定事件類型有任何附加的監聽器,則返回 true。驗證可以選擇性地傳播,如果父級附加了監聽器,則它將返回 true

once() this

行為類似於 on(…),除了監聽器只會被觸發一次,然後被移除。

addEventParent(<Evented> obj) this

添加一個事件父級 — 一個 Evented,它將接收傳播的事件

removeEventParent(<Evented> obj) this

移除一個事件父級,因此它將停止接收傳播的事件

addEventListener() this

on(…) 的別名

removeEventListener() this

off(…) 的別名

clearAllEventListeners() this

off() 的別名

addOneTimeEventListener() this

once(…) 的別名

fireEvent() this

fire(…) 的別名

hasEventListeners() 布林值

listens(…) 的別名

Class

L.Class 為 Leaflet 的 OOP 功能提供動力,並用於建立此處記錄的幾乎所有 Leaflet 類別。

除了實作簡單的傳統繼承模型之外,它還引入了幾個特殊的屬性,以方便程式碼組織 — options、includes 和 statics。

使用範例

var MyClass = L.Class.extend({
initialize: function (greeter) {
	this.greeter = greeter;
	// class constructor
},

greet: function (name) {
	alert(this.greeter + ', ' + name)
	}
});

// create instance of MyClass, passing "Hello" to the constructor
var a = new MyClass("Hello");

// call greet method, alerting "Hello, World"
a.greet("World");

類別工廠

您可能已經注意到,Leaflet 物件是在不使用 new 關鍵字的情況下建立的。這是透過以小寫工廠方法來補充每個類別來實現的。

new L.Map('map'); // becomes:
L.map('map');

工廠的實作非常簡單,您可以為自己的類別執行此操作

L.map = function (id, options) {
    return new L.Map(id, options);
};

繼承

您可以使用 L.Class.extend 來定義新的類別,但是您可以在任何類別上使用相同的方法來繼承它

var MyChildClass = MyClass.extend({
    // ... new properties and methods
});

這將建立一個繼承父類別所有方法和屬性(透過適當的原型鏈)的類別,並加入或覆寫您傳遞給 extend 的類別。它也會正確回應 instanceof

var a = new MyChildClass();
a instanceof MyChildClass; // true
a instanceof MyClass; // true

您可以透過存取父類別原型並使用 JavaScript 的 call 或 apply,從對應的子類別呼叫父類別方法(包括建構子),就像您在其他語言中使用 super 呼叫一樣。

var MyChildClass = MyClass.extend({
    initialize: function () {
        MyClass.prototype.initialize.call(this, "Yo");
    },

    greet: function (name) {
        MyClass.prototype.greet.call(this, 'bro ' + name + '!');
    }
});

var a = new MyChildClass();
a.greet('Jason'); // alerts "Yo, bro Jason!"

選項

options 是一個特殊屬性,與您傳遞給 extend 的其他物件不同,它將與父物件合併,而不是完全覆寫它,這使得管理物件的設定和預設值變得方便。

var MyClass = L.Class.extend({
    options: {
        myOption1: 'foo',
        myOption2: 'bar'
    }
});

var MyChildClass = MyClass.extend({
    options: {
        myOption1: 'baz',
        myOption3: 5
    }
});

var a = new MyChildClass();
a.options.myOption1; // 'baz'
a.options.myOption2; // 'bar'
a.options.myOption3; // 5

還有 L.Util.setOptions,一種方便的方法,用於將傳遞給建構子的選項與類別中定義的預設值合併。

var MyClass = L.Class.extend({
    options: {
        foo: 'bar',
        bla: 5
    },

    initialize: function (options) {
        L.Util.setOptions(this, options);
        ...
    }
});

var a = new MyClass({bla: 10});
a.options; // {foo: 'bar', bla: 10}

請注意,options 物件允許任何鍵,而不僅僅是類別及其基底類別所定義的選項。這表示您可以使用 options 物件來儲存特定於應用程式的資訊,只要您避免使用類別正在使用的鍵即可。

包含項

includes 是一個特殊的類別屬性,會將所有指定的物件合併到類別中(此類物件稱為 mixin)。

 var MyMixin = {
    foo: function () { ... },
    bar: 5
};

var MyClass = L.Class.extend({
    includes: MyMixin
});

var a = new MyClass();
a.foo();

您也可以使用 include 方法在執行階段執行此類包含項

MyClass.include(MyMixin);

statics 只是一個方便的屬性,可將指定的物件屬性注入為類別的靜態屬性,對於定義常數很有用

var MyClass = L.Class.extend({
    statics: {
        FOO: 'bar',
        BLA: 5
    }
});

MyClass.FOO; // 'bar'

建構子掛鉤

如果您是外掛程式開發人員,您通常需要將額外的初始化程式碼新增至現有的類別(例如,編輯 L.Polyline 的掛鉤)。Leaflet 提供了一種使用 addInitHook 方法輕鬆完成此操作的方法

MyClass.addInitHook(function () {
    // ... do something in constructor additionally
    // e.g. add event listeners, set custom properties etc.
});

當您只需要呼叫一個額外的方法時,您也可以使用以下捷徑

MyClass.addInitHook('methodName', arg1, arg2, …);

函式

函式 回傳值 描述
extend(<Object> props) 函式 擴展目前的類別,並指定要包含的屬性。回傳一個 Javascript 函式,該函式是一個類別建構子(以 new 呼叫)。
include(<Object> properties) this 將 mixin 包含到目前的類別中。
mergeOptions(<Object> options) this options 合併到類別的預設值中。
addInitHook(<Function> fn) this 建構子掛鉤新增至類別中。

Evented

一組在以事件為基礎的類別(如 MapMarker)之間共用的方法。一般來說,事件允許您在物件發生某些事情時執行某些函式(例如,使用者點擊地圖,導致地圖觸發 'click' 事件)。

使用範例

map.on('click', function(e) {
	alert(e.latlng);
} );

Leaflet 透過參考來處理事件接聽器,因此如果您想要新增一個接聽器,然後將其移除,請將其定義為函式

function onClick(e) { ... }

map.on('click', onClick);
map.off('click', onClick);

方法

方法 回傳值 描述
on(<字串> type, <Function> fn, <Object> context?) this

將一個監聽器函數 (fn) 添加到物件的特定事件類型。您可以選擇性地指定監聽器的上下文(this 關鍵字將指向的物件)。您還可以傳遞幾個以空格分隔的類型(例如,'click dblclick')。

on(<Object> eventMap) this

添加一組類型/監聽器配對,例如 {click: onClick, mousemove: onMouseMove}

off(<字串> type, <Function> fn?, <Object> context?) this

移除先前添加的監聽器函數。如果沒有指定函數,它將從物件中移除該特定事件的所有監聽器。請注意,如果您將自定義上下文傳遞給 on,則必須將相同的上下文傳遞給 off 才能移除監聽器。

off(<Object> eventMap) this

移除一組類型/監聽器配對。

off() this

移除物件上所有事件的所有監聽器。這包括隱式附加的事件。

fire(<字串> type, <Object> data?, <Boolean> propagate?) this

觸發指定類型的事件。您可以選擇性地提供資料物件 — 監聽器函數的第一個參數將包含其屬性。事件可以選擇性地傳播到事件父級。

listens(<字串> type, <Boolean> propagate?) 布林值

如果特定事件類型有任何附加的監聽器,則返回 true。驗證可以選擇性地傳播,如果父級附加了監聽器,則它將返回 true

once() this

行為類似於 on(…),除了監聽器只會被觸發一次,然後被移除。

addEventParent(<Evented> obj) this

添加一個事件父級 — 一個 Evented,它將接收傳播的事件

removeEventParent(<Evented> obj) this

移除一個事件父級,因此它將停止接收傳播的事件

addEventListener() this

on(…) 的別名

removeEventListener() this

off(…) 的別名

clearAllEventListeners() this

off() 的別名

addOneTimeEventListener() this

once(…) 的別名

fireEvent() this

fire(…) 的別名

hasEventListeners() 布林值

listens(…) 的別名

Layer

Layer 基底類別中的一組方法,所有 Leaflet 圖層都會使用。繼承 L.Evented 的所有方法、選項和事件。

使用範例

var layer = L.marker(latlng).addTo(map);
layer.addTo(map);
layer.remove();

選項

選項 類型 預設值 描述
pane 字串 'overlayPane' 預設情況下,圖層將新增至地圖的 覆蓋窗格。覆寫此選項將導致圖層預設放置在另一個窗格上。
attribution 字串 null 要在貢獻者控制項中顯示的字串,例如「© OpenStreetMap 貢獻者」。它描述圖層資料,並且通常是對版權所有者和圖磚提供者的法律義務。

事件

事件 資料 描述
add 事件 將圖層新增至地圖後觸發
remove 事件 將圖層從地圖移除後觸發

彈出視窗事件

事件 資料 描述
popupopen PopupEvent 當繫結至此圖層的彈出視窗開啟時觸發
popupclose PopupEvent 當繫結至此圖層的彈出視窗關閉時觸發

工具提示事件

事件 資料 描述
tooltipopen TooltipEvent 當繫結至此圖層的工具提示開啟時觸發。
tooltipclose TooltipEvent 當繫結至此圖層的工具提示關閉時觸發。

方法

擴展 L.Layer 的類別將繼承以下方法
方法 回傳值 描述
addTo(<Map|LayerGroup> map) this

將圖層新增至給定的地圖或圖層群組。

remove() this

從目前活動的地圖中移除圖層。

removeFrom(<地圖> map) this

從給定的地圖移除圖層

removeFrom(<LayerGroup> group) this

從給定的 LayerGroup 移除圖層

getPane(<字串> name?) HTMLElement

傳回代表地圖上具名窗格的 HTMLElement。如果省略 name,則傳回此圖層的窗格。

getAttribution() 字串

貢獻者控制項 使用,傳回 貢獻者選項

擴充方法

每個圖層都應該從 L.Layer 擴展,並(重新)實作以下方法。
方法 回傳值 描述
onAdd(<地圖> map) this

應該包含為圖層建立 DOM 元素、將它們新增到它們所屬的 map panes,以及將接聽器放置在相關的地圖事件上的程式碼。在 map.addLayer(layer) 上呼叫。

onRemove(<地圖> map) this

應該包含所有清理程式碼,這些程式碼會從 DOM 中移除圖層的元素,並移除先前在 onAdd 中新增的接聽器。在 map.removeLayer(layer) 上呼叫。

getEvents() Object

此選擇性方法應該回傳一個物件,如 { viewreset: this._reset }addEventListener。此物件中的事件處理常式將會隨著您的圖層自動新增和移除到地圖中。

getAttribution() 字串

此選擇性方法應該回傳一個包含 HTML 的字串,以便在圖層可見時顯示在 Attribution control 上。

beforeAdd(<地圖> map) this

選擇性方法。在 map.addLayer(layer) 上呼叫,在將圖層新增至地圖之前、在初始化事件之前,而無需等待直到地圖處於可使用狀態。僅用於早期初始化。

Popup 方法

所有圖層都共用一組方便將彈出視窗繫結至其上的方法。
var layer = L.Polygon(latlngs).bindPopup('Hi There!').addTo(map);
layer.openPopup();
layer.closePopup();

當圖層被點擊時,彈出視窗也會自動開啟;而當圖層從地圖移除或開啟另一個彈出視窗時,彈出視窗也會自動關閉。

方法 回傳值 描述
bindPopup(<字串|HTMLElement|Function|Popup> content, <Popup options> options?) this

使用傳遞的 content 將彈出視窗繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindPopup() this

移除先前使用 bindPopup 繫結的彈出視窗。

openPopup(<LatLng> latlng?) this

在指定的 latlng 或在預設的彈出視窗錨點(如果未傳遞 latlng)開啟繫結的彈出視窗。

closePopup() this

關閉繫結至此圖層的彈出視窗(如果已開啟)。

togglePopup() this

根據其目前狀態開啟或關閉繫結至此圖層的彈出視窗。

isPopupOpen() 布林值

如果繫結至此圖層的彈出視窗目前已開啟,則傳回 true

setPopupContent(<字串|HTMLElement|Popup> content) this

設定繫結至此圖層的彈出視窗內容。

getPopup() 彈出視窗

傳回繫結至此圖層的彈出視窗。

Tooltip 方法

所有圖層都共用一組方便將工具提示繫結至其上的方法。
var layer = L.Polygon(latlngs).bindTooltip('Hi There!').addTo(map);
layer.openTooltip();
layer.closeTooltip();
方法 回傳值 描述
bindTooltip(<字串|HTMLElement|Function|Tooltip> content, <Tooltip options> options?) this

使用傳遞的 content 將工具提示繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindTooltip() this

移除先前使用 bindTooltip 繫結的工具提示。

openTooltip(<LatLng> latlng?) this

在指定的 latlng 或在預設的工具提示錨點(如果未傳遞 latlng)開啟繫結的工具提示。

closeTooltip() this

關閉繫結至此圖層的工具提示(如果已開啟)。

toggleTooltip() this

根據其目前狀態開啟或關閉繫結至此圖層的工具提示。

isTooltipOpen() 布林值

如果繫結至此圖層的工具提示目前已開啟,則傳回 true

setTooltipContent(<字串|HTMLElement|Tooltip> content) this

設定繫結至此圖層的工具提示內容。

getTooltip() 提示

傳回繫結至此圖層的工具提示。

方法 回傳值 描述
on(<字串> type, <Function> fn, <Object> context?) this

將一個監聽器函數 (fn) 添加到物件的特定事件類型。您可以選擇性地指定監聽器的上下文(this 關鍵字將指向的物件)。您還可以傳遞幾個以空格分隔的類型(例如,'click dblclick')。

on(<Object> eventMap) this

添加一組類型/監聽器配對,例如 {click: onClick, mousemove: onMouseMove}

off(<字串> type, <Function> fn?, <Object> context?) this

移除先前添加的監聽器函數。如果沒有指定函數,它將從物件中移除該特定事件的所有監聽器。請注意,如果您將自定義上下文傳遞給 on,則必須將相同的上下文傳遞給 off 才能移除監聽器。

off(<Object> eventMap) this

移除一組類型/監聽器配對。

off() this

移除物件上所有事件的所有監聽器。這包括隱式附加的事件。

fire(<字串> type, <Object> data?, <Boolean> propagate?) this

觸發指定類型的事件。您可以選擇性地提供資料物件 — 監聽器函數的第一個參數將包含其屬性。事件可以選擇性地傳播到事件父級。

listens(<字串> type, <Boolean> propagate?) 布林值

如果特定事件類型有任何附加的監聽器,則返回 true。驗證可以選擇性地傳播,如果父級附加了監聽器,則它將返回 true

once() this

行為類似於 on(…),除了監聽器只會被觸發一次,然後被移除。

addEventParent(<Evented> obj) this

添加一個事件父級 — 一個 Evented,它將接收傳播的事件

removeEventParent(<Evented> obj) this

移除一個事件父級,因此它將停止接收傳播的事件

addEventListener() this

on(…) 的別名

removeEventListener() this

off(…) 的別名

clearAllEventListeners() this

off() 的別名

addOneTimeEventListener() this

once(…) 的別名

fireEvent() this

fire(…) 的別名

hasEventListeners() 布林值

listens(…) 的別名

互動式圖層

可以使某些 Layer 成為互動式的 - 當使用者與此類圖層互動時,可以處理諸如 clickmouseover 之類的滑鼠事件。使用 事件處理方法來處理這些事件。

選項

選項 類型 預設值 描述
interactive 布林值 true 如果為 false,則圖層將不會發出滑鼠事件,並且將作為底層地圖的一部分。
bubblingMouseEvents 布林值 true 當為 true 時,此圖層上的滑鼠事件將會在該地圖上觸發相同的事件(除非使用 L.DomEvent.stopPropagation)。
選項 類型 預設值 描述
pane 字串 'overlayPane' 預設情況下,圖層將新增至地圖的 覆蓋窗格。覆寫此選項將導致圖層預設放置在另一個窗格上。
attribution 字串 null 要在貢獻者控制項中顯示的字串,例如「© OpenStreetMap 貢獻者」。它描述圖層資料,並且通常是對版權所有者和圖磚提供者的法律義務。

事件

滑鼠事件

事件 資料 描述
click MouseEvent 當使用者點擊(或輕觸)圖層時觸發。
dblclick MouseEvent 當使用者在圖層上雙擊(或雙輕觸)時觸發。
mousedown MouseEvent 當使用者在圖層上按下滑鼠按鈕時觸發。
mouseup MouseEvent 當使用者釋放在圖層上按下的滑鼠按鈕時觸發。
mouseover MouseEvent 當滑鼠進入圖層時觸發。
mouseout MouseEvent 當滑鼠離開圖層時觸發。
contextmenu MouseEvent 當使用者在圖層上按下滑鼠右鍵時觸發,如果此事件上有接聽程式,則會阻止顯示預設的瀏覽器上下文功能表。當使用者按住單次觸摸一秒鐘時(也稱為長按),也會在行動裝置上觸發。
事件 資料 描述
add 事件 將圖層新增至地圖後觸發
remove 事件 將圖層從地圖移除後觸發
事件 資料 描述
popupopen PopupEvent 當繫結至此圖層的彈出視窗開啟時觸發
popupclose PopupEvent 當繫結至此圖層的彈出視窗關閉時觸發
事件 資料 描述
tooltipopen TooltipEvent 當繫結至此圖層的工具提示開啟時觸發。
tooltipclose TooltipEvent 當繫結至此圖層的工具提示關閉時觸發。

方法

方法 回傳值 描述
addTo(<Map|LayerGroup> map) this

將圖層新增至給定的地圖或圖層群組。

remove() this

從目前活動的地圖中移除圖層。

removeFrom(<地圖> map) this

從給定的地圖移除圖層

removeFrom(<LayerGroup> group) this

從給定的 LayerGroup 移除圖層

getPane(<字串> name?) HTMLElement

傳回代表地圖上具名窗格的 HTMLElement。如果省略 name,則傳回此圖層的窗格。

getAttribution() 字串

貢獻者控制項 使用,傳回 貢獻者選項

方法 回傳值 描述
bindPopup(<字串|HTMLElement|Function|Popup> content, <Popup options> options?) this

使用傳遞的 content 將彈出視窗繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindPopup() this

移除先前使用 bindPopup 繫結的彈出視窗。

openPopup(<LatLng> latlng?) this

在指定的 latlng 或在預設的彈出視窗錨點(如果未傳遞 latlng)開啟繫結的彈出視窗。

closePopup() this

關閉繫結至此圖層的彈出視窗(如果已開啟)。

togglePopup() this

根據其目前狀態開啟或關閉繫結至此圖層的彈出視窗。

isPopupOpen() 布林值

如果繫結至此圖層的彈出視窗目前已開啟,則傳回 true

setPopupContent(<字串|HTMLElement|Popup> content) this

設定繫結至此圖層的彈出視窗內容。

getPopup() 彈出視窗

傳回繫結至此圖層的彈出視窗。

方法 回傳值 描述
bindTooltip(<字串|HTMLElement|Function|Tooltip> content, <Tooltip options> options?) this

使用傳遞的 content 將工具提示繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindTooltip() this

移除先前使用 bindTooltip 繫結的工具提示。

openTooltip(<LatLng> latlng?) this

在指定的 latlng 或在預設的工具提示錨點(如果未傳遞 latlng)開啟繫結的工具提示。

closeTooltip() this

關閉繫結至此圖層的工具提示(如果已開啟)。

toggleTooltip() this

根據其目前狀態開啟或關閉繫結至此圖層的工具提示。

isTooltipOpen() 布林值

如果繫結至此圖層的工具提示目前已開啟,則傳回 true

setTooltipContent(<字串|HTMLElement|Tooltip> content) this

設定繫結至此圖層的工具提示內容。

getTooltip() 提示

傳回繫結至此圖層的工具提示。

方法 回傳值 描述
on(<字串> type, <Function> fn, <Object> context?) this

將一個監聽器函數 (fn) 添加到物件的特定事件類型。您可以選擇性地指定監聽器的上下文(this 關鍵字將指向的物件)。您還可以傳遞幾個以空格分隔的類型(例如,'click dblclick')。

on(<Object> eventMap) this

添加一組類型/監聽器配對,例如 {click: onClick, mousemove: onMouseMove}

off(<字串> type, <Function> fn?, <Object> context?) this

移除先前添加的監聽器函數。如果沒有指定函數,它將從物件中移除該特定事件的所有監聽器。請注意,如果您將自定義上下文傳遞給 on,則必須將相同的上下文傳遞給 off 才能移除監聽器。

off(<Object> eventMap) this

移除一組類型/監聽器配對。

off() this

移除物件上所有事件的所有監聽器。這包括隱式附加的事件。

fire(<字串> type, <Object> data?, <Boolean> propagate?) this

觸發指定類型的事件。您可以選擇性地提供資料物件 — 監聽器函數的第一個參數將包含其屬性。事件可以選擇性地傳播到事件父級。

listens(<字串> type, <Boolean> propagate?) 布林值

如果特定事件類型有任何附加的監聽器,則返回 true。驗證可以選擇性地傳播,如果父級附加了監聽器,則它將返回 true

once() this

行為類似於 on(…),除了監聽器只會被觸發一次,然後被移除。

addEventParent(<Evented> obj) this

添加一個事件父級 — 一個 Evented,它將接收傳播的事件

removeEventParent(<Evented> obj) this

移除一個事件父級,因此它將停止接收傳播的事件

addEventListener() this

on(…) 的別名

removeEventListener() this

off(…) 的別名

clearAllEventListeners() this

off() 的別名

addOneTimeEventListener() this

once(…) 的別名

fireEvent() this

fire(…) 的別名

hasEventListeners() 布林值

listens(…) 的別名

控制項

L.Control 是用於實作地圖控制項的基底類別。處理定位。所有其他控制項都由此類別擴展而來。

選項

選項 類型 預設值 描述
position 字串 'topright' 控制項的位置(地圖的其中一個角落)。可能的值為 'topleft''topright''bottomleft''bottomright'

方法

擴展 L.Control 的類別將繼承以下方法
方法 回傳值 描述
getPosition() 字串

返回控制項的位置。

setPosition(<字串> position) this

設定控制項的位置。

getContainer() HTMLElement

返回包含控制項的 HTMLElement。

addTo(<地圖> map) this

將控制項新增至給定的地圖。

remove() this

從目前作用中的地圖中移除控制項。

擴充方法

每個控制項都應該從 L.Control 擴展,並(重新)實作以下方法。
方法 回傳值 描述
onAdd(<地圖> map) HTMLElement

應該回傳控制項的容器 DOM 元素,並將接聽器新增至相關的地圖事件。在 control.addTo(map) 上呼叫。

onRemove(<地圖> map)

選擇性方法。應該包含所有清理程式碼,這些程式碼會移除先前在 onAdd 中新增的接聽器。在 control.remove() 上呼叫。

處理器

地圖互動處理常式的抽象類別

方法

方法 回傳值 描述
enable() this

啟用處理常式

disable() this

停用處理常式

enabled() 布林值

如果已啟用處理常式,則回傳 true

擴充方法

Handler 繼承的類別必須實作以下兩種方法
方法 回傳值 描述
addHooks()

在啟用處理常式時呼叫,應該新增事件掛鉤。

removeHooks()

在停用處理常式時呼叫,應該移除先前新增的事件掛鉤。

函式

有一個靜態函式,可以在不實例化 L.Handler 的情況下呼叫

函式 回傳值 描述
addTo(<地圖> map, <字串> name) this 使用給定的名稱,將新的處理常式新增至給定的地圖。

投影

一個物件,其中包含將世界地理座標投影到平面上(以及返回)的方法。請參閱地圖投影

方法

方法 回傳值 描述
project(<LatLng> latlng) Point

將地理座標投影到 2D 點中。僅接受實際的 L.LatLng 執行個體,而不是陣列。

unproject(<Point> point) LatLng

project 的反向。將 2D 點投影到地理位置中。僅接受實際的 L.Point 執行個體,而不是陣列。

請注意,投影執行個體不會從 Leaflet 的 Class 物件繼承,也無法實例化。此外,新的類別無法從它們繼承,也無法使用 include 函式將方法新增至它們。

屬性

屬性 類型 描述
bounds Bounds 投影有效的邊界(以 CRS 單位指定)

已定義的投影

Leaflet 隨附一組現成的已定義投影
投影 描述
L.Projection.LonLat 等距柱狀投影(Equirectangular),或稱 Plate Carree 投影 — 最簡單的投影方式,主要由 GIS 愛好者使用。直接將 x 對應為經度,y 對應為緯度。也適用於平面世界,例如遊戲地圖。EPSG:4326Simple CRS 使用此投影。
L.Projection.Mercator 橢圓麥卡托投影(Elliptical Mercator projection)— 比球面麥卡托投影更複雜。假設地球為橢球體。EPSG:3395 CRS 使用此投影。
L.Projection.SphericalMercator 球面麥卡托投影(Spherical Mercator projection)— 線上地圖最常用的投影方式,幾乎所有免費和商業圖磚提供者都使用。假設地球為球體。EPSG:3857 CRS 使用此投影。

CRS

方法

方法 回傳值 描述
latLngToPoint(<LatLng> latlng, <Number> zoom) Point

將地理座標投影為給定縮放級別的像素座標。

pointToLatLng(<Point> point, <Number> zoom) LatLng

latLngToPoint 的反向操作。將給定縮放級別的像素座標投影為地理座標。

project(<LatLng> latlng) Point

將地理座標投影為此 CRS 接受的單位座標(例如,EPSG:3857 的米,以便傳遞給 WMS 服務)。

unproject(<Point> point) LatLng

給定投影座標,返回對應的 LatLng。project 的反向操作。

scale(<Number> zoom) 數字

返回將投影座標轉換為特定縮放級別的像素座標時使用的比例。例如,對於基於麥卡托的 CRS,它返回 256 * 2^zoom

zoom(<Number> scale) 數字

scale() 的反向操作,返回對應於比例因子 scale 的縮放級別。

getProjectedBounds(<Number> zoom) Bounds

返回為提供的 zoom 縮放和轉換的投影範圍。

distance(<LatLng> latlng1, <LatLng> latlng2) 數字

返回兩個地理座標之間的距離。

wrapLatLng(<LatLng> latlng) LatLng

返回一個 LatLng,其中緯度和經度已根據 CRS 的 wrapLatwrapLng 屬性進行包裹,如果它們超出 CRS 的範圍。

wrapLatLngBounds(<LatLngBounds> bounds) LatLngBounds

返回一個與給定範圍大小相同的 LatLngBounds,確保其中心在 CRS 的範圍內。僅接受實際的 L.LatLngBounds 實例,而非陣列。

屬性

屬性 類型 描述
code 字串 傳遞到 WMS 服務的 CRS 的標準代碼名稱(例如,'EPSG:3857'
wrapLng Number[] 一個包含兩個數字的陣列,定義經度(水平)座標軸是否在給定範圍內環繞以及如何環繞。在大多數地理 CRS 中,預設值為 [-180, 180]。如果為 undefined,則經度軸不會環繞。
wrapLat Number[] wrapLng 類似,但用於緯度(垂直)軸。
infinite 布林值 如果為 true,則座標空間將無界限(在兩個軸上都是無限的)

已定義的 CRS

CRS 描述
L.CRS.Earth 作為覆蓋地球的全局 CRS 的基礎。只能用作其他 CRS 的基礎,不能直接使用,因為它沒有 codeprojectiontransformationdistance() 返回米。
L.CRS.EPSG3395 一些商業圖磚提供商很少使用。使用橢圓麥卡托投影。
L.CRS.EPSG3857 線上地圖最常用的 CRS,幾乎所有免費和商業圖磚提供商都使用。使用球面麥卡托投影。在地圖的 crs 選項中預設設定。
L.CRS.EPSG4326 GIS 愛好者常用的 CRS。使用簡單的等距柱狀投影。

Leaflet 1.0.x 符合 EPSG:4326 的 TMS 座標方案,這是與 0.7.x 行為的重大變更。如果您正在使用此 CRS 的 TileLayer,請確保在縮放級別零時有兩個 256x256 像素的圖磚覆蓋整個地球,並且圖磚座標原點為 (-180,+90),對於設定了 tms 選項TileLayer 則為 (-180,-90)。

L.CRS.Base 物件,定義用於將地理點投影為像素(螢幕)座標並反向投影(以及投影為 WMS 服務的其他單位座標)的座標參考系統。請參閱空間參考系統

Leaflet 預設定義了最常用的 CRS。如果您想使用預設未定義的 CRS,請查看 Proj4Leaflet 外掛程式。

請注意,CRS 實例不會繼承 Leaflet 的 Class 物件,並且無法實例化。此外,新類別無法繼承它們,也無法使用 include 函數向它們添加方法。

L.CRS.Simple 一個簡單的 CRS,直接將經度和緯度對應到 xy。可用於平面地圖(例如遊戲地圖)。請注意,y 軸仍然應該是反轉的(從下到上)。distance() 返回簡單的歐幾里得距離。

渲染器

向量渲染器實作(SVGCanvas)的基礎類別。處理渲染器的 DOM 容器、其範圍及其縮放動畫。

Renderer 作為所有 Path 的隱式圖層群組 - 可以將渲染器本身新增或移除到地圖。所有路徑都使用渲染器,可以是隱式的(地圖將決定渲染器的類型並自動使用),也可以是顯式的(使用路徑的 renderer 選項)。

請勿直接使用此類別,請改用 SVGCanvas

選項

選項 類型 預設值 描述
邊距選項 數字 0.1 在地圖視圖周圍擴展裁剪區域的程度(相對於其大小),例如 0.1 將是每個方向上地圖視圖的 10%
選項 類型 預設值 描述
pane 字串 'overlayPane' 預設情況下,圖層將新增至地圖的 覆蓋窗格。覆寫此選項將導致圖層預設放置在另一個窗格上。
attribution 字串 null 要在貢獻者控制項中顯示的字串,例如「© OpenStreetMap 貢獻者」。它描述圖層資料,並且通常是對版權所有者和圖磚提供者的法律義務。

事件

事件 資料 描述
update 事件 當渲染器更新其邊界、中心和縮放時觸發,例如當其地圖移動時
事件 資料 描述
add 事件 將圖層新增至地圖後觸發
remove 事件 將圖層從地圖移除後觸發
事件 資料 描述
popupopen PopupEvent 當繫結至此圖層的彈出視窗開啟時觸發
popupclose PopupEvent 當繫結至此圖層的彈出視窗關閉時觸發
事件 資料 描述
tooltipopen TooltipEvent 當繫結至此圖層的工具提示開啟時觸發。
tooltipclose TooltipEvent 當繫結至此圖層的工具提示關閉時觸發。

方法

方法 回傳值 描述
addTo(<Map|LayerGroup> map) this

將圖層新增至給定的地圖或圖層群組。

remove() this

從目前活動的地圖中移除圖層。

removeFrom(<地圖> map) this

從給定的地圖移除圖層

removeFrom(<LayerGroup> group) this

從給定的 LayerGroup 移除圖層

getPane(<字串> name?) HTMLElement

傳回代表地圖上具名窗格的 HTMLElement。如果省略 name,則傳回此圖層的窗格。

getAttribution() 字串

貢獻者控制項 使用,傳回 貢獻者選項

方法 回傳值 描述
bindPopup(<字串|HTMLElement|Function|Popup> content, <Popup options> options?) this

使用傳遞的 content 將彈出視窗繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindPopup() this

移除先前使用 bindPopup 繫結的彈出視窗。

openPopup(<LatLng> latlng?) this

在指定的 latlng 或在預設的彈出視窗錨點(如果未傳遞 latlng)開啟繫結的彈出視窗。

closePopup() this

關閉繫結至此圖層的彈出視窗(如果已開啟)。

togglePopup() this

根據其目前狀態開啟或關閉繫結至此圖層的彈出視窗。

isPopupOpen() 布林值

如果繫結至此圖層的彈出視窗目前已開啟,則傳回 true

setPopupContent(<字串|HTMLElement|Popup> content) this

設定繫結至此圖層的彈出視窗內容。

getPopup() 彈出視窗

傳回繫結至此圖層的彈出視窗。

方法 回傳值 描述
bindTooltip(<字串|HTMLElement|Function|Tooltip> content, <Tooltip options> options?) this

使用傳遞的 content 將工具提示繫結至圖層,並設定必要的事件接聽程式。如果傳遞 Function,它將會接收圖層作為第一個引數,並且應該傳回 StringHTMLElement

unbindTooltip() this

移除先前使用 bindTooltip 繫結的工具提示。

openTooltip(<LatLng> latlng?) this

在指定的 latlng 或在預設的工具提示錨點(如果未傳遞 latlng)開啟繫結的工具提示。

closeTooltip() this

關閉繫結至此圖層的工具提示(如果已開啟)。

toggleTooltip() this

根據其目前狀態開啟或關閉繫結至此圖層的工具提示。

isTooltipOpen() 布林值

如果繫結至此圖層的工具提示目前已開啟,則傳回 true

setTooltipContent(<字串|HTMLElement|Tooltip> content) this

設定繫結至此圖層的工具提示內容。

getTooltip() 提示

傳回繫結至此圖層的工具提示。

方法 回傳值 描述
on(<字串> type, <Function> fn, <Object> context?) this

將一個監聽器函數 (fn) 添加到物件的特定事件類型。您可以選擇性地指定監聽器的上下文(this 關鍵字將指向的物件)。您還可以傳遞幾個以空格分隔的類型(例如,'click dblclick')。

on(<Object> eventMap) this

添加一組類型/監聽器配對,例如 {click: onClick, mousemove: onMouseMove}

off(<字串> type, <Function> fn?, <Object> context?) this

移除先前添加的監聽器函數。如果沒有指定函數,它將從物件中移除該特定事件的所有監聽器。請注意,如果您將自定義上下文傳遞給 on,則必須將相同的上下文傳遞給 off 才能移除監聽器。

off(<Object> eventMap) this

移除一組類型/監聽器配對。

off() this

移除物件上所有事件的所有監聽器。這包括隱式附加的事件。

fire(<字串> type, <Object> data?, <Boolean> propagate?) this

觸發指定類型的事件。您可以選擇性地提供資料物件 — 監聽器函數的第一個參數將包含其屬性。事件可以選擇性地傳播到事件父級。

listens(<字串> type, <Boolean> propagate?) 布林值

如果特定事件類型有任何附加的監聽器,則返回 true。驗證可以選擇性地傳播,如果父級附加了監聽器,則它將返回 true

once() this

行為類似於 on(…),除了監聽器只會被觸發一次,然後被移除。

addEventParent(<Evented> obj) this

添加一個事件父級 — 一個 Evented,它將接收傳播的事件

removeEventParent(<Evented> obj) this

移除一個事件父級,因此它將停止接收傳播的事件

addEventListener() this

on(…) 的別名

removeEventListener() this

off(…) 的別名

clearAllEventListeners() this

off() 的別名

addOneTimeEventListener() this

once(…) 的別名

fireEvent() this

fire(…) 的別名

hasEventListeners() 布林值

listens(…) 的別名

事件物件

每當繼承自 Evented 的類別觸發事件時,將使用事件參數呼叫監聽器函數,該事件參數是一個包含事件相關資訊的純物件。例如

map.on('click', function(ev) {
    alert(ev.latlng); // ev is an event object (MouseEvent in this case)
});

可用資訊取決於事件類型

事件

基礎事件物件。所有其他事件物件也包含這些屬性。
屬性 類型 描述
type 字串 事件類型(例如 'click')。
target Object 觸發事件的物件。對於傳播的事件,它是傳播鏈中最後一個觸發事件的物件。
sourceTarget Object 最初觸發事件的物件。對於非傳播的事件,這將與 target 相同。
propagatedFrom Object 對於傳播的事件,是將事件傳播到其事件父級的最後一個物件。
layer Object 已棄用。propagatedFrom 相同。

KeyboardEvent

屬性 類型 描述
originalEvent DOMEvent 觸發此 Leaflet 事件的原始 DOM KeyboardEvent
屬性 類型 描述
type 字串 事件類型(例如 'click')。
target Object 觸發事件的物件。對於傳播的事件,它是傳播鏈中最後一個觸發事件的物件。
sourceTarget Object 最初觸發事件的物件。對於非傳播的事件,這將與 target 相同。
propagatedFrom Object 對於傳播的事件,是將事件傳播到其事件父級的最後一個物件。
layer Object 已棄用。propagatedFrom 相同。

MouseEvent

屬性 類型 描述
latlng LatLng 滑鼠事件發生的地理點。
layerPoint Point 滑鼠事件發生的點相對於地圖圖層的像素座標。
containerPoint Point 滑鼠事件發生的點相對於地圖容器的像素座標。
originalEvent DOMEvent 觸發此 Leaflet 事件的原始 DOM MouseEventDOM TouchEvent
屬性 類型 描述
type 字串 事件類型(例如 'click')。
target Object 觸發事件的物件。對於傳播的事件,它是傳播鏈中最後一個觸發事件的物件。
sourceTarget Object 最初觸發事件的物件。對於非傳播的事件,這將與 target 相同。
propagatedFrom Object 對於傳播的事件,是將事件傳播到其事件父級的最後一個物件。
layer Object 已棄用。propagatedFrom 相同。

LocationEvent

屬性 類型 描述
latlng LatLng 偵測到的使用者地理位置。
bounds LatLngBounds 使用者所在區域的地理範圍(關於位置的準確性)。
accuracy 數字 位置的準確性,以米為單位。
altitude 數字 位置高於 WGS84 橢球體的高度,以米為單位。
altitudeAccuracy 數字 高度的準確性,以米為單位。
heading 數字 行進方向,以度為單位,從正北方向順時針計數。
speed 數字 目前速度,以米/秒為單位。
timestamp 數字 取得位置的時間。
屬性 類型 描述
type 字串 事件類型(例如 'click')。
target Object 觸發事件的物件。對於傳播的事件,它是傳播鏈中最後一個觸發事件的物件。
sourceTarget Object 最初觸發事件的物件。對於非傳播的事件,這將與 target 相同。
propagatedFrom Object 對於傳播的事件,是將事件傳播到其事件父級的最後一個物件。
layer Object 已棄用。propagatedFrom 相同。

ErrorEvent

屬性 類型 描述
message 字串 錯誤訊息。
code 數字 錯誤碼(如果適用)。
屬性 類型 描述
type 字串 事件類型(例如 'click')。
target Object 觸發事件的物件。對於傳播的事件,它是傳播鏈中最後一個觸發事件的物件。
sourceTarget Object 最初觸發事件的物件。對於非傳播的事件,這將與 target 相同。
propagatedFrom Object 對於傳播的事件,是將事件傳播到其事件父級的最後一個物件。
layer Object 已棄用。propagatedFrom 相同。

LayerEvent

屬性 類型 描述
layer Layer 已新增或移除的圖層。
屬性 類型 描述
type 字串 事件類型(例如 'click')。
target Object 觸發事件的物件。對於傳播的事件,它是傳播鏈中最後一個觸發事件的物件。
sourceTarget Object 最初觸發事件的物件。對於非傳播的事件,這將與 target 相同。
propagatedFrom Object 對於傳播的事件,是將事件傳播到其事件父級的最後一個物件。

LayersControlEvent

屬性 類型 描述
layer Layer 已新增或移除的圖層。
name 字串 已新增或移除的圖層名稱。
屬性 類型 描述
type 字串 事件類型(例如 'click')。
target Object 觸發事件的物件。對於傳播的事件,它是傳播鏈中最後一個觸發事件的物件。
sourceTarget Object 最初觸發事件的物件。對於非傳播的事件,這將與 target 相同。
propagatedFrom Object 對於傳播的事件,是將事件傳播到其事件父級的最後一個物件。

TileEvent

屬性 類型 描述
tile HTMLElement 圖磚元素(圖像)。
coords Point 具有圖磚的 xyz(縮放級別)座標的點物件。
屬性 類型 描述
type 字串 事件類型(例如 'click')。
target Object 觸發事件的物件。對於傳播的事件,它是傳播鏈中最後一個觸發事件的物件。
sourceTarget Object 最初觸發事件的物件。對於非傳播的事件,這將與 target 相同。
propagatedFrom Object 對於傳播的事件,是將事件傳播到其事件父級的最後一個物件。
layer Object 已棄用。propagatedFrom 相同。

TileErrorEvent

屬性 類型 描述
tile HTMLElement 圖磚元素(圖像)。
coords Point 具有圖磚的 xyz(縮放級別)座標的點物件。
error * 傳遞給圖磚的 done() 回調的錯誤。
屬性 類型 描述
type 字串 事件類型(例如 'click')。
target Object 觸發事件的物件。對於傳播的事件,它是傳播鏈中最後一個觸發事件的物件。
sourceTarget Object 最初觸發事件的物件。對於非傳播的事件,這將與 target 相同。
propagatedFrom Object 對於傳播的事件,是將事件傳播到其事件父級的最後一個物件。
layer Object 已棄用。propagatedFrom 相同。

ResizeEvent

屬性 類型 描述
oldSize Point 調整大小事件之前的舊大小。
newSize Point 調整大小事件之後的新大小。
屬性 類型 描述
type 字串 事件類型(例如 'click')。
target Object 觸發事件的物件。對於傳播的事件,它是傳播鏈中最後一個觸發事件的物件。
sourceTarget Object 最初觸發事件的物件。對於非傳播的事件,這將與 target 相同。
propagatedFrom Object 對於傳播的事件,是將事件傳播到其事件父級的最後一個物件。
layer Object 已棄用。propagatedFrom 相同。

GeoJSONEvent

屬性 類型 描述
layer Layer 要新增到地圖的 GeoJSON 特徵的圖層。
properties Object 特徵的 GeoJSON 屬性。
geometryType 字串 特徵的 GeoJSON 幾何類型。
id 字串 特徵的 GeoJSON ID(如果存在)。
屬性 類型 描述
type 字串 事件類型(例如 'click')。
target Object 觸發事件的物件。對於傳播的事件,它是傳播鏈中最後一個觸發事件的物件。
sourceTarget Object 最初觸發事件的物件。對於非傳播的事件,這將與 target 相同。
propagatedFrom Object 對於傳播的事件,是將事件傳播到其事件父級的最後一個物件。

PopupEvent

屬性 類型 描述
popup 彈出視窗 已開啟或關閉的彈出視窗。
屬性 類型 描述
type 字串 事件類型(例如 'click')。
target Object 觸發事件的物件。對於傳播的事件,它是傳播鏈中最後一個觸發事件的物件。
sourceTarget Object 最初觸發事件的物件。對於非傳播的事件,這將與 target 相同。
propagatedFrom Object 對於傳播的事件,是將事件傳播到其事件父級的最後一個物件。
layer Object 已棄用。propagatedFrom 相同。

TooltipEvent

屬性 類型 描述
tooltip 提示 已開啟或關閉的工具提示。
屬性 類型 描述
type 字串 事件類型(例如 'click')。
target Object 觸發事件的物件。對於傳播的事件,它是傳播鏈中最後一個觸發事件的物件。
sourceTarget Object 最初觸發事件的物件。對於非傳播的事件,這將與 target 相同。
propagatedFrom Object 對於傳播的事件,是將事件傳播到其事件父級的最後一個物件。
layer Object 已棄用。propagatedFrom 相同。

DragEndEvent

屬性 類型 描述
distance 數字 可拖曳元素移動的像素距離。
屬性 類型 描述
type 字串 事件類型(例如 'click')。
target Object 觸發事件的物件。對於傳播的事件,它是傳播鏈中最後一個觸發事件的物件。
sourceTarget Object 最初觸發事件的物件。對於非傳播的事件,這將與 target 相同。
propagatedFrom Object 對於傳播的事件,是將事件傳播到其事件父級的最後一個物件。
layer Object 已棄用。propagatedFrom 相同。

ZoomAnimEvent

屬性 類型 描述
center LatLng 地圖目前的中心點
zoom 數字 地圖目前的縮放級別
noUpdate 布林值 圖層是否應由於此事件而更新其內容
屬性 類型 描述
type 字串 事件類型(例如 'click')。
target Object 觸發事件的物件。對於傳播的事件,它是傳播鏈中最後一個觸發事件的物件。
sourceTarget Object 最初觸發事件的物件。對於非傳播的事件,這將與 target 相同。
propagatedFrom Object 對於傳播的事件,是將事件傳播到其事件父級的最後一個物件。
layer Object 已棄用。propagatedFrom 相同。

全域開關

全域開關是為罕見情況而建立的,通常會使 Leaflet 無法偵測到特定的瀏覽器功能,即使該功能存在。您需要在頁面上包含 Leaflet 之前,將該開關設定為 true 的全域變數,如下所示

<script>L_NO_TOUCH = true;</script>
<script src="leaflet.js"></script>
開關 描述
L_NO_TOUCH 強制 Leaflet 不使用觸控事件,即使它偵測到觸控事件。
L_DISABLE_3D 強制 Leaflet 不使用硬體加速的 CSS 3D 轉換進行定位(這可能會在某些罕見環境中導致故障),即使它們受支援。

noConflict

此方法將 L 全域變數還原為 Leaflet 包含之前的原始值,並傳回真正的 Leaflet 命名空間,以便您可以將其放在其他地方,如下所示

<script src='libs/l.js'>
<!-- L points to some other library -->

<script src='leaflet.js'>
<!-- you include Leaflet, it replaces the L variable to Leaflet namespace -->

<script>
var Leaflet = L.noConflict();
// now L points to that other library again, and you can use Leaflet.Map etc.
</script>

版本

一個常數,表示正在使用的 Leaflet 版本。

L.version; // contains "1.0.0" (or whatever version is currently in use)