Leaflet:Map類屬性及方法


1、初始化

L.map(<String> id , options ?)  //用地圖div的id創建
L.map(<HTMLElement>el , options?) //用地圖div的name創建

2、參數:

//控件Control
attributionControl //地圖右下角的信息說明控件,默認true開啟
zoomControl //左上角的縮放控件,默認true開啟

//交互性
closePopupOnClick //如果點擊(click)地圖時不想Popup被關閉,把該參數設置為false
zoomSnap //強制地圖的縮放后地圖等級始終為這個參數的倍數,對fitBounds()方法作用很大
zoomDelta //每次縮放的倍數,默認1
trackResize //地圖是否跟隨瀏覽器的變化而變化,默認true
boxZoom //是否允許地圖縮放到一個區域,這個區域是你按住SHIFT同時在地圖上畫的一個矩形區域,默認true
doubleClickZoom //是否允許雙擊鼠標進行放大,按住SHIFT雙擊鼠標縮小,默認true;如果將該參數值設置為'center',則縮放時會固定以view的中心為中心進行縮放,不隨鼠標的位置變化而變化
dragging //是否允許地圖被鼠標拖動,默認true

//地圖狀態
center //最初的地理坐標,類型是LatLng
zoom //初始縮放等級
minZoom //最小縮放等級
maxZoom //最大縮放等級,這兩個如果不確定就不用寫,會根據地圖來源自動確定
maxBounds //類型LatLngBounds,地圖會被鎖定在該Bounds處
//如果要修改,可以通過方法setMaxBounds設置

layers //一開始就被加入到地圖中的圖層,類型是List[],其中的元素類型為Layer

//動畫
zoomAnimation //進行縮放時是否有動畫,默認true
fadeAnimation //是否開啟tile fade animation,這里我也不知道該怎么翻譯
markerZoomAnimation //marker在縮放時是否有動畫,如果沒有,它將在縮放期間消失並在縮放結束后顯示,默認false
 
//鍵盤
keyboard //是否啟用鍵盤+/-號進行縮放、上下左右箭頭進行平移,默認true
keyboardPanDelta //鍵盤每次箭頭平移的像素數,默認80

//鼠標滾輪
scrollWheelZoom //是否啟用滾輪縮放,默認true
wheelDebounceTime //鼠標滾輪的最大轉速,默認40,單位ms,即滾輪最大轉速為1圈/40ms
wheelPxPerZoomLevel //標定滾輪轉過的角度與放大倍數的關系

如果要做移動端開發,還有參數Touch interaction,這里不再詳述了,可以去官網上Leaflet Map Options查看。

3、事件

//覆蓋圖層——overlay 平移——pan
//圖層
baselayerchange //通過layers control改變底圖時觸發(以下均省略觸發二字)
overlayadd //當通過layers control選擇了一個覆蓋圖層
overlayremove //當通過layers control取消選擇一個覆蓋圖層
layeradd //當一個新圖層被添加到地圖中
layerremove //當一些圖層從地圖中移除

//地圖狀態改變
zommlevelschange //由於添加或移除圖層所引起的地圖縮放等級的改變
resize //地圖大小改變
unload //地圖被移除(remove方法)
viewreset //內容改變(常發生在zoom或load時),在定制覆蓋圖層時很有用
load //地圖被初始化(即它的center和zoom是第一次設置時)
zoomstart //地圖將要縮放前(縮放動畫前)
movestart //地圖將要被移動前
zoom //在地圖大小改變時重復觸發(包括zoom和fly)
move //在地圖移動時重復觸發 (包括pan和fly)
zoomend //地圖大小改變后(所有動畫結束后)
moveend //地圖中心停止改變后

//popup
popupopen //當一個popup打開時
popupclose //當一個popup關閉時
autopanstart //當由於打開一個popup而導致地圖移動時

//定位
locationerror //定位失敗時
locationfound //定位成功時

//交互式 最重要也最有用
click //在地圖上點擊時
dblclick //雙擊時
mousedown //按下鼠標
mouseup //松開鼠標
mouseover //鼠標進入地圖中
mouseout //鼠標離開地圖
mousemove //鼠標在地圖上移動
contextmenu //按住鼠標右鍵以顯示瀏覽器的contextmenu時
keypress //按了一個字符鍵(非系統鍵)
keydown //按住一個鍵(任何鍵)
keyup //松開一個鍵
preclick //點擊地圖前,當你想要在點擊事件觸發前發生一些操作時起作用

 

4、方法

用法:實例化對象.方法(參數);

//Layers和Controls
addControl(<Control>control) //將Control加入到地圖中
removeControl(<Control>control) //從地圖中移除Control
addLayer(<Layer>layer) //將Layer加入到地圖中
removeLayer(<Layer>layer) //從地圖中移除Layer
hasLayer(<Layer>layer) //如果Layer在地圖中,就返回true
eachLayer(<function>fn)//對地圖中的每個Layer進行函數function處理(迭代)
openPopup(<Popup>popup) //打開指定的Popup,關閉之前打開所有的Popup
closePopup(<Popup>popup) //關閉指定的Popup,如果不寫參數,就會關閉之前openPopup的那個

//地圖狀態 參數后邊加問號?表示該參數是可選參數
setView(<LatLng>center , <Number>zoom, <zoom/pan options> options?) //設置地圖視圖(center和zoom),option?表示可選參數,可選參數是Zoom/pan options
setZoom(<Number>zoom , <zoom/pan options>options) //設置地圖的zoom級別
zoomIn() //放大
zoomOut() //縮小
setZoomAround(<LatLng>latlng,<Number>zoom)//保持latlng標定的經緯相對於地圖不變,縮放至zoom級
setZoomAround(<Point>offset,<Number>zoom)//以地圖左上角為(0,0),保證相對於該點的Point offset相對於位置地圖不變,縮放至zoom級
fitBounds(<LatLngBounds>bounds) //設置地圖視角為包含限制范圍bounds的最大Zoom等級
//fitBounds配合Polyline等Vector Layer的getBounds()方法,可以起到聚焦到該對象的作用
//map.fitBounds(polyline.getBounds())

fitWorld() //設置地圖視角為包含整個世界的最大Zoom等級 panTo(<LatLng>latlng) //平移地圖至指定坐標 panBy(<Point>offset) //斜着平移,橫向平移像素為offset的x,縱向平移的像素為offset的y,整個平移過程會以動畫的形式顯示(如果值太小可能看不出動畫的效果) flyTo(<LatLng>latlng,<Number>zoom?) //用緩慢平移的方式(像在fly)轉移地圖視角到給定經緯度latlng flyToBounds(<LatLngBounds>bounds) //用fly的方式轉移地圖視角到限制區域bounds setMaxBounds(<LatLngBounds> bounds) //控制(鎖定)地圖視角到限制區域bounds setMinZoom(zoom) //最低zoom倍數 setMaxZoom(zoom) //最高zoom倍數 panInsideBounds(<LatLngBounds>bounds)//平移到給定邊界內的最近視圖 panInside(<LatLng>latlng) invalidateSize(<Zoom/pan options>options)//在地圖容器的size改變時自動更新地圖的大小 invalidateSize(<Boolean>animate)//同上 //后4個方法我還沒搞懂具體用法,只是做了粗略翻譯

//地理空間定位 locate(<Locate options>options) //嘗試從Geolocation API獲取用戶定位;當獲取成功時會觸發locationfound事件,失敗時則會觸發locationerror事件。成功時將會設置地圖視角到用戶位置;失敗時則是整個世界的視角。如果頁面不使用HTTPS,該方法就會失效(比如Chrome50或者更新版本)。 stopLocate() //停止監視之前定位的位置(如果之前map.locate參數{watch:true},就會一直監視該區域),如果參數{setView:true},就不會重置地圖視角

補充:如果要正常顯示,必須設置好zoomcenter 

//1、初始化時設置
var map=L.map(map , {center:latlng , zoom:10 });

//2、通過setView設置
map.setView(latlng,10);

 

 

5、屬性Properties

Handler是一個類似(函數或者行為)開關的東西,Handler中有兩個方法enable()、disable()負責管理這種行為是否允許。Handler的官方說明:Leaflet Handler

//Control
zoomControl //類型Control.zoom,控制默認zoom control

//Handler
boxZoom //矩形框縮放(也就是按住SHIFT再按住鼠標左鍵在地圖上畫一個框的方式進行縮放)
doubleClickZoom //雙擊放大
dragging //拖動
keyboard //鍵盤相關的縮放、平移等
scrollWheelZoom //滾輪縮放

2參數與5屬性的區別是,2參數是初始化時候的可選參數,設置時要寫成{ Key : Value }的形式;5是Map類的屬性,可以通過map.xxx訪問。 

 

6、Map Panes

Panes是一個用來控制Layers順序的DOM元素;可以翻譯為窗口。每個Map都有以下這些默認的Panes,它們的區別僅僅在於zIndex的不同——zIndex高的在顯示時就會覆蓋在zIndex低的上邊。

mapPane     //Z:'auto'; 包含其他所有Panes的Pane
tilePane     // 200 ;GridLayer和TileLayer
overlayPane    //400; Overlay shadow
shadowPane    //500; Vector(polylines,polygons...)、ImageOverlay、VideoOverlay
markerPane    //600; Icon Marker
tooltipPane    //650; Tooltip
popupPane    //700; Popup

通過Pane可以看出,默認情況下當幾個元素重疊時,顯示順序是Popup-tooltip....


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM