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

本学习系列将以Cesium + Vue3 + Vite +Typescript+elementplus作为主要技术栈展开，后续会循序渐进，持续探索Cesium的高级功能，相关源码全部免费公开。 详情请关注原文 [Cesium+Vue3学习系列（2）---添加天地图影像、添加地形]

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

1、用户需要在天地图官网上申请key，才能使用天地图的数据。申请方式请自行百度，网上有很多教程； 2、添加天地图影像，将以下代码里的"your key"改为步骤1申请的key

TypeScript 复制代码

    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、添加天地图注记

TypeScript 复制代码

    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、添加矢量地图

TypeScript 复制代码

     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的地形为例。

TypeScript 复制代码

    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函数即可。更多代码请关注原文 [Cesium+Vue3学习系列（2）---添加天地图影像、添加地形]

scss 复制代码

//添加地形
   AddTerrain(viewer)

效果如下：