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....