天地图----leaflet 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);

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

天地图----leaflet sdk开发(一)
关于底图的创建中使用的方法,在文档中都有说明,地图加载的形式也不同(与接口后的拼接参数有关)比如矢量、栅格加载方法等。
天地图----leaflet sdk开发(一)
如果你使用的不是这个接口,而是申请的资源,则申请成功之后,会有对应的接口和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 sdk开发(一)
注记的创建与添加到底图上的方式同理

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

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

上一篇:kali系统——网络安全v6笔记总结(四)


下一篇:RAC HAIP问题记录