SuperMap体元栅格数据在webgl中的运用

前言

先前有一篇文章介绍了体元栅格数据的制作以及在iDesktop和webgl中叠加到模型上的效果展示&＃xff08;原文地址&＃xff09;&＃xff0c;今天我来介绍一下体元栅格数据如何在webgl中展示立体效果并实现各个方向剖切。

本文以日照率为例&＃xff0c;从数据的制作到显示效果的调节整个流程进行说明。整个流程主要
分为以下五个部分&＃xff1a;
1.通过 SuperMap iDesktop 生成原始三维点数据集&＃xff1b;
2.根据三维点数据集构建体元栅格&＃xff1b;
3.体元栅格数据生成缓存&＃xff1b;
4.通过 SuperMap iServer 发布三维服务&＃xff1b;
5.在 SuperMap iClient3D for WebGL 上加载缓存数据&＃xff0c;并调整效果。

一、数据制作

1.制作三维点数据集

绘制三维面作为日照分析范围&＃xff0c;通过导入面的方式生成日照分析

保存分析结果为三维点数据集

2.通过三维点数据集构建体元栅格

3、体元栅格生成缓存

右键体元栅格数据集生成缓存&＃xff0c;弹出以下对话框&＃xff08;注意&＃xff0c;该功能要求iDesktop版本为10i及以上&＃xff09;

生成成功以后&＃xff0c;将缓存添加到场景&＃xff0c;效果如下图所示

4.将场景其他图层生成缓存&＃xff0c;一并发布为三维服务

二、在 SuperMap iClient3D for WebGL 上加载缓存数据&＃xff0c;并调整效果

在 SuperMap iClient3D for WebGL 上打开场景&＃xff0c;找到体元栅格缓存所在图层
&＃xff08;VoxelGridCache8&＃xff09;&＃xff0c;并设置缓存的显示效果&＃xff1a;
1.通过 Gridlayer.style3D.fillForeColor &＃61; new Cesium.Color(1, 1, 1, 0.5)设置α小于 1&＃xff0c;得到半透明效果。
需要注意的是&＃xff0c;eyeDomeLighting 与半透明的效果互斥&＃xff0c;因此需要将其设置为 false。
2.目前是以点云的方式来加载体元栅格缓存数据的&＃xff0c;如果 pointSize 的值比较小&＃xff0c;就会显示成很多稀疏的点&＃xff0c;通过增加 pointSize 的值可以达到连续渐变的显示效果。具体 pointSize 的值可以参考构建体元栅格时设置的采样距离。本案例中&＃xff0c;体元栅格采样距离为 4m 左右&＃xff0c;pointSize设置为 7 效果较好

var Gridlayer &＃61; viewer.scene.layers.find(&＃39;VoxelGridCache8&＃39;);Gridlayer.style3D.fillForeColor &＃61; new Cesium.Color(1, 1, 1, 0.5);Gridlayer.lodRangeScale &＃61; 10;var hyp &＃61; new Cesium.HypsometricSetting();//设置半透明填充效果Gridlayer.style3D.fillForeColor &＃61; new Cesium.Color(1, 1, 1, 0.5);//设置点大小Gridlayer.style3D.pointSize &＃61; 7;Gridlayer.pointCloudShading.renderMode &＃61; 1;Gridlayer.pointCloudShading.eyeDomeLighting &＃61; false;setHypsometric(hyp, Gridlayer);function setHypsometric(hyp, layer) {var minValue &＃61; layer.dataMinValue;var maxValue &＃61; layer.dataMaxValue;hyp.DisplayMode &＃61; Cesium.HypsometricSettingEnum.DisplayMode.FACE;hyp.lineColor &＃61; new Cesium.Color(1.0, 1.0, 1.0, 1.0);hyp.LineInterval &＃61; 10.0;hyp.MaxVisibleValue &＃61; layer.dataMaxValue;hyp.MinVisibleValue &＃61; layer.dataMinValue;hyp.ColorTableMinKey &＃61; minValue;hyp.ColorTableMaxKey &＃61; maxValue;hyp.Opacity &＃61; 1;var colorTable &＃61; new Cesium.ColorTable();colorTable.insert(0.0, new Cesium.Color(201 / 255, 23 / 255, 30 / 255));colorTable.insert(0.1, new Cesium.Color(231 / 255, 50 / 255, 15 / 255));colorTable.insert(0.2, new Cesium.Color(238 / 255, 118 / 255, 0 / 255));colorTable.insert(0.3, new Cesium.Color(255 / 255, 214 / 255, 0 / 255));colorTable.insert(0.4, new Cesium.Color(246 / 255, 236 / 255, 0 / 255));colorTable.insert(0.5, new Cesium.Color(157 / 255, 200 / 255, 22 / 255));colorTable.insert(0.7, new Cesium.Color(104 / 255, 185 / 255, 61 / 255));colorTable.insert(0.9, new Cesium.Color(18 / 255, 110 / 255, 183 / 255));colorTable.insert(1.0, new Cesium.Color(0 / 255, 64 / 255, 152 / 255));hyp.ColorTable &＃61; colorTable;layer.hypsometricSetting &＃61; {hypsometricSetting: hyp,analysisMode: Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_ALL}};


webgl端效果展示&＃xff1a;

再通过box裁剪&＃xff0c;选取合适的位置以及box的长、宽、高&＃xff0c;实现对体元栅格X方向、Y方向、Z方向的剖切&＃xff0c;下面以一个方向为例&＃xff08;其他类似&＃xff09;&＃xff1a;

var $length &＃61; $(&＃39;#length&＃39;);var $width &＃61; $(&＃39;#width&＃39;);var $height &＃61; $(&＃39;#height&＃39;);var $pointsize &＃61; $(&＃39;#pointsize&＃39;);var clipMode &＃61; "clip_behind_all_plane";$length.bind(&＃39;input propertychange&＃39;, function() {viewer.entities.removeAll();var length &＃61; Number($length.val());var width &＃61; 700;var height &＃61; 100;var boxOption &＃61; {dimensions: new Cesium.Cartesian3(length, width, height),position: new Cesium.Cartesian3.fromDegrees(116.4633797401118, 39.90879528431201, 25),clipMode: clipMode,heading: 0};var boxEntity &＃61; viewer.entities.add({box: {dimensions: new Cesium.Cartesian3(length, width, height),material: Cesium.Color.fromRandom({alpha: 0.01})},position: new Cesium.Cartesian3.fromDegrees(116.4633797401118, 39.90879528431201, 25),});setAllLayersClipOptions(boxOption);function setAllLayersClipOptions(boxOptions) {Gridlayer.setCustomClipBox(boxOptions);}var dim &＃61; boxEntity.box.dimensions.getValue();var newValue &＃61; Number($(this).val());boxEntity.box.dimensions &＃61; new Cesium.Cartesian3(newValue, dim.y, dim.z);setClipBox();function setClipBox() {var newDim &＃61; boxEntity.box.dimensions.getValue();var position &＃61; boxEntity.position.getValue(0);var boxOptions &＃61; {dimensions: newDim,position: position,};setAllLayersClipOptions(boxOptions);}});


注意事项&＃xff1a;
1.构建体元栅格时&＃xff0c;可根据需要设置合适的采样距离&＃xff0c;不一定要与原始数据一致。设置的采样距离越小&＃xff0c;生成的点越多&＃xff0c;性能的消耗就越高。
2.WebGL 上的显示效果由体元栅格的采样距离与 pointSize 的大小共同决定。在满足显示效果的
前提下&＃xff0c;可以通过增大采样距离&＃xff0c;同时调大 pointSize 的值来减少性能的消耗。
3.体元栅格缓存支持 Box 裁剪&＃xff0c;暂不支持多边形裁剪。

以下为效果展示