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

前言

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

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

一、数据制作

1.制作三维点数据集

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

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

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

3.体元栅格生成缓存

右键体元栅格数据集生成缓存，弹出以下对话框（注意，该功能要求iDesktop版本为10i及以上）

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

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

二、在 SuperMap iClient3D for WebGL 上加载缓存数据，并调整效果

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

 var Gridlayer = viewer.scene.layers.find('VoxelGridCache8');
 Gridlayer.style3D.fillForeColor = new Cesium.Color(1, 1, 1, 0.5);
 Gridlayer.lodRangeScale = 10;
 var hyp = new Cesium.HypsometricSetting();
 //设置半透明填充效果
 Gridlayer.style3D.fillForeColor = new Cesium.Color(1, 1, 1, 0.5);
 //设置点大小
 Gridlayer.style3D.pointSize = 7;
 Gridlayer.pointCloudShading.renderMode = 1;
 Gridlayer.pointCloudShading.eyeDomeLighting = false;
 setHypsometric(hyp, Gridlayer);
 function setHypsometric(hyp, layer) {
          var minValue = layer.dataMinValue;
          var maxValue = layer.dataMaxValue;
          hyp.DisplayMode = Cesium.HypsometricSettingEnum.DisplayMode.FACE;
          hyp.lineColor = new Cesium.Color(1.0, 1.0, 1.0, 1.0);
          hyp.LineInterval = 10.0;
          hyp.MaxVisibleValue = layer.dataMaxValue;
          hyp.MinVisibleValue = layer.dataMinValue;
          hyp.ColorTableMinKey = minValue;
          hyp.ColorTableMaxKey = maxValue;
          hyp.Opacity = 1;
          var colorTable = 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 = colorTable;
          layer.hypsometricSetting = {
                hypsometricSetting: hyp,
                analysisMode: Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_ALL
          }
 };

webgl端效果展示：

再通过box裁剪，选取合适的位置以及box的长、宽、高，实现对体元栅格X方向、Y方向、Z方向的剖切，下面以一个方向为例（其他类似）：

                    var $length = $('#length');
                    var $width = $('#width');
                    var $height = $('#height');
                    var $pointsize = $('#pointsize');
                    var clipMode = "clip_behind_all_plane";
                    $length.bind('input propertychange', function() {
                        viewer.entities.removeAll();
                        var length = Number($length.val());
                        var width = 700;
                        var height = 100;
                        var boxOption = {
                            dimensions: new Cesium.Cartesian3(length, width, height),
                            position: new Cesium.Cartesian3.fromDegrees(116.4633797401118, 39.90879528431201, 25),
                            clipMode: clipMode,
                            heading: 0
                        };

                        var boxEntity = 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 = boxEntity.box.dimensions.getValue();
                        var newValue = Number($(this).val());
                        boxEntity.box.dimensions = new Cesium.Cartesian3(newValue, dim.y, dim.z);
                        setClipBox();

                        function setClipBox() {
                            var newDim = boxEntity.box.dimensions.getValue();
                            var position = boxEntity.position.getValue(0);
                            var boxOptions = {
                                dimensions: newDim,
                                position: position,
                            };
                            setAllLayersClipOptions(boxOptions);
                        }
                    });

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

以下为效果展示