leaflet.js 地图制作初篇

注意：我所讲解的内容都是，最基础的，基本项目中都会用到的方法等，如有特殊需求，请参考官方文档。

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初步加载地图的方法，后续内容我会从实际项目运用出发，打乱讲解顺序(与官方文档讲解顺序不同，而且会在一个内容中嵌套另一个内容)；

leaflet.js 地图制作初篇

猜你喜欢