cesium-加载DEM数据

DEM介绍

数字高程模型（Digital Elevation Model)，简称DEM，是通过有限的地形高程数据实现对地面地形的数字化模拟（即地形表面形态的数字化表达），它是用一组有序数值阵列形式表示地面高程的一种实体地面模型，是数字地形模型(Digital Terrain Model，简称DTM)的一个分支，其它各种地形特征值均可由此派生。

一般认为，DTM是描述包括高程在内的各种地貌因子，如坡度、坡向、坡度变化率等因子在内的线性和非线性组合的空间分布，其中DEM是零阶单纯的单项数字地貌模型，其他如坡度、坡向及坡度变化率等地貌特性可在DEM的基础上派生。

加载cesium默认DEM

cesium有自己发布的DEM图层，如果要使用cesium默认的DEM数据，可能需要科学上网（懂的都懂）

配置Cesium的DEM图层

    //初始页面加载Cesium.Ion.defaultAccessToken = cesium_tk;let viewer = new Cesium.Viewer('cesiumContainer', {geocoder: false,   // 位置查找工具baseLayerPicker: false,// 图层选择器（地形影像服务）timeline: false, // 底部时间线homeButton: false,// 视角返回初始位置fullscreenButton: false, // 全屏animation: false,   // 左下角仪表盘（动画器件）sceneModePicker: false,// 选择视角的模式（球体、平铺、斜视平铺）navigationHelpButton: false, //导航帮助按钮imageryProvider: new Cesium.WebMapTileServiceImageryProvider({url: TDT_IMG_C,layer: "tdtImg_c",style: "default",format: "tiles",tileMatrixSetID: "c",subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],tilingScheme: new Cesium.GeographicTilingScheme(),tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"],maximumLevel: 50,show: false}),terrainProvider : Cesium.createWorldTerrain({//cesium的DEM数据图层requestWaterMask : true})});

核心代码

        terrainProvider : Cesium.createWorldTerrain({//cesium的DEM数据图层requestWaterMask : true})

实现效果

加载自定义DEM数据

有些时候我们需要使用自己发布DEM数据，这里我使用NGINX发布DEM切片数据

核心代码

    let terrainProvider = new Cesium.CesiumTerrainProvider({url: 'http://192.168.1.243:8000/terrain/NxZ4xz2h'});viewer.terrainProvider = terrainProvider;

完整代码

<!DOCTYPE html>
<html lang="en">
<head><!-- Use correct character set. --><meta charset="utf-8"/><!-- Tell IE to use the latest, best version. --><meta http-equiv="X-UA-Compatible" content="IE=edge"/><!-- Make the application on mobile take up the full browser screen and disable user scaling. --><meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/><title>cesium加载DEM</title><script src="http://192.168.1.243:8088/lib/Cesium-1.78/Build/Cesium/Cesium.js"></script><style>@import url(http://192.168.1.243:8088/lib/Cesium-1.78/Build/Cesium/Widgets/widgets.css);html,body,#cesiumContainer {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>//天地图tokenlet TDT_tk = "token";//Cesium tokenlet cesium_tk = "token";//天地图影像let TDT_IMG_C = "http://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0" +"&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +"&style=default&format=tiles&tk=" + TDT_tk;//标注let TDT_CIA_C = "http://{s}.tianditu.gov.cn/cia_c/wmts?service=wmts&request=GetTile&version=1.0.0" +"&LAYER=cia&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +"&style=default&format=tiles&tk=" + TDT_tk;//初始页面加载Cesium.Ion.defaultAccessToken = cesium_tk;let viewer = new Cesium.Viewer('cesiumContainer', {geocoder: false,   // 位置查找工具baseLayerPicker: false,// 图层选择器（地形影像服务）timeline: false, // 底部时间线homeButton: false,// 视角返回初始位置fullscreenButton: false, // 全屏animation: false,   // 左下角仪表盘（动画器件）sceneModePicker: false,// 选择视角的模式（球体、平铺、斜视平铺）navigationHelpButton: false, //导航帮助按钮imageryProvider: new Cesium.WebMapTileServiceImageryProvider({url: TDT_IMG_C,layer: "tdtImg_c",style: "default",format: "tiles",tileMatrixSetID: "c",subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],tilingScheme: new Cesium.GeographicTilingScheme(),tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"],maximumLevel: 50,show: false})});//调用影响中文注记服务viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({url: TDT_CIA_C,layer: "tdtImg_c",style: "default",format: "tiles",tileMatrixSetID: "c",subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],tilingScheme: new Cesium.GeographicTilingScheme(),tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"],maximumLevel: 50,show: false}))// 去除版权信息viewer._cesiumWidget._creditContainer.style.display = "none";let terrainProvider = new Cesium.CesiumTerrainProvider({url: 'http://192.168.1.243:8000/terrain/NxZ4xz2h'});viewer.terrainProvider = terrainProvider;viewer.camera.flyTo({destination:Cesium.Cartesian3.fromDegrees(87.54791, 29.57025, 17863.0),orientation: {heading: Cesium.Math.toRadians(0.0),pitch: Cesium.Math.toRadians(-25.0),roll: 0.0}});
</script></body>
</html>

实现效果

补充

在加载dem数据时会发现，由于我们的DEM数据精度低，很多地方的起伏就很不明显
这时为了凸显出起伏的效果，我们得拉伸dem数据，这里有两种方式来处理

使用数据处理软件直接对dem数据处理，重新计算栅格的值
使用cesium来设置全局dem数据的参数

这里我们介绍一下前端怎么处理。cesium在1.83版本后新增来两个属性terrainExaggeration和terrainExaggerationRelativeHeight。

官方文档介绍

代码实现

这里我将起伏拉伸了四倍

//用于夸大地形的标量。默认为1.0（不夸张）。值2.0将地形缩放 2 倍。的值0.0使地形完全平坦。请注意，地形夸大不会修改任何其他图元，因为它们是相对于椭圆体定位的。
viewer.scene.globe.terrainExaggeration=4;
//夸大地形的高度。默认为0.0（相对于椭球表面缩放）。高于此高度的地形将向上缩放，低于此高度的地形将向下缩放。请注意，地形夸大不会修改任何其他图元，因为它们是相对于椭圆体定位的。如果Globe#terrainExaggeration是1.0这个值将没有效果。
viewer.scene.globe.terrainExaggerationRelativeHeight=1.0;