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

最新推荐文章于 2024-07-08 11:50:59 发布

Conso1e

最新推荐文章于 2024-07-08 11:50:59 发布

阅读量2k

点赞数

分类专栏： Cesium VUE 文章标签： Cesium 世界地图地图高清清晰

本文链接：https://blog.csdn.net/qq_41366268/article/details/107166957

版权

Cesium 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

VUE

8 篇文章 0 订阅

订阅专栏

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
    }));
  }   
}