Cesium加载地形

Cesium的地形泉源大抵可以分为两种，一种是由Cesium官方提供的数据源，一种是第三方的数据源，官方源依赖于Cesium Assets，假如设置了AccessToken后，就可以直接使用Cesium的地形静态构造方法来获取数据源CesiumTerrainProvider.fromIonAssetId，AssetId来自于你本身的Assets库中的id。别的一种则可以通过CesiumTerrainProvider.fromUrl 来实现加载第三方的地形服务。
    下面的代码是从上一章节中的代码根本上实现的，集成了下拉选择地形服务的功能。
    代码中的各个key，不再移除了，方便诸位复现功能，假如须要正式发布，请自行更换，各个key随时大概到期或被整理。
  

• 须要注意的是，对于第三方地形服务部门，我是使用了本身发布的地形服务，怎样制作发布，网上有很多教程，一样寻常来说发布后的所在是如许的，末了以layer.json竣事，但是在cesium中使用的时间，须要去掉末了的layer.json，由于Cesium会主动增补。
  

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

复制代码

• 我使用的是cesiumlab发布的，另有一个labtoken参数，着实完备的是【…2zxJPMEE/layer.json?labtoken=xx】，这种环境，也是要去掉layer.json后再使用。
  
• 还须要注意，在cesium 1.104版本后，地形构造器改为了使用静态方法来获取，而且是异步的，具体的可查察代码中的switchTerrain 方法
  

1. <template>
2.   <div>
3.     <div
4.         ref="cesiumContainer"
5.         id="cesiumContainer"
6.         class="cesium-container"
7.         style="width: 100%; height: 100vh;"
8.     >
9.       
10.     </div>
11.     <!--地形切换 -->
12.     <div class="layer-switcher">
13.       <label for="baseMap">选择底图:</label>
14.       <select id="baseMap" v-model="selectedBaseMap" @change="switchBaseMap">
15.         <option value="cesium">Cesium 默认</option>
16.         <option value="tianditu">天地图</option>
17.         <option value="gaode">高德地图</option>
18.         <option value="baidu">百度地图</option>
19.       </select>
20.     </div>
22.     <!-- 地形切换 -->
23.     <div class="terrain-switcher">
24.       <label for="terrain">选择地形:</label>
25.       <select id="terrain" v-model="selectedTerrain" @change="switchTerrain">
26.         <option value="none">无地形</option>
27.         <option value="cesium">Cesium 官方地形</option>
28.         <option value="custom">第三方/自定义地形</option>
29.       </select>
30.     </div>
31.   </div>
32. </template>
34. <script setup>
35. import { onMounted, ref, reactive } from 'vue';
36. import {
37.   BingMapsImageryProvider,
38.   BingMapsStyle,
39.   Cartesian3,
40.   Color,
41.   HeadingPitchRange,
42.   Ion,
43.   Viewer,
44.   EllipsoidTerrainProvider,
45.   CesiumTerrainProvider
46. } from "cesium";
47. import "cesium/Build/Cesium/Widgets/widgets.css";
48. import CustomBaiduImageryProvider from "../cesium-extensions/BaiduImageryProvider.js";
49. import { AMapImageryProvider,BaiduImageryProvider,TdtImageryProvider }  from '@cesium-china/cesium-map'
50. import * as Cesium from "cesium";
52. const cesiumContainer = ref(null)
53. const viewer = ref(null)
54. const selectedBaseMap = ref('cesium')
55. // 地形下拉框选项
56. const selectedTerrain = ref('none');
58. // 定义各个底图的 ImageryProvider
59. const imageryProviders = reactive({
60.   cesium: [new BingMapsImageryProvider({
61.     url: 'https://dev.virtualearth.net',
62.     key: 'Rrke5RPh9hmJ32QZoFzP~_KI12m_pz_KbnGoZFmxVFg~Ai7_QidoqYPrWY7Kf1-GR8g9tY5C7BtbjAxOYpeoJNL4Hj66qSgWNOEAZSAlJKFC', // Cesium默认使用Bing Maps，需要替换为你的密钥
63.     mapStyle: BingMapsStyle.AERIAL,
64.   })],
65.   tianditu: [new TdtImageryProvider({
66.     style: 'vec', //style: vec、cva、img、cia、ter
67.     key:'8af054001cff0f120a2e21c69b4f8c00', // 需去天地图申请
68.   }),new TdtImageryProvider({
69.     style: 'cva', //style: vec、cva、img、cia、ter
70.     key:'8af054001cff0f120a2e21c69b4f8c00', // 需去天地图申请
71.   })],
72.   gaode: [new AMapImageryProvider({
73.     style: 'img', // style: img、elec、cva
74.     crs: 'WGS84' // 使用84坐标系，默认为：GCJ02
75.   }),
76.     new AMapImageryProvider({
77.     style: 'cva', // style: img、elec、cva
78.     crs: 'WGS84' // 使用84坐标系，默认为：GCJ02
79.   })],
80.   // 使用cesium-map 组件实现
81.   /*baidu: [new BaiduImageryProvider({
82.     url:"http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1",
83.     style: 'normal', // style: img、vec、normal、dark
84.     crs: 'WGS84' // 使用84坐标系，默认为：BD09
85.   })],*/
86.   // 自定义百度地图提供器
87.   baidu:[new CustomBaiduImageryProvider()]
88. })
90. onMounted(() => {
91.   // 设置 Cesium Ion 访问令牌
92.   Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhNmQ5NDYyNi1lZTdhLTRiYTItODFiZi1mYzNiYWNjNDFjMzgiLCJpZCI6NTk3MTIsImlhdCI6MTY2MDE4MDAyNX0.bDTaHEah0hRjUyJWz0hyxIL0Fg63awPXV26OmQ5MCdM'; // 替换为你的访问令牌
94.   viewer.value = new Viewer('cesiumContainer', {
95.     animation: false, // 移除动画控件
96.     timeline: false, // 移除时间轴控件
97.     geocoder: false, // 移除地理编码控件
98.     homeButton: false, // 移除主页按钮
99.     sceneModePicker: false, // 移除场景模式选择器
100.     selectionIndicator: false, // 移除选择指示器
101.     fullscreenButton: false, // 移除全屏按钮
102.     vrButton: false, // 移除 VR 按钮
103.     // 默认不设置 terrainProvider，即使用椭球体
104.     terrainProvider: new EllipsoidTerrainProvider(),// 默认无地形
105.   });
107.   // 添加默认实体或其他初始化操作
108.   const tiananmenEntity = viewer.value.entities.add({
109.     position: Cartesian3.fromDegrees(116.397128, 39.916527),
110.     point: { pixelSize: 10, color: Color.RED },
111.     name: '天安门',
112.   })
113.   viewer.value.flyTo(tiananmenEntity,{
114.     duration: 3, // 飞行时间，单位秒
115.     offset: new HeadingPitchRange(
116.         0, // Heading，航向角，0表示正北方向
117.         Cesium.Math.toRadians(-80), // Pitch，俯仰角，负值表示向下俯视
118.         405000 // Range，距离目标的距离，增加此值以提高视角高度
119.     )
120.   })
121. });
122. const switchBaseMap = () => {
123.   // 移除当前的底图图层
124.   if (viewer.value && viewer.value.imageryLayers.length > 0) {
125.     viewer.value.imageryLayers.removeAll()
126.   }
128.   let newProviders = imageryProviders[selectedBaseMap.value] || [];
129.   
130.   for (let i = 0; i < newProviders.length; i++) {
131.     viewer.value.imageryLayers.addImageryProvider(newProviders[i])
132.   }
133.   
134. }
136. // ------------------ 方法：地形切换 -------------------
137. const switchTerrain = async () => {
138.   if (!viewer.value) return;
140.   if (selectedTerrain.value === 'none') {
141.     viewer.value.terrainProvider = new EllipsoidTerrainProvider();
142.   } else if (selectedTerrain.value === 'cesium') {
143.     // 从 Ion assetId 加载官方地形
144.     viewer.value.terrainProvider = await CesiumTerrainProvider.fromIonAssetId(1, {
145.       // requestVertexNormals: true,
146.       // requestWaterMask: true,
147.     });
148.   } else if (selectedTerrain.value === 'custom') {
149.     // 从自定义 URL 加载
150.     viewer.value.terrainProvider = await CesiumTerrainProvider.fromUrl(
151.         'http://127.0.0.1:9004/tile/terrain/2zxJPMEE?labtoken=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiItMSxUaHUgQXByIDE4IDE1OjMwOjU3IENTVCAyMDI0In0.j_YKsCRsIQtpgOWfFvMwAP65Rlx9uXyVte_xkE95Vdo',
152.         {
153.           requestVertexNormals: false,
154.           // requestWaterMask: true,
155.         }
156.     )
157.   }
158. };
160. </script>
162. <style>
163. .cesium-container {
164.   width: 100%;
165.   height: 100%;
166.   position: relative;
167. }
168. /* 隐藏页面底部的 Cesium logo 和数据归属 */
169. .cesium-viewer .cesium-widget-credits {
170.   display: none !important; /* 隐藏整个 Cesium 控件 */
171. }
173. /* 隐藏 右上角的 Imagery 和 Navigation instructions */
174. .cesium-viewer .cesium-viewer-toolbar {
175.   display: none !important; /* 隐藏工具栏 */
176. }
178. .layer-switcher {
179.   position: absolute;
180.   top: 10px;
181.   left: 10px;
182.   background: rgba(42, 42, 42, 0.8);
183.   padding: 10px;
184.   border-radius: 4px;
185.   color: white;
186.   z-index: 1;
187. }
189. .layer-switcher select {
190.   margin-left: 5px;
191.   padding: 2px 5px;
192.   border-radius: 2px;
193.   border: none;
194. }
196. /* 地形切换器样式，可以放在旁边或者下方 */
197. .terrain-switcher {
198.   position: absolute;
199.   top: 60px;
200.   left: 10px;
201.   background: rgba(42, 42, 42, 0.8);
202.   padding: 10px;
203.   border-radius: 4px;
204.   color: white;
205.   z-index: 10;
206. }
208. .terrain-switcher select {
209.   margin-left: 5px;
210.   padding: 2px 5px;
211.   border-radius: 2px;
212.   border: none;
213. }
214. </style>

复制代码

源码