Cesium加载地形

Cesium的地形来源大致可以分为两种，一种是由Cesium官方提供的数据源，一种是第三方的数据源，官方源依赖于Cesium Assets，如果设置了AccessToken后，就可以直接使用Cesium的地形静态构造方法来获取数据源CesiumTerrainProvider.fromIonAssetId，AssetId来自于你自己的Assets库中的id。另外一种则可以通过CesiumTerrainProvider.fromUrl 来实现加载第三方的地形服务。

下面的代码是从上一章节中的代码基础上实现的，集成了下拉选择地形服务的功能。

代码中的各个key，不再移除了，方便诸位复现功能，如果需要正式发布，请自行替换，各个key随时可能到期或被清理。

• 需要注意的是，对于第三方地形服务部分，我是使用了自己发布的地形服务，如何制作发布，网上有很多教程，一般来说发布后的地址是这样的，末尾以layer.json结束，但是在cesium中使用的时候，需要去掉最后的layer.json，因为Cesium会自动补充。

http://127.0.0.1:9004/tile/terrain/2zxJPMEE/layer.json

• 我使用的是cesiumlab发布的，还有一个labtoken参数，其实完整的是【…2zxJPMEE/layer.json?labtoken=xx】，这种情况，也是要去掉layer.json后再使用。

• 还需要注意，在cesium 1.104版本后，地形构造器改为了使用静态方法来获取，而且是异步的，具体的可查看代码中的switchTerrain 方法

<template><div><divref="cesiumContainer"id="cesiumContainer"class="cesium-container"style="width: 100%; height: 100vh;"></div><!--地形切换 --><div class="layer-switcher"><label for="baseMap">选择底图:</label><select id="baseMap" v-model="selectedBaseMap" @change="switchBaseMap"><option value="cesium">Cesium 默认</option><option value="tianditu">天地图</option><option value="gaode">高德地图</option><option value="baidu">百度地图</option></select></div><!-- 地形切换 --><div class="terrain-switcher"><label for="terrain">选择地形:</label><select id="terrain" v-model="selectedTerrain" @change="switchTerrain"><option value="none">无地形</option><option value="cesium">Cesium 官方地形</option><option value="custom">第三方/自定义地形</option></select></div></div>
</template><script setup>
import { onMounted, ref, reactive } from 'vue';
import {BingMapsImageryProvider,BingMapsStyle,Cartesian3,Color,HeadingPitchRange,Ion,Viewer,EllipsoidTerrainProvider,CesiumTerrainProvider
} from "cesium";
import "cesium/Build/Cesium/Widgets/widgets.css";
import CustomBaiduImageryProvider from "../cesium-extensions/BaiduImageryProvider.js";
import { AMapImageryProvider,BaiduImageryProvider,TdtImageryProvider }  from '@cesium-china/cesium-map'
import * as Cesium from "cesium";const cesiumContainer = ref(null)
const viewer = ref(null)
const selectedBaseMap = ref('cesium')
// 地形下拉框选项
const selectedTerrain = ref('none');// 定义各个底图的 ImageryProvider
const imageryProviders = reactive({cesium: [new BingMapsImageryProvider({url: 'https://dev.virtualearth.net',key: 'Rrke5RPh9hmJ32QZoFzP~_KI12m_pz_KbnGoZFmxVFg~Ai7_QidoqYPrWY7Kf1-GR8g9tY5C7BtbjAxOYpeoJNL4Hj66qSgWNOEAZSAlJKFC', // Cesium默认使用Bing Maps，需要替换为你的密钥mapStyle: BingMapsStyle.AERIAL,})],tianditu: [new TdtImageryProvider({style: 'vec', //style: vec、cva、img、cia、ter key:'8af054001cff0f120a2e21c69b4f8c00', // 需去天地图申请}),new TdtImageryProvider({style: 'cva', //style: vec、cva、img、cia、ter key:'8af054001cff0f120a2e21c69b4f8c00', // 需去天地图申请})],gaode: [new AMapImageryProvider({style: 'img', // style: img、elec、cvacrs: 'WGS84' // 使用84坐标系，默认为：GCJ02}),new AMapImageryProvider({style: 'cva', // style: img、elec、cvacrs: 'WGS84' // 使用84坐标系，默认为：GCJ02})],// 使用cesium-map 组件实现/*baidu: [new BaiduImageryProvider({url:"http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1",style: 'normal', // style: img、vec、normal、darkcrs: 'WGS84' // 使用84坐标系，默认为：BD09})],*/// 自定义百度地图提供器baidu:[new CustomBaiduImageryProvider()]
})onMounted(() => {// 设置 Cesium Ion 访问令牌Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhNmQ5NDYyNi1lZTdhLTRiYTItODFiZi1mYzNiYWNjNDFjMzgiLCJpZCI6NTk3MTIsImlhdCI6MTY2MDE4MDAyNX0.bDTaHEah0hRjUyJWz0hyxIL0Fg63awPXV26OmQ5MCdM'; // 替换为你的访问令牌viewer.value = new Viewer('cesiumContainer', {animation: false, // 移除动画控件timeline: false, // 移除时间轴控件geocoder: false, // 移除地理编码控件homeButton: false, // 移除主页按钮sceneModePicker: false, // 移除场景模式选择器selectionIndicator: false, // 移除选择指示器fullscreenButton: false, // 移除全屏按钮vrButton: false, // 移除 VR 按钮// 默认不设置 terrainProvider，即使用椭球体terrainProvider: new EllipsoidTerrainProvider(),// 默认无地形});// 添加默认实体或其他初始化操作const tiananmenEntity = viewer.value.entities.add({position: Cartesian3.fromDegrees(116.397128, 39.916527),point: { pixelSize: 10, color: Color.RED },name: '天安门',})viewer.value.flyTo(tiananmenEntity,{duration: 3, // 飞行时间，单位秒offset: new HeadingPitchRange(0, // Heading，航向角，0表示正北方向Cesium.Math.toRadians(-80), // Pitch，俯仰角，负值表示向下俯视405000 // Range，距离目标的距离，增加此值以提高视角高度)})
});
const switchBaseMap = () => {// 移除当前的底图图层if (viewer.value && viewer.value.imageryLayers.length > 0) {viewer.value.imageryLayers.removeAll()}let newProviders = imageryProviders[selectedBaseMap.value] || [];for (let i = 0; i < newProviders.length; i++) {viewer.value.imageryLayers.addImageryProvider(newProviders[i])}}// ------------------ 方法：地形切换 -------------------
const switchTerrain = async () => {if (!viewer.value) return;if (selectedTerrain.value === 'none') {viewer.value.terrainProvider = new EllipsoidTerrainProvider();} else if (selectedTerrain.value === 'cesium') {// 从 Ion assetId 加载官方地形viewer.value.terrainProvider = await CesiumTerrainProvider.fromIonAssetId(1, {// requestVertexNormals: true,// requestWaterMask: true,});} else if (selectedTerrain.value === 'custom') {// 从自定义 URL 加载viewer.value.terrainProvider = await CesiumTerrainProvider.fromUrl('http://127.0.0.1:9004/tile/terrain/2zxJPMEE?labtoken=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiItMSxUaHUgQXByIDE4IDE1OjMwOjU3IENTVCAyMDI0In0.j_YKsCRsIQtpgOWfFvMwAP65Rlx9uXyVte_xkE95Vdo',{requestVertexNormals: false,// requestWaterMask: true,})}
};</script><style>
.cesium-container {width: 100%;height: 100%;position: relative;
}
/* 隐藏页面底部的 Cesium logo 和数据归属 */
.cesium-viewer .cesium-widget-credits {display: none !important; /* 隐藏整个 Cesium 控件 */
}/* 隐藏 右上角的 Imagery 和 Navigation instructions */
.cesium-viewer .cesium-viewer-toolbar {display: none !important; /* 隐藏工具栏 */
}.layer-switcher {position: absolute;top: 10px;left: 10px;background: rgba(42, 42, 42, 0.8);padding: 10px;border-radius: 4px;color: white;z-index: 1;
}.layer-switcher select {margin-left: 5px;padding: 2px 5px;border-radius: 2px;border: none;
}/* 地形切换器样式，可以放在旁边或者下方 */
.terrain-switcher {position: absolute;top: 60px;left: 10px;background: rgba(42, 42, 42, 0.8);padding: 10px;border-radius: 4px;color: white;z-index: 10;
}.terrain-switcher select {margin-left: 5px;padding: 2px 5px;border-radius: 2px;border: none;
}
</style>

源码