leaflet 加载天地图

1.引入天地图的WMTS(两个都要用，一个是名称标注，一个地形)
（1）矢量地图

const VEC_C = 'http://t1.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=';

（2）标注地图

const CVA_C = 'http://t1.tianditu.com/cva_c/wmts?layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk='

2.初始化leaflet (TK_KEY  为你在天地图服务的key,去申请)

this.map = L.map('map', {minZoom: 3,maxZoom: 20,center: [29.563761, 106.550464],zoom: 15,zoomControl: false,attributionControl: false,crs: L.CRS.EPSG4326,
});

// 天地图投影

L.tileLayer(VEC_C + TK_KEY, {maxZoom: 20,tileSize: 256,zoomOffset: 1,}
).addTo(this.map);
L.tileLayer(CVA_C + TK_KEY, {maxZoom: 20,tileSize: 256,zoomOffset: 1,}
).addTo(this.map);

大功告成。

leaflet 加载天地图相关推荐

leaflet加载天地图
概述: leaflet是一个轻量级的并且开源的地图框架,是由esri发起的,由于其轻量.简单而被大家喜欢,本文带你学习如何在leaflet中加载天地图. 实现: leaflet加载天地图比较简单,做了 ...
leaflet加载天地图影像、地形、矢量底图
第一步: 到天地图官网(国家地理信息公共服务平台天地图)注册账号,然后登陆,再点击图中的开发资源,在点击后会弹出选择框,再点击地图api(天地图API).这里直接点击我给的两个链接就行. 就会出现如 ...
leaflet加载天地图DataServer
1. 天地图下载ChineseTmsProviders.js,https://github.com/htoooth/Leaflet.ChineseTmsProviders/tree/master/sr ...
osgEarth3.0 加载天地图
2.8版本里面有个xyz图层的例子,稍作修改就可以加载天地图的影像图层.在3.0版本中,XYZ , bing 等图层已经被移植到内核中.所以我们直接用XYZ图层来加载天地图即可 XYZImageLay ...
基于ArcGIS API for JavaScript加载天地图
文章目录前言效果图详细代码总结参考链接前言该篇主要介绍如何用ArcGIS JS API加载天地图,具体应用场景以及需求分析等,在上篇基于ArcGIS API for JavaScript ...
Vue+Openlayers实现加载天地图WMTS服务显示
场景 Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图: Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图_BADAO_ ...
leaflet加载离线地图教程以及下载离线地图瓦片工具
关于源码以及教程侵权请联系作者删除最近在做一个leaflet加载离线地图的东西,结果在网上找到一份相关的教程以及源码源码链接:https://pan.baidu.com/s/1cGew8PAU-L ...
ol xyz 加载天地图_OpenLayers加载天地图方法——WMTS和XYZ
1.ol.layer.Tile及数据源类结构 openlayers中,图层(layer)不可缺少的组成部分是数据源(source),天地图是切片的数据服务,对应的图层是ol.layer.Tile,下图 ...
(转载）arcgis for js - 解决加载天地图和WMTS服务,WMTS服务不显示的问题,以及wmts服务密钥。...
1 arcgis加载天地图和wmts服务 arcgis for js加载天地图的例子网上有很多,这里先不写了,后期有空再贴代码,这里主要分析下WMTS服务为什么不显示,怎么解决. 条件:这里的WMTS ...

leaflet 加载天地图

leaflet 加载天地图相关推荐

最新文章

热门文章