1. 注冊(cè)天地圖

更多服務(wù)訪問(wèn)：http://lbs.tianditu.gov.cn/server/MapService.html

2. 確定服務(wù)類型

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=您的密鑰

官網(wǎng)給出的調(diào)用地圖瓦片的示例如上，注意：layer后面的一定要和服務(wù)類型對(duì)應(yīng)起來(lái)！

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加載多個(gè)圖層

//中文地名注記 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. 示例展示

總結(jié)

以上是生活随笔為你收集整理的Cesium + Vue 加载天地图服务（二）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。