SuperMap iClient3D for WebGL教程(S3MTilesLayer)- 多源数据加载

作者:为梦齐舞

本文同步更新于简书文章[https://www.jianshu.com/p/6718532cd731]
       大家都知道Cesium加载的三维模型缓存格式是3DTiles,超图在SuperMap iClient3D for WebGL中提出了自己的格式s3m,s3m是一种开放式可扩展的三维地理空间数据格式——Spatial 3D Model(S3M),对倾斜摄影模型、人工建模数据、BIM、点云、三维管线、二维/三维点线面等各类数据进行整合,适用于海量、多源异构三维地理空间数据和Web环境下的传输与解析,为多源三维地理空间数据在不同终端(移动设备、浏览器、桌面电脑)地理信息平台中的存储、高效绘制、共享与互操作等问题提供了解决方案。
       2019年7月19日,经中国地理信息产业协会审查批准,《空间三维模型数据格式》团体标准发布,将于8月31日正式实施。这是中国地理信息产业协会发布的第一个团体标准。
本节课程我们介绍下S3MTilesLayer图层及支持数据如何制作为s3m进行加载。

一、S3MTilesLayer简介

与Cesium不同的是,WebGL中添加缓存,不是使用Primitives,而是使用S3MTilesLayer进行添加的。官方介绍:
S3M(Spatial 3D Model)图层类,通过该图层实现加载三维切片缓存,包括倾斜摄影模型、BIM模型、点云数据、精细模型、矢量数据、符号等。 通过Scene.addS3MTilesLayerByScp(url, options)的方式将发布的*.s3m格式的三维服务添加到场景中。
主要的参数有:
SuperMap iClient3D for WebGL教程(S3MTilesLayer)- 多源数据加载_第1张图片
接下来我们来实验一下加载的代码
我们可以通过viewer.scene.open方式打开场景添加多个s3m数据(方法比较简单,大家可以自行试验下),当然我们也可以添加单个图层,我们通过viewer.scene.addS3MTilesLayerByScp方法进行添加,返回的是一个promise异步加载对象。
这个方法主要的参数为
SuperMap iClient3D for WebGL教程(S3MTilesLayer)- 多源数据加载_第2张图片
这里直接上代码:

var scene = viewer.scene;
        var promise=scene.addS3MTilesLayerByScp("http://www.supermapol.com/realspace/services/3D-suofeiya_church/rest/realspace/datas/Config/config",
        {name:"suofeiyaOSGB",cullEnabled:false});
        Cesium.when(promise,function (layer) {
        	viewer.zoomTo(layer);
        })

首先我们使用addS3MTilesLayerByScp添加了一个图层,里面的url是发布的s3m图层的配置文url信息,里面给了两个参数,一个是图层名称,另外一个是是否双面渲染,然后使用Cesium.when异步回调,当图层加载完后进入,再使用viewer.zoomTo定位到图层,实现的效果如下图:
SuperMap iClient3D for WebGL教程(S3MTilesLayer)- 多源数据加载_第3张图片
这里提下双面渲染,当我们将cullEnabled设置为false时,是双面渲染的,背面显示为下图所示:

SuperMap iClient3D for WebGL教程(S3MTilesLayer)- 多源数据加载_第4张图片
当我们将cullEnabled设置为true时,则采用单面渲染,背面显示为下图所示:

SuperMap iClient3D for WebGL教程(S3MTilesLayer)- 多源数据加载_第5张图片

二、多源数据加载

s3m数据都是通过SuperMap iDesktop进行处理的,建议您可以先学习,软件下载地址:
http://support.supermap.com.cn/DownloadCenter/ProductPlatform.aspx

1、倾斜摄影模型
倾斜摄影模型可以添加到S3MTilesLayer图层中进行添加,就像第一步我们演示的效果一样,加载的就是倾斜摄影数据,一般我们获取的格式都是OSGB格式的,这时可以通过纹理压缩,将OSGB格式压缩为s3格式,具体操作可以参考博客:
https://blog.csdn.net/supermapsupport/article/details/89472538
也可以使用SuperMap iDesktop .NET 10i版本倾斜入库功能,一步搞定,生成可发布的s3m数据
SuperMap iClient3D for WebGL教程(S3MTilesLayer)- 多源数据加载_第6张图片

2、人工建模数据
对于3DMax的建模数据,我们可以使用超图提供的3DMax插件,将其导出为模型数据集,然后使用模型数据集生成s3m数据。
对于3DMax的插件使用,具体可参考博客:
https://www.jianshu.com/p/5223806d7c51
我们可以选中模型数据集右键生成场景缓存
SuperMap iClient3D for WebGL教程(S3MTilesLayer)- 多源数据加载_第7张图片
也可以将模型加入到场景中,生成场景缓存
SuperMap iClient3D for WebGL教程(S3MTilesLayer)- 多源数据加载_第8张图片

3、BIM数据
和人工建模数据建模数据一样,超图同样提供了插件,将模型导出到数据源中成为模型数据集,这里以Revit为例子。
Revit插件使用具体参考博客:https://www.jianshu.com/nb/34901765
这里需要提到的是,一般BIM数据由于数据集是按照族类型进行分类的,数据集会特别多,如果按照3DMax的方式进行生成,将生成多个s3m缓存图层,所以一般推荐使用批量生成模型缓存,将所有的数据集生成到一层s3m缓存中,便于管理
SuperMap iClient3D for WebGL教程(S3MTilesLayer)- 多源数据加载_第9张图片
4、点云数据
激光点云数据在WebGL中显示,也是通过s3m来进行管理的,获取到点云后,首先生成点云的配置文件,然后通过配置文件生成点云数据。
点云的具体操作可参考博客:https://blog.csdn.net/supermapsupport/article/details/89678679
SuperMap iClient3D for WebGL教程(S3MTilesLayer)- 多源数据加载_第10张图片

4、三维管线
三维管线数据,有两种生成模型的方法,1、通过三维地理设计,放样来生成三维管线模型数据集,这样生成模型数据集后生成s3m缓存的方法就可以参照第2项的人工建模数据了,2、通过自定义专题图来进行生成,即可生成管线数据,然后保存场景,生成s3m缓存,进行加载,生成的管线如下图。
SuperMap iClient3D for WebGL教程(S3MTilesLayer)- 多源数据加载_第11张图片

5、图标图层
我们可以使用自定义专题图,外挂图片生成对应的点标注图层,然后保存场景,生成场景缓存,这样的图层也可以生成s3m缓存,添加到WebGL中进行展示。
SuperMap iClient3D for WebGL教程(S3MTilesLayer)- 多源数据加载_第12张图片
**需要注意的是,生成场景缓存时,需要去掉点外挂模型生成缓存的选项,否则图标不显示,**默认生成缓存时这个选项是勾选上的。
SuperMap iClient3D for WebGL教程(S3MTilesLayer)- 多源数据加载_第13张图片

6、矢量数据
二维/三维点线面等矢量数据都可以在场景中生成三维缓存,格式选择成为s3m数据进行发布,都可以在WebGL中进行展示,数据制作的流程也非常简单,将数据集添加到场景,配置为自己的风格,保存场景,点击右键菜单中的生成场景缓存即可。
SuperMap iClient3D for WebGL教程(S3MTilesLayer)- 多源数据加载_第14张图片

##三、数据发布
所有的数据生成s3m后,就可以进行发布了。对于9D及以前的版本,需要将s3m缓存添加到场景,然后保存工作空间,再发布工作空间,从而得到图层信息,如果是10i版本的,则可以直接发布scp
SuperMap iClient3D for WebGL教程(S3MTilesLayer)- 多源数据加载_第15张图片
本节课程先到这里,后续为大家讲解更多S3MTilesLayer的操作

你可能感兴趣的:(三维GIS)