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 裁剪,暂不支持多边形裁剪。