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},就不會重置地圖視角
補充:如果要正常顯示,必須設置好zoom和center
//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....