倾斜摄影入库上云

倾斜摄影模型能够全方位、全要素展示现实物理世界。因其高精度、高效率、高真实感和低成本的绝对优势，倾斜摄影模型成为了三维GIS的重要数据来源。但由于倾斜摄影数据自身存在文件碎、体量大等特点，未经优化的倾斜摄影在三维平台上加载存在加载慢，浏览效率低等问题，特别在浏览器端，因文件请求量、网络带宽、硬件性能等方面的影响，显示效果往往不尽人意。目前倾斜摄影文件的主要格式包括 OSGB、OBJ，FBX，STL、3Dtiles 等，其中最常见的是 OSBG  格式。

本文介绍对倾斜摄影文件进行优化，并在浏览器预览或分享的方法，主要流程为：

  1. 使用SuperMap iDesktopX对倾斜摄影文件进行优化，将原始数据格式OSGB转为S3M格式，提高数据加载效率，提升用户体验。

  2. 将倾斜摄影文件保存为工作空间，并通过SuperMap Online发布为三维服务。

  3. 使用SuperMap Online加载倾斜摄影服务，在线浏览并分享。

下面将以示例数据“xianggang”作详细操作演示，文件结构为：

 

图片
图1. 原始数据展示

 

Step1 倾斜摄影数据入库

（1）生成配置文件

在SuperMap iDesktopX “三维数据”选项卡中单击“倾斜摄影”组中“数据管理”工具；展开功能列表后，单击“生成配置文件”按钮。（SuperMap iDesktopX的安装请点击下载，许可申请方式请点击了解。）

图片
图2. 生成配置文件

弹出“生成倾斜摄影配置文件”对话框，参数配置如下：

图片
图3. 生成倾斜摄影配置文件对话框

① 源路径：选择您的OSGB文件夹中的Data文件夹。

② 指定根节点：选择①中的源路径后，一般根节点会自动带出。

若未自动带出，可以单击“指定根节点”，点击“批量添加摄影文件”，源文件夹选择Data文件夹（即OSGB数据所在文件夹），通配符根据规则填写，即可查找到相应的根节点。如下图4，原数据格式如下，则按照图5选择其根节点。

图片
图4. 某数据原数据格式
图片
图5. 批量添加倾斜摄影文件

③元数据：选择“tile_30_28”文件夹下的“metadata.xml”文件作为元数据。

④目标路径：目标路径是最后生成Config文件的存放地址，建议选择与Data文件夹同级存放。

⑤模型参考点：设置好上述参数后，模型参考点即可自动带出。

⑥投影设置：设置好上述参数后，投影设置即可自动带出。

点击“确定”后，可在示例数据“tile_30_28”下看到新生成的Config文件。

图片
图6. 生成倾斜摄影配置文件结果

（2）倾斜入库

在SuperMap iDesktopX桌面产品的“三维数据”选项卡中单击倾斜摄影组中“数据处理”工具；展开功能列表后，单击“倾斜入库”按钮。

图片
图7. 倾斜入库

弹出“倾斜入库”对话框，参数配置如下：

图片
图8. 倾斜入库对话框

① 源文件配置：点击“+”，添加上一步中生成的Config.csp文件。

② 基础参数：

  • 输出目录：设置结果数据存放路径，可在OSGB文件夹下新建一个S3M文件夹用于输出。
  • S3M版本：支持三种S3M版本号，S3M1.0、S3M2.0、S3M3.0，建议使用最新的S3M3.0。如果使用的是10.21之前的WebGL包加载倾斜缓存文件，则倾斜入库时建议使用S3M1.0。
  • 线程数：设置倾斜入库操作的线程数，默认为8。根据计算机物理内核计算，线程数 = 物理内核*1.5。
  • 存储类型：如果是需要给倾斜摄影加密，存储类型必须选择紧凑型。如果将倾斜缓存文件存储到MongoDB中，存储类型必须选择原始型。
  • 几何压缩方式：目前提供三种压缩方式，压缩所需时间由短到长依次为，不压缩、Draco压缩，MeshOpt。
  • 纹理压缩：默认为DXT（PC设备），目前支持四种压缩格式：WebP、DXT（PC设备）、CRN_DXT5（PC设备）、 KTX2.0。对于不同用途的数据，采用不同的纹理压缩方式，可以减少纹理图像所使用的显存数量。
纹理压缩格式 压缩特点
WebP 适用于 Web端/PC机上通用的压缩纹理格式。数据总量大幅减少，提高传输性能。
DXT（PC设备） 适用于 PC 机（个人计算机）上通用的压缩纹理格式。显存占用减少，提升渲染性能，但是数据总量会增加。
CRN_DXT5（PC设备） 适用于 PC 机（个人计算机）上通用的压缩纹理格式，显存占用少许减少，数据总量大幅度减少，但是需要较长的处理时间。
KTX2.0 减少显存占用，减少数据总量。处理相同数据，所需时间比标准CRN长。

其余参数在本例中保持默认状态，如有其他需求，可对其余参数进行调整。

注：倾斜入库需要较长时间，请耐心等待。

“倾斜入库”操作结果如下图所示，至此，已将示例数据中的一系列OSGB格式数据转换成了与原始文件结构一致的S3MB格式文件，同时还生成了入库后的*scp配置文件。

图片
图9. 倾斜入库结果-*S3MB格式文件
图片
图10. 倾斜入库结果-*scp配置文件

 

Step2 发布三维服务

（1）保存工作空间

① 加载数据：在SuperMap iDesktopX桌面产品的 “工作空间管理器”中，在“场景”下右键点击“新建球面场景”。“图层管理器”下选中“普通图层”，右键点击“添加三维切片缓存图层”，选择入库后生成的*.scp配置文件，默认为Combine.scp文件。

图片
图11. 加载三维场景结果

② 保存并压缩工作空间：右键配置文件图层，单击“快速定位到本图层”，点击鼠标滚轮将其定位到合适的角度，然后保存场景和工作空间。将该工作空间放入S3M文件中并压缩成*.zip压缩包。

注：请关闭工作空间后再进行压缩，避免压缩后图层缺失。

（2）发布三维服务

打开 SuperMap Online 资源商店，点击“开始创作”>“上传资源”>“数据资源”，数据类型选择S3M，数据文件选中上一个步骤中的压缩包。然后点击“上传并发布”，选择要发布的服务类型为“REST三维服务”，上传并发布该工作空间，即该三维场景发布成功。在SuperMap Online发布服务需要占用您的配额，如配额不够，请点击购买。

图12. 发布服务

注：示例数据较大，所以选择通过SuperMap iDesktopX桌面产品进行数据处理，若数据小于200M，可直接使用SuperMap Online GIS小工具>“OSGB转S3M”进行数据处理并发布服务。

图13. OSGB转S3M小工具

点击“OSGB转S3M”小工具，上传数据，根据需求选择参数，最下方请务必勾选“将数据保存至存储空间”，便于下一步发布服务。

图14. OSGB转S3M小工具参数选择

数据处理完成后，点击“资源商店”>“我的资源”，选择处理好的数据（默认名称为s3m_原文件名称），点击“更多”符号>“发布”，选择“REST三维服务”,即可发布成功。

图15. 发布服务结果

 

Step3 在线浏览倾斜摄影模型

（1）服务预览

打开SuperMap Online 资源中心“我的资源”>“服务”，单击上一步发布的服务，单击“预览”，选择“realspace”下的“scenes”，单击以“WebGL3D(支持浏览s3m缓存)”形式浏览场景。

图片
图16. 服务预览

点击了解更多加载倾斜摄影模型途径。

（2）三维场景保存与分享

此外，SuperMap Online还提供三维地球WebApp，可在线加载三维场景。

在SuperMap Online首页单击“应用”>“三维地球”。点击“+”添加发布过的服务，即可浏览该三维场景。同时三维地球自带多种功能，如裁剪、量算、地形分析等，您可以根据需求自行操作。

图片
图17. 选择加载服务
图片
图18. 浏览三维场景

保存场景后，还可在“资源中心”>“我的资源”>“场景”里共享该场景，SuperMap Online支持对共享资源做权限管理，可以设置共享范围，但同时您的服务和场景的权限需保持一致，才可保证被共享对象无误浏览。

图19. 设置共享范围

 

延伸拓展 在客户端展示倾斜摄影模型

如果您具备一定开发能力，或有更多自定义页面需求，可以通过以下方式实现在客户端展示倾斜摄影三维模型。

Step1 准备

（1）获取开发包

开发时需要引入SuperMap iClient3D for Cesium或SuperMap iClient3D 11i(2023) for WebGL。其中包括必备的CSS 文件和 JS 文件。您可以点击 SuperMap iClient3D for Cesium 或SuperMap iClient3D 11i(2023) for WebGL下载最新版本。

（2）引入

将获取的 SuperMap iClient3D for Cesium 版本解压缩后，在examples文件夹下新建HTML文件， 在文件中通过script标签将Cesium.js文件引入:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../Build/Cesium/Cesium.js"></script>
</head>
</html> 

同时，需要在head标签中引入SuperMap iClient3D for Cesium的其他css文件和js文件，如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <link href="./css/pretty.css" rel="stylesheet">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/config.js"></script>
    <script type="text/javascript" src="../Build/Cesium/Cesium.js"></script>
</head>
</html>

Step2 创建三维场景

在准备章节，已经新建了一个 HTML 页面，在页面中继续添加代码以初始化三维球，如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <link href="./css/pretty.css" rel="stylesheet">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/config.js"></script>
    <script type="text/javascript" src="../Build/Cesium/Cesium.js"></script>
</head>
<body>
<div id="Container"></div>
 <script>
        const viewer = new SuperMap3D.Viewer("Container");
        const scene = viewer.scene;
        scene.open("此处贴上您发布的服务地址");
 </script>
</html>

服务地址获取：在SuperMap Online中打开已发布的服务，单击代理地址>“realspace”，即可获取服务地址。

图片
图20. 服务地址获取

运行效果如下：

图片
图21. 客户端展示倾斜摄影模型