Cesium中开启等高线渲染

最近接到一个需求，需要在Cesium中基于实时地形开启等高线效果，让用户可以看到真实效果。在网上看了一些资料，许多都是需要付费的或者不提供源码，于是在cesium官网找到了示例代码，以下将具体介绍如何在cesium中进行集成。

第一步：设置viewer开启光照

viewer.scene.globe.enableLighting = true;

第二步：定义等高线初始值

var minHeight = -414.0; // approximate dead sea elevation
var maxHeight = 8777.0; // approximate everest elevation
var contourColor = Cesium.Color.RED.clone();
var contourUniforms = {};
var shadingUniforms = {};

第三步：定义相关处理函数

function getElevationContourMaterial() {// Creates a composite material with both elevation shading and contour linesreturn new Cesium.Material({fabric: {type: "ElevationColorContour",materials: {contourMaterial: {type: "ElevationContour",},elevationRampMaterial: {type: "ElevationRamp",},},components: {diffuse:"contourMaterial.alpha == 0.0 ? elevationRampMaterial.diffuse : contourMaterial.diffuse",alpha:"max(contourMaterial.alpha, elevationRampMaterial.alpha)",},},translucent: false,});}var elevationRamp = [0.0, 0.045, 0.1, 0.15, 0.37, 0.54, 1.0];var slopeRamp = [0.0, 0.29, 0.5, Math.sqrt(2) / 2, 0.87, 0.91, 1.0];var aspectRamp = [0.0, 0.2, 0.4, 0.6, 0.8, 0.9, 1.0];function getColorRamp(selectedShading) {var ramp = document.createElement("canvas");ramp.width = 100;ramp.height = 1;var ctx = ramp.getContext("2d");var values;if (selectedShading === "elevation") {values = elevationRamp;} else if (selectedShading === "slope") {values = slopeRamp;} else if (selectedShading === "aspect") {values = aspectRamp;}var grd = ctx.createLinearGradient(0, 0, 100, 0);grd.addColorStop(values[0], "#000000"); //blackgrd.addColorStop(values[1], "#2747E0"); //bluegrd.addColorStop(values[2], "#D33B7D"); //pinkgrd.addColorStop(values[3], "#D33038"); //redgrd.addColorStop(values[4], "#FF9742"); //orangegrd.addColorStop(values[5], "#ffd700"); //yellowgrd.addColorStop(values[6], "#ffffff"); //whitectx.fillStyle = grd;ctx.fillRect(0, 0, 100, 1);return ramp;}// The viewModel tracks the state of our mini application.var viewModel = {enableContour: false,contourSpacing: 50.0,contourWidth: 2.0,selectedShading: "none",changeColor: function () {contourUniforms.color = Cesium.Color.fromRandom({ alpha: 1.0 },contourColor);},};// Convert the viewModel members into knockout observables.Cesium.knockout.track(viewModel);// Bind the viewModel to the DOM elements of the UI that call for it.var toolbar = document.getElementById("toolbar");Cesium.knockout.applyBindings(viewModel, toolbar);function updateMaterial() {var hasContour = viewModel.enableContour;var selectedShading = viewModel.selectedShading;var globe = viewer.scene.globe;var material;if (hasContour) {if (selectedShading === "elevation") {material = getElevationContourMaterial();shadingUniforms = material.materials.elevationRampMaterial.uniforms;shadingUniforms.minimumHeight = minHeight;shadingUniforms.maximumHeight = maxHeight;contourUniforms = material.materials.contourMaterial.uniforms;}else {material = Cesium.Material.fromType("ElevationContour");contourUniforms = material.uniforms;}contourUniforms.width = viewModel.contourWidth;contourUniforms.spacing = viewModel.contourSpacing;contourUniforms.color = contourColor;} else if (selectedShading === "elevation") {material = Cesium.Material.fromType("ElevationRamp");shadingUniforms = material.uniforms;shadingUniforms.minimumHeight = minHeight;shadingUniforms.maximumHeight = maxHeight;} if (selectedShading !== "none") {shadingUniforms.image = getColorRamp(selectedShading);}globe.material = material;}updateMaterial();Cesium.knockout.getObservable(viewModel, "enableContour").subscribe(function (newValue) {updateMaterial();});Cesium.knockout.getObservable(viewModel, "contourWidth").subscribe(function (newValue) {contourUniforms.width = parseFloat(newValue);});Cesium.knockout.getObservable(viewModel, "contourSpacing").subscribe(function (newValue) {contourUniforms.spacing = parseFloat(newValue);});Cesium.knockout.getObservable(viewModel, "selectedShading").subscribe(function (value) {updateMaterial();});

第四步:绑定页面控件

<div class="demo-container"><label><input type="radio" name="shadingMaterials"value="none" data-bind="checked: selectedShading">无渲染</label> <label><inputtype="radio" name="shadingMaterials" value="elevation"data-bind="checked: selectedShading">高程渲染</label></div><div class="demo-container"><div><label><input type="checkbox"data-bind="checked: enableContour">等高线</label></div><div>高程 <input style="width: 136px; float: left; width: 100px;"type="range" min="1.0" max="500.0" step="1.0"data-bind="value: contourSpacing, valueUpdate: 'input', enable: enableContour"><span data-bind="text: contourSpacing"></span>m</div><div>线宽 <input style="width: 125px; float: left; width: 100px;"type="range" min="1.0" max="10.0" step="1.0"data-bind="value: contourWidth, valueUpdate: 'input', enable: enableContour"><span data-bind="text: contourWidth"></span>px</div><div><button type="button"data-bind="click: changeColor, enable: enableContour">颜色</button></div></div>

完成上述代码后，运行页面即可看到如下效果：

点击等高线，即可看到效果

还可以开启高程渲染效果：

Cesium中开启等高线渲染相关推荐

Cesium中实现体渲染
体渲染 Volume Rendering 传统意义上我们构建模型都是通过构建物体的外表面去实现的,例如通过三角面构建模型,或者通过方程的形式构建隐式的表面模型. 而体渲染则是通过 3d 数据集渲染物体 ...
Cesium 中的离屏渲染
Cesium 中的离屏渲染本文参考了众多文章,均列在了最后.先感谢各位的分享精神,如觉有冒犯,请与我联系. 部分内容来自个人理解,欢迎指正交流. 为了达到更加真实的渲染效果或其他计算需求,很多时候需 ...
Cesium中使用Sampler3D，3D纹理，实现体渲染
Cesium中使用Sampler3D,3D纹理,实现体渲染 Cesium目前(20221231)还不支持直接使用3D纹理,但是其实内部已经可以WebGL2,而且内置常量也有3DTexture.所以,可 ...
cesium中加载点图标
效果(截取部分效果) 代码 // primitives可加载大量数据,性能方面比entities要好一些 let billboard = viewer.scene.primitives.add(new ...
Cesium中Clock控件及时间序列瓦片动态加载
前言前面已经写了两篇博客介绍Cesium,一篇整体上简单介绍了Cesium如何上手,还有一篇介绍了如何将Cesium与分布式地理信息处理框架Geotrellis相结合.Cesium的强大之处也在于其 ...
echart 实例显示位置_技术分享：如何在Unity中使用实例化渲染？
编者按在日常开发中,通常说到优化.提高帧率时,总是会提到批量渲染.之前简单总结了静态合批(点此查看全文)以及动态合批(点此查看全文),这次作者将和大家聊聊实例化渲染. 作者:枸杞忧天 (本文内容由公 ...
Unity中的物体渲染顺序
big seven 文章目录前言一.摄像机渲染二.划分渲染队列三.不透明物体的渲染四.透明物体的渲染五.UGUI元素的渲染总结前言 Unity中物体的渲染顺序提示:以下是本篇文章正文 ...
Cesium中的相机—旋转矩阵
在学习坐标旋转的时候,一不小心就会把坐标系的旋转和矢量的旋转弄错,这里给出详细的两种旋转过程: 两种旋转矩阵的定义下面仅以绕Z轴旋转为例,给出两种旋转的过程定义. 坐标系旋转,点不变(见下左图) 两 ...
Cesium中添加entitie模型，实现贴地。
1.Cesium中添加entitie模型,实现贴地. 2. 添加模型 const createModel = (url) => {const entity = viewer.entities.a ...

Cesium中开启等高线渲染

Cesium中开启等高线渲染相关推荐

最新文章

热门文章