标签：leaflet 底图 示例 创建 地图 ---- map crs sdk
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。