Cesium+Vue3学习系列（2）---添加天地图影像、添加地形

原创已于 2025-09-26 15:45:53 修改 · 593 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#学习

于 2025-09-16 13:21:01 首次发布

webgl 同时被 2 个专栏收录

39 篇文章

订阅专栏

Cesium

28 篇文章

订阅专栏

本学习系列将以Cesium + Vue3 + Vite +Typescript+elementplus作为主要技术栈展开，后续会循序渐进，持续探索Cesium的高级功能，相关源码全部免费公开。请关注微信公众号 “webgis学习”或扫描下方二维码，关注后，在公众号里输入“Cesium学习系列源码”，即可看到全部代码。

本篇介绍如何添加天地图影像、如何添加地形。

1、用户需要在天地图官网上申请key，才能使用天地图的数据。申请方式请自行百度，网上有很多教程；

2、添加天地图影像，将以下代码里的“your key”改为步骤1申请的key


viewer.imageryLayers.add(new Cesium.ImageryLayer(new Cesium.WebMapTileServiceImageryProvider({
        url: `http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=`+"your key",
        layer: "tdtBasicLayer",
        style: "default",
        format: "image/jpeg",
        tileMatrixSetID: "GoogleMapsCompatible",
    })));

效果如下

3、添加天地图注记


viewer.imageryLayers.add(new Cesium.ImageryLayer(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&format=tiles&tk=`+"your key",
        layer: "tdtBasicLayer",
        style: "default",
        format: "image/jpeg",
        tileMatrixSetID: "GoogleMapsCompatible",
    })));

4、添加矢量地图


  viewer.imageryLayers.addImageryProvider(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=" + "your key",
        layer: "tdtVecBasicLayer",
        style: "default",
        format: "image/jpeg",
        tileMatrixSetID: "GoogleMapsCompatible"
  
    }));

5、添加地形。新版本的Cesium需异步获取地形。这里以添加marsgis的地形为例。


const AddTerrain = async (viewer: Cesium.Viewer) => {
    try {
        viewer.terrainProvider = await Cesium.CesiumTerrainProvider.fromUrl("https://data.mars3d.cn/terrain", {
            requestWaterMask: true,
            requestVertexNormals: true,
        })
    } catch (e) {
        console.log("加载地形失败", e)
    }
}

调用AddTerrain函数即可