1、地图的创建。

1.1地图的构造

以下天地图的开发，均是属于leaflet二次开发，其文档与调用示例可在官网的开发中心里找到、关于地图的创建、与百度类似，但个人认为天地图的使用更加灵活。在官方示例中，可做一般项目展示使用。如有商用，是需要在天地图官网中申请资源的，申请之后会有专属的token值与接口，并且会有文档参考。
首先、创建地图的荔枝。使用官方文档创建的示例。

var map = L.map(‘map’,{crs:L.CRS.EPSG3857,center: {lon:120.09215287988154, lat:30.277052933991797},zoom:12,inertiaDeceleration:15000,maxZoom:20});

“map”是div标签中的id值，可自定义。
center表是中心点，zoom表示当前地图的缩放层级。
maxZoom表示最大的层级。
crs示例中是写死的，这个属性又是创建地图的关键属性，示例中给的这个crs的值，一般情况是可以满足的，但是如果要获取指定地区的地图，则这个crs还是需要改变的，这个应该会在申请的资源中会有的。
inertiaDeceleration：确定惯性移动减速的速率，单位是像素每秒的二次方。

1.2底图的添加

天地图的创建像一个三明治。地图—底图—注记–（marker点等）。
第一层创建完成之后接着，接着就是底图的创建
官方示例：

var layer = new L.GXYZ(‘http://ditu.zjzwfw.gov.cn/mapserver/vmap/zjvmap/getMAP?x={x}&y={y}&l={z}&styleId=tdt_biaozhunyangshi_2017’,{tileSize:512});
map.addLayer(layer);

成功之后就可以显示出一个初始的效果

关于底图的创建中使用的方法，在文档中都有说明，地图加载的形式也不同（与接口后的拼接参数有关）比如矢量、栅格加载方法等。

如果你使用的不是这个接口，而是申请的资源，则申请成功之后，会有对应的接口和token值，然后拼接参数即可
栅格栗子：

http://ditu.zjzwfw.gov.cn/services/wmts/emap/default/oss?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=emap&STYLE=default&TILEMATRIXSET=esritilematirx&TILEMATRIX=12&TILEROW=677&TILECOL=3414&FORMAT=image%2Fpng&tk=*********

1.3注记的添加

在底图创建完成后，紧接着创建注记。
官方示例：

var layer = new L.GXYZ(‘http://ditu.zjzwfw.gov.cn/mapserver/label/zjvmap/getMap?x={x}&y={y}&l={z}&styleId=tdt_biaozhunyangshi_2017’,{tileSize:512});
map.addLayer(layer);

成功之后就可以显示出基础的地图

注记的创建与添加到底图上的方式同理

天地图的简单创建，只是适用个人使用，若商用演示建议申请天地图的资源

本文只做技术参考，不做商用，若有异议，欢迎评论区探讨提升技术！谢谢！！！！

标签：leaflet,底图,示例,创建,地图,----,map,crs,sdk
来源： https://blog.csdn.net/h_970918/article/details/112834989