DEM介绍
数字高程模型(Digital Elevation Model),简称DEM,是通过有限的地形高程数据实现对地面地形的数字化模拟(即地形表面形态的数字化表达),它是用一组有序数值阵列形式表示地面高程的一种实体地面模型,是数字地形模型(Digital Terrain Model,简称DTM)的一个分支,其它各种地形特征值均可由此派生。
加载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>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<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:xxx/lib/Cesium-1.78/Build/Cesium/Cesium.js"></script>
<style>
@import url(http:xxxx/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>
//天地图token
let TDT_tk = "token";
//Cesium token
let 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;