1. 注册天地图

更多服务访问：http://lbs.tianditu.gov.cn/server/MapService.html

2. 确定服务类型

http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={x}&TILECOL={y}&tk=您的密钥

官网给出的调用地图瓦片的示例如上，注意：layer后面的一定要和服务类型对应起来！

3. Cesium使用底图

//矢量底图var Cesium = this.Cesium;var cesiumContainer = document.getElementById("cesiumContainer");var viewer = new Cesium.Viewer("cesiumContainer",{imageryProvider: new Cesium.WebMapTileServiceImageryProvider({url: "http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=ebf64362215c081f8317203220f133eb",layer: "tdtBasicLayer",style: "default",format: "tiles",tileMatrixSetID: "GoogleMapsCompatible",show: true,maximumLevel: 18})});

4. Cesium加载多个图层

//中文地名注记
viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({ url: "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=d6a72a78a43a2c17294b72ab26354cd6",layer: "tdtAnnoLayer",style: "default",format: "tiles",tileMatrixSetID: "GoogleMapsCompatible",show: true}));}
}

5. 示例展示

Cesium + Vue 加载天地图服务（二）相关推荐

加载天地图服务出现空吧图片类似404图片加载失败的效果
如果出现加载天地图出现该情况: 解决办法其实很简单,一句代码就ok了,话不多上,上代码: //创建自定义图层对象 var lay = new T.TileLayer(layers[i].layer.F ...
arcgis加载天地图_ArcGIS Runtime SDK for Android100.5.0端加载天地图服务
点击图片上方蓝色字体GIS点滴即可订阅我们都知道,天地图服务的调用都需要获取授权.在这种模式下,之前通过WebTiledLayer加载的方式在Android端就无法显示了,由下图可知,虽然正确发送了 ...
arcgis api for javascript4.18加载天地图服务，并且加载自己的发布的动态地图服务
以arcgis api for javascript4.18 API为例: 遇到几个问题: 1.用户,特别是小白用户,不知道用什么API类来调用各种地图服务. 解决办法: 方法一:正向思考方法参考官 ...
ol3 加载天地图服务
function map_load(){ //添加坐标 var mousePositionControl = new ol.control.MousePosition({ coordi ...
Arcgis for Js之加载wms服务
概述:本节讲述Arcgis for Js加载ArcgisServer和GeoServer发布的wms服务. 1.定义resourceInfo var resourceInfo = { extent: ...
ol xyz 加载天地图_OpenLayers加载天地图方法——WMTS和XYZ
1.ol.layer.Tile及数据源类结构 openlayers中,图层(layer)不可缺少的组成部分是数据源(source),天地图是切片的数据服务,对应的图层是ol.layer.Tile,下图 ...
openlayer3 系列 4 - 加载天地图
1.天地图官网 http://www.tianditu.gov.cn/ 2.申请key http://lbs.tianditu.gov.cn/authorization/authorization.h ...
Vue+Openlayers实现加载天地图WMTS服务显示
场景 Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图: Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图_BADAO_ ...
三维地图之cesium加载天地图（有代码）
天地图官网上写了cesium加载天地图的方法,http://lbs.tianditu.gov.cn/docs/#/sanwei/,但读起来,写起来,的确令人费解. 下面写一段非常简单的代码,用cesi ...

Cesium + Vue 加载天地图服务（二）

1. 注册天地图

2. 确定服务类型

3. Cesium使用底图

4. Cesium加载多个图层

5. 示例展示

Cesium + Vue 加载天地图服务（二）相关推荐

最新文章

热门文章