SuperMap iClient3D for WebGL教程(地形篇)-CesiumTerrainProvider
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了SuperMap iClient3D for WebGL教程(地形篇)-CesiumTerrainProvider相关的知识,希望对你有一定的参考价值。
参考技术A 一、CesiumTerrainProvider介绍前面的文章中,我们介绍了很多地形相关的知识,本章中我们来一起了解下CesiumTerrainProvider,我们在WebGL中如果希望添加带有地质起伏的地形,都会使用这个类,它同时支持高度图和TIN地形两种格式。不过目前高度图的技术路线已经不在推荐使用,所以我们本章主要介绍TIN地形的加载,本章中我们以STK全球地形和SuperMap的TIN地形缓存为例,来使用CesiumTerrainProvider。
SuperMap iClient3D for WebGL将Cesium原生的CesiumTerrainProvider进行了再次封装,我们来对比下原生参数和封装过的参数
相比Cesium原生,SuperMap iClient3D for WebGL多了两个参数isSct和isShowGlobe,其他参数都大致相同。
与EllipsoidTerrainProvider不同之处是CesiumTerrainProvider支持水面效果,不支持法向量,我们在后面实际应用时可以看下效果。
另外这里提及一句,目前WebGL和Cesium原生在一个场景中都仅之处一个地形图层,意味着我们只能进行地形的替换而不能进行两个地形的叠加显示。
二、构造CesiumTerrainProvider
1、url,地形图层的服务地址,这个是必填参数。
2、requestVertexNormals,是否请求法线,在scene.globe.enableLighting = true;时能看到效果
3、requestWaterMask,是否请求水面,这个目前stk的地形是支持水面波光粼粼的效果的。
4、ellipsoid,参考椭球,前面的文章已经提到,不在介绍。
5、isSct,重要参数,如果是使用SuperMap iServer发布的TIN地形缓存,此参数必须设置为true。
6、isShowGlobe,是否剔除无效的区域,默认是全球显示。
三、实战CesiumTerrainProvider
1、添加stk全球地形服务,由于国外的stk服务地址(//assets.agi.com/stk-terrain/world)有时候访问慢或直接访问不到,所以我们使用SuperMap iServer进行了一次转发,效果和stk一样。
我们开启了场景光照,法向量和水面特效
地形服务源自SuperMap iServer发布时需设置isSct为true,另外说明一点requestVertexNormals 法向量是在生成缓存的时候需要勾选带法线才能支持,否则就算是设置requestVertexNormals 为true也没有光照的效果,而且如果勾选了带法线,默认地形就是请求法向量的。
SuperMap for WebGL 9D 加载平面坐标系三维场景
平面坐标系模型
在部分项目中,三维数数据是根据平面坐标系进行建模的,并且以为某些需求,还不能转为经纬度坐标系,所以就需要一些手段——将模型的坐标通过计算转换后,将场景放置在了经线0°的位置(本初子午线)。
1.iDesktop中的操作
加载模型数据到平面场景中,确认无误后,生成场景缓存(s3m),并且通过查询坐标值找到模型的中心点。
2.Webgl中的操作(代码)
iServer中将该工作空间发布为三维服务。发布后用由于Cesium不支持加载平面坐标系三维,所以在iserver中预览会没有任何模型,甚至报错。
在webgl中加载发布的模型,首先viewer的sceneMode场景模式要设置为哥伦布模式(Cesium.SceneMode.COLUMBUS_VIEW)。然后再通过scene.open()添加模型。
代码:
viewer = new Cesium.Viewer(‘cesiumContainer’);
viewer.scene.mode = Cesium.SceneMode.COLUMBUS_VIEW;
此时模型已经添加到场景中,但是Cesium无法识别平面坐标系坐标,无法定位到模型位置,因此需要对刚才在idesktop中获取的中心点进行转换。然后设置camera属性,飞到模型中心。
转换代码:
var point = new Cesium.Cartesian3(X, Y, Z);
var pointCartographic = scene.camera._projection.unproject(point);
var pointCX = Cesium.Math.toDegrees(pointCartographic.longitude);
var pointCY = Cesium.Math.toDegrees(pointCartographic.latitude);
到此webgl已经可以加载平面坐标系模型并且展示,如果想完全模拟idesktop中的平面场景,可以通过替换球面背景图来实现。
3.部分三维分析功能无法使用
截至2019/01/16,如果跟图层操作较为密切的功能是无法实现的,如:地形挖方(需要地形数据),阴影分析,光照分析,控高分析(需要地形数据)等
正常使用且常用的:可视域分析,通视分析,天际线分析,场景飞行,测量;
4.完整代码
// 加载平面场景模型 function onload(Cesium) { //初始化viewer部件 viewer = new Cesium.Viewer(\'cesiumContainer\'); var scene = viewer.scene; var widget = viewer.cesiumWidget; viewer.scene.mode = Cesium.SceneMode.COLUMBUS_VIEW; viewer._cesiumWidget._creditContainer.style.display = \'none\'; try { //打开所发布三维服务下的所有图层 var url5 = "http://localhost:8090/iserver/services/3D-a701-a7-01/rest/realspace"; var promise = scene.open(url5); Cesium.when.all(promise, function(layers) { layers.forEach(function(item, index) { item.ignoreNormal = true // 获取或者设置是否在GPU中自动计算法线 item.clearMemoryImmediately = true // 是否及时释放内存 }) var point = new Cesium.Cartesian3(4057.48, 1554.01, 10); var pointCartographic = scene.camera._projection.unproject(point); var pointCX = Cesium.Math.toDegrees(pointCartographic.longitude); var pointCY = Cesium.Math.toDegrees(pointCartographic.latitude); //设置相机位置,定位至模型 scene.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(pointCX, pointCY, pointCartographic.height), orientation: { heading: 0, pitch: 0, roll: 0 } }); }, function(e) { if (widget._showRenderLoopErrors) { var title = \'加载SCP失败,请检查网络连接状态或者url地址是否正确?\'; widget.showErrorPanel(title, undefined, e); } }); } catch (e) { if (widget._showRenderLoopErrors) { var title = \'渲染时发生错误,已停止渲染。\'; widget.showErrorPanel(title, undefined, e); } } }
以上是关于SuperMap iClient3D for WebGL教程(地形篇)-CesiumTerrainProvider的主要内容,如果未能解决你的问题,请参考以下文章
SuperMap iClient3D for WebGL教程(模型篇)-倾斜摄影
无插件猴赛雷!SuperMap iClient3D for WebGL的4大“网红 ”潜质
SuperMap iClient for JavaScript image出图
SuperMap for WebGL 9D 加载平面坐标系三维场景