如何将2D数据装入CesiumJS

如何将2D数据装入CesiumJS

原文链接:https://blog.safe.com/2018/08/bring-2d-data-cesiumjs/

使用CesiumJS,你可以创建web可视化在浏览器中展示你的空间数据—从而可以轻松地与任何人共享您的数据。以下是我为3D CesiumJS Web可视化准备2D建筑物足迹所采取的步骤。下载工作空间并使用下面的输出进行播放。

 

源数据:900MB的多边形

    玩一个有趣的数据集是很有意思的事情。最近美国向OpenStreetMap社区发布了1.25亿个建筑物足迹,这是我想要制作一些有趣内容的数据集的完美示例。这就是我最终得到一个代表华盛顿州建筑物的900 MB JSON文件的方法。

https://cdn.blog.safe.com/wp-content/uploads/2018/08/08111848/JSON-building-footprints-Washington.png

 

    通过快速检查建筑物脚印数据,发现没有高程信息。太好了! 这看起来像是FME(以及我自己)的典型任务 - 引入一些不同的数据集并将它们组合成新的和令人兴奋的东西。

 

使用FME将2D数据转换到3D

步骤1: 将足迹与高程数据结合

对于高程信息,我访问华盛顿点云门户,由华盛顿自然资源部管理的LiDAR和衍生产品的数据来源。我挑选了两个县,Pierce和King,并为这两个县下载了DSM和DTM--一个相当大的80 GB数据集,有超过一百对栅格瓦片。

https://cdn.blog.safe.com/wp-content/uploads/2018/08/08112604/Washington-DSM-DTM-data.png

   

    从这里开始,FME可以处理所有事情。我的第一个步骤是:我把JSON格式的脚印和栅格读入工作空间,使用GeometryExtractor把建筑物几何信息提取到属性中,使用RasterBandCombiner把所有的DSM和DTM融和为两个波段的栅格,通过瓦片名称对他们进行分组:

步骤2: 从裁剪的栅格中获取建筑物高度

    把建筑物作为Clipper对两个波段的栅格进行裁剪(在Clipper中选择“Merge Attribute”选型,这样将把建筑物的几何类型转换为栅格)。结果为数十万个小栅格 - 每个建筑物一个栅格(有时当建筑物在瓦片边缘上伸展时更多—我使用RasterMosaicker来包装每个足迹为一个栅格)。

https://i-blog.csdnimg.cn/blog_migrate/b8b8ec7dbf0f7a5dc800db00abbd5ff6.png

 

    使用RasterBandMinMaxExtractor,我从每个小栅格中提取每个波段的最大最小值—DTM波段最小像元值表示地面,DSM波段最大值表示屋顶的顶部。确切地说,最高价值不能保证是屋顶 - 它可能是悬在建筑物上的一棵高大的树木 - 但为了我们的大规模可视化目的,这是一个可接受的缺陷。

    注意:DTM和DSM是LiDAR衍生的栅格产品。这意味着当DEM数据集不可用时,可以用LiDAR数据代替—FME将裁剪点云,然后使用PointCloudStatisticsCalculator,我们可以找到建筑的最大、最小值。

 

步骤3: 基于得到的高程值拉伸足迹

    最后的步骤包括使用原始足迹的几何替换栅格几何,并将此几何拉伸到最大DSM和最小DTM之间的差异。

 

在Web可视化中共享输出

过去,我通过发布一些屏幕截图分享我的输出。

今天,借助现代网络技术,我可以轻松的与你分享所有结果。我希望你喜欢我之前的three.js实验,现在是时候使用CesiumJS库的强大功能了。它更适用于空间数据并可通过智能切片和优先设置处理巨大的数据集。

 

   FME目前有两个Cesium写模块:一个用于点云(Cesium 3D Point Cloud),一个用于3D几何对象,例如实体(solids)和表面(surfaces)(Cesium 3D Tiles)。

 

    写入3D Tiles非常简单。 我们可以设置的唯一格式属性是cesium_priority,这是一个实数,用于定义切片层次结构中要素的相对位置。 我使用VolumeCalculator来设置此属性。 在Cesium中,这导致在较小的建筑物之前渲染更大的建筑物。

生成的数据集由一个JSON文件和一个具有.b3dm扩展名的3D瓦片文件夹组成,该文件概述了数据集的瓦片结构。

    此时,FME不生成在浏览器中打开场景所需的HTML文件; 但是,可以使用AttributeCreator完成,我们可以轻松地将具有最小更改的所需代码放在转换器中,例如指定Cesium JavaScript库的路径,CSS样式表和数据集本身。 当然,可以使用JavaScript进行任何类型的调整并添加更多自定义和功能,为此,我邀请你访问Cesium.org

 

    与此同时,您可以在网络浏览器中查看华盛顿州King和Pierce县的120万栋建筑物。 建议使用良好的互联网连接和功能强大的电脑?。

 

在Cesium中与输出结果进行交互

 

如果你更新后以前的共享方式,这里是一些屏幕截图。

      https://i-blog.csdnimg.cn/blog_migrate/04421624261be5075f61e20a7d5f1a65.jpeg

https://i-blog.csdnimg.cn/blog_migrate/a386e95af88c0f31650649ab7802da80.jpeg

      点击下载Cesium工作空间,并用你自己的数据试试。我们希望听到你在工作中如何使用Cesium瓦片的内容,或者如果你还没有使用它,你认为它们会如何对你的组织机构提供哪些作用。

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值