leaflet.js 地图制作初篇
ps：我所讲解的内容都是，最基础的，基本项目中都会用到的方法等，如有特殊需求，请参考官方文档。另外某些效果的实现与插件的使用，应为版本问题，需要修改源码，官网直接下载的是不可用的。
1.初步加载地图
首先引入必要的css与js文件
<link href="../../leaflet/leaflet.css" rel="stylesheet">
<script src="../../script/jquery-1.11.3.js"></script>
<script src="../../leaflet/leaflet-src.js"></script>
然后利用js初步加载地图
<div id="map" style="width:100%;height:100%;"></div>
<script>
var _map;
_map= new L.Map('map');
</script>
此时地图容器加载完成，为了能够看到影像，我们要加载地图，并设置地图中心点，此处已加载天地图为例，设置中心点为北京。
//影像地图图层
var _baseImgLayer= new L.tileLayer('http://t{s}.tianditu.cn/DataServer?T=img_c&X={x}&Y={y}&L={z}',{subdomains:[0,1,2,3,4,5,6,7]);
//文字地图图层
var _baseTxtLayer=new L.tileLayer('http://t{s}.tianditu.cn/DataServer?T=cia_c&X={x}&Y={y}&L={z}',{subdomains:[0,1,2,3,4,5,6,7]);
//将图层加入到地图中去
_baseImgLayer.addTo(_map);
_baseTxtLayer.addTo(_map);
//设置地图中心点为北京
_map.setView(new L.LatLng(39.905,116.399), 13);
//当然中心点也可以在加载地图开始设置，后面详细解释L.map参数时会讲解
以上代码已经完成了初步的地图加载，并将地图中心定位到了北京，下面详细讲解L.Map参数及方法
参数设置
L.map("容器id", {参数设置})
//点击地图是否关闭气泡，默认true
closePopupOnClick:true/false
//双击地图时候进行地图缩放，默认true
doubleClickZoom:true/false
//空间参考坐标系，默认为L.CRS.EPSG3857，如不确定不建议修改
crs:L.CRS.EPSG3857/L.CRS.EPSG4326/L.CRS.EPSG3395/L.CRS.EPSG900913/L.CRS.Simple/L.CRS.Earth
//中心点坐标
center:[39.905,116.399]
//初始层级大小,number类型
zoom:8
//允许缩放最小层级，number类型
minZoom:8
//允许缩放最大层级，number类型
maxZoom:18
ps:国内推荐crs用4326加载天地图，如果用上树方法不能出现影像图，可能需要修改leaflet-src.js中部分源码
事件
地图映射事件
zoomstart //缩放开始时事件
zoomend //缩放结束时事件
movestart //平移开始时事件
moveend //平移结束时时间
地图鼠标事件
click //点击事件
dblclick //双击事件
mousedown //按下事件
mouseup //抬起事件
mouseover //进如地图事件
mouseout //移出地图事件
mousemove //鼠标移动事件
示例:
_map.on("click",function(){
//do something
})
ps:其中鼠标交互事件可以传递参数e得到鼠标当前所在经纬度
例
_map.on("click",function(e){
console.log(e);
console.log(e.latlng.lat+"/"+e.latlng.lng)
})
图层和控件方法
addLayer //添加指定图层
removeLayer //移除指定图层
openPopup //打开气泡(指定气泡或之前打开的前一个气泡)，参数可选，如不传，打开前一个
closePopup //关闭气泡，参数可选同上
示例:
_map.addLayer(layer)
修改与获取地图状态
setView //设置地图中心点
示例:_map.setView(new L.LatLng(39.905,116.399), 13);
setZoom //设置地图缩放等级
示例:_map.setZoom(13);
setMinZoom //设置最小缩放等级
setMaxZoom //设置最大缩放等级
示例:_map.setMaxZoom (18);
getCenter() //获取地图中心点
getZoom() //获取当前地图缩放等级
getBounds() //返回当前视图内的地理边界
getMinZoom() //返回当前地图设置的最小缩放层级
getMaxZoom() //返回当前地图设置的最大缩放层级
以上为利用leaflet.js初步加载地图的方法，后续内容我会从实际项目运用出发，打乱讲解顺序(与官方文档讲解顺序不同，而且会在一个内容中嵌套另一个内容)；
转载自：https://blog.csdn.net/lonly_maple/article/details/83089722
