cesium 加载地形

1 加载cesium-ion地形

cesium-ion 是一个可扩展且安全的 3D 地理空间数据平台。它提供了 全球地形、影像图源和OSM建筑矢量等数据集。记住，因为地理数据的敏感性，一般正式项目开发时，都不会将自己的数据上传到该平台。不外在开发学习时，是一个很好的数据平台，我们可以注册使用它提供的数据服务。官网所在：Cesium ion – Cesium
1.1 注册cesium-ion账号

注册之后点击Access Tokens，已经默认提供了一个token, 你也可以自己注册新的token。
 

 
1.2 加载地形

cesium 提供了 createWorldTerrain 函数用来加载cesium-ion 提供的全球地形数据。使用示例如下:

1. const accessToken = '你申请的token'
2. Cesium.Ion.defaultAccessToken = accessToken;
3. const terrainProvider = Cesium.createWorldTerrain({
4.   requestVertexNormals: true,
5.   requestWaterMask: true
6. });

复制代码

2 加载 arcgis 地形

cesium 提供了 ArcGISTiledElevationTerrainProvider 类，来加载arcgis server 发布的地形服务。使用示例如下：

1. const url = 'https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer'
2. const terrainProvider = new Cesium.ArcGISTiledElevationTerrainProvider({
3.   url: url,
4.   requestWaterMask: true,
5.   requestVertexNormals: true
6. })

复制代码

3 加载离线地形

cesium 加载离线地形，需先下载DEM（高程数据）tif文件，然后像加载离线地图篇里一样，对离线的地形tif文件进行切片。只是这里的切片不能用QGIS切片，使用其他工具进行切片。
3.1 下载离线地形

参照使用QGIS对地形dem进行裁剪及归并篇的方法进行地形的下载和剪裁。
3.2 地形切片

cesium中使用的地形数据有格式要求，不能像离线地图篇那样直接使用QGIS切png瓦片，要使用其他工具，推荐使用cesiumlab，cesiumlab 是北京西部天下科技有限公司开发的一款数据处理软件，软件中大部分功能免费，高级功能收费。免费功能可以满意学习期间的数据处理任务，如果正式项目，没有专业的数据处理团队，建议购买高级功能。官网所在： 首页 地球可视化实行室.团队致力于提供基础应用开发，助力数字孪生从业者，开发相关业务。
地形数据处理如下：

处理完成后，切片效果如下：

我们可以在线检察切好后的显示效果

我们可以将切好的瓦片使用nginx 发布成静态服务，就可以使用了。cesium提供了CesiumTerrainProvider类来加载.terrain格式的瓦片地形数据，使用示例如下：

1. cont url = 'http://47.107.93.79:8600/terrain/offline/'
2. const terrainProvider = new Cesium.CesiumTerrainProvider({
3.   url: url,
4.   requestWaterMask: true,
5.   requestVertexNormals: true
6. })

复制代码

4 完备示例代码

TerrainLayer.vue

1. <!--
2. * @Description:
3. * @Author: maizi
4. * @Date: 2023-04-07 17:03:50
5. * @LastEditTime: 2024-07-19 15:03:55
6. * @LastEditors: maizi
7. -->
9. <template>
10.   <div id="container">
11.     <div class="pane_container">
12.       <el-button size="small" @click="changeTerrain(0)">cesium-ion地形</el-button>
13.       <el-button size="small" @click="changeTerrain(1)">ArcGis地形</el-button>
14.       <el-button size="small" @click="changeTerrain(2)">离线地形</el-button>
15.     </div>
16.   </div>
17. </template>
19. <script>
20. import * as MapWorks from './js/MapWorks'
21. export default {
22.   name: 'TerrainLayer',
23.   data(){
24.     return {
25.       checked: false
26.     }
27.   },
28.   mounted() {
29.     this.init();
30.   },
31.   methods:{
32.     init(){
33.       let container = document.getElementById("container");
34.       MapWorks.initMap(container)
35.       MapWorks.addTdtLayer({
36.         type: 'img_w'
37.       })
38.       MapWorks.addTdtLayer({
39.         type: 'cia_w'
40.       })
41.       MapWorks.changeTerrain(0)
42.     },
43.     changeTerrain(index){
44.       MapWorks.changeTerrain(index)
45.     }
46.   },
47.   beforeDestroy(){
48.     //实例被销毁前调用，页面关闭、路由跳转、v-if和改变key值
49.     MapWorks.destroy();
50.   }
51. }
52. </script>
54. <style lang="scss" scoped>
55. #container{
56.   width: 100%;
57.   height: 100%;
58.   background: rgba(7, 12, 19, 1);
59.   overflow: hidden;
60.   background-size: 40px 40px, 40px 40px;
61.   background-image: linear-gradient(hsla(0, 0%, 100%, 0.05) 1px, transparent 0), linear-gradient(90deg, hsla(0, 0%, 100%, 0.05) 1px, transparent 0);
62.   .pane_container{
63.     position: absolute;
64.     left: 10px;
65.     top: 50px;
66.     padding: 10px 15px;
67.     border-radius: 4px;
68.     border: 1px solid rgba(128, 128, 128, 0.5);
69.     color: #ffffff;
70.     background: rgba(0, 0, 0, 0.4);
71.     box-shadow: 0 3px 14px rgb(128 128 128 / 50%);
72.     z-index: 2;
73.   }
74. }
77. </style>

复制代码

MapWorks.js

1. import GUI from 'lil-gui';
2. // 初始视图定位在中国
3. Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);
4. //天地图key
5. const key = '39673271636382067f0b0937ab9a9677'
6. // cesium-ion token
7. const accessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5NWZmOTNkYS1mZjQ4LTQwOGMtYjBjYy1iMmRiODEwNmJkNmQiLCJpZCI6MjM0NDksInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODMzNzc2NjJ9.658-LW_jNkEHQxyWWizR4FGdh7B9MbiV2WK_qUN6dEo'
8. const gui = new GUI();
9. const params = {
10.   terrainExaggeration : 1.0,
11. }
14. let viewer = null;
15. let tileLayer = null
17. function initMap(container) {
18.   viewer = new Cesium.Viewer(container, {
19.     animation: false,
20.     baseLayerPicker: false,
21.     fullscreenButton: false,
22.     geocoder: false,
23.     homeButton: false,
24.     infoBox: false,
25.     sceneModePicker: false,
26.     selectionIndicator: false,
27.     timeline: false,
28.     navigationHelpButton: false,
29.     scene3DOnly: true,
30.     orderIndependentTranslucency: false,
31.     contextOptions: {
32.       webgl: {
33.         alpha: true
34.       }
35.     }
36.   })
37.   viewer._cesiumWidget._creditContainer.style.display = 'none'
38.   viewer.scene.fxaa = true
39.   viewer.scene.postProcessStages.fxaa.enabled = true
40.   if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
41.     // 判断是否支持图像渲染像素化处理
42.     viewer.resolutionScale = window.devicePixelRatio
43.   }
44.   // 移除默认影像
45.   removeAll()
46.   // 地形深度测试
47.   viewer.scene.globe.depthTestAgainstTerrain = true
48.   // 背景色
49.   viewer.scene.globe.baseColor = new Cesium.Color(0.0, 0.0, 0.0, 0)
50.   // 太阳光照
51.   // viewer.scene.globe.enableLighting = true;
54.    //gui面板
55.    initGui()
57.    window.viewer = viewer
58. }
60. function initGui() {
61.   let layerFolder = gui.addFolder('地形夸张')
62.   layerFolder.add(params, 'terrainExaggeration', 0, 5).step(0.1).onChange(function (value) {
63.     viewer.scene.globe.terrainExaggeration =params.terrainExaggeration
64.   })
65. }
68. function addTdtLayer(options) {
69.   let url = `https://t{s}.tianditu.gov.cn/DataServer?T=${options.type}&x={x}&y={y}&l={z}&tk=${key}`
70.   const layerProvider = new Cesium.UrlTemplateImageryProvider({
71.     url: url,
72.     subdomains: ['0','1','2','3','4','5','6','7'],
73.     tilingScheme: new Cesium.WebMercatorTilingScheme(),
74.     maximumLevel: 18
75.   });
76.   tileLayer = viewer.imageryLayers.addImageryProvider(layerProvider);
77. }
79. function changeTerrain(index) {
80.   let url = null
81.   let terrainProvider = null;
82.   switch(index){
83.     case 0:   //cesium-ion
84.       Cesium.Ion.defaultAccessToken = accessToken;
85.       terrainProvider = Cesium.createWorldTerrain({
86.         requestVertexNormals: true,
87.         requestWaterMask: true
88.       });
89.       break;
90.     case 1:   //arcgis
91.       url = 'https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer'
92.       terrainProvider = new Cesium.ArcGISTiledElevationTerrainProvider({
93.         url: url,
94.         requestWaterMask: true,
95.         requestVertexNormals: true
96.       })
97.       break;
98.     case 2:   //离线地形
99.       url = 'http://47.107.93.79:8600/terrain/offline/'
100.       terrainProvider = new Cesium.CesiumTerrainProvider({
101.         url: url,
102.         requestWaterMask: true,
103.         requestVertexNormals: true
104.       })
105.       break;
106.   }
107.   viewer.terrainProvider = terrainProvider;
111.   let destination = {
112.     x: -1252547.1676760237,
113.     y: 5349424.924241895,
114.     z: 3241966.5973322443
115.   };
116.   let orientation = {
117.     heading: 4.788130273160937,
118.     pitch: -0.33922935831056833,
119.     roll: 6.283013915050958
120.   };
121.   viewer.scene.camera.flyTo({
122.     destination: destination,
123.     orientation:orientation
124.   });
125. }
127. function removeAll() {
128.   viewer.imageryLayers.removeAll();
129. }
131. function destroy() {
132.   viewer.entities.removeAll();
133.   viewer.imageryLayers.removeAll();
134.   viewer.destroy();
135. }
137. export {
138.   initMap,
139.   addTdtLayer,
140.   changeTerrain,
141.   destroy
142. }

复制代码

5 运行效果

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。