Super Map超图IServer加载3dtiles数据

最新推荐文章于 2026-05-18 06:49:54 发布

原创最新推荐文章于 2026-05-18 06:49:54 发布 · 5.5k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

超图

本文介绍了如何将3D模型转换为3DTiles格式，并在iEarth_Qt中发布服务。首先，通过模型右键生成S3MB缓存，然后使用S3M工具包将其转换为B3DM格式。接着，在SuperMap iServer上发布3DTiles服务，选取相应的缓存配置文件。最后，展示了使用Cesium JavaScript库在前端加载并显示3DTiles模型的代码示例。

加载3dtiles文件

一．模型生成缓存
模型——右键生成缓存，缓存类型为三维切片，文件类型选为S3MB。

图1 生成模型缓存

二．iearth_Qt中，将数据转为3D-Tiles格式
利用S3M工具包（可前往超图资源中心进行下载 http://support.supermap.com.cn/DownloadCenter/DownloadPage.aspx?tt=ProductAAS&id=137）将数据转换为3D-Tiles格式，数据转换选为S3M→B3DM，源文件选择模型生成缓存后得到的.scp文件。

图2 转换为3D-Tiles

三．发布服务
通过iserver将3D-Tiles数据发布服务，数据来源选择3DTiles缓存。

图3 选择发布的数据来源

缓存配置文件选为生成的3DTiles文件夹中的.json文件。

图4 配置瓦片信息

服务类型选为REST-三维服务。

图5 选择发布的服务类型

发布成功后，可前往realspace/datas/tileset节点，获取发布数据的配置文件，结果如下。

图6 获取发布数据的配置文件

四．前端代码

<!DOCTYPE html>
<html lang="en">
<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">
    <title>3D Tiles</title>
    <link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <link href="./css/pretty.css" rel="stylesheet">
    <script src="./js/jquery.min.js"></script>
	<script type="text/javascript" src="../Build/Cesium/Cesium.js"></script>
</head>
<body>
<div id="cesiumContainer"></div>
<div id='loadingbar' class="spinner">
    <div class="spinner-container container1">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
    </div>
    <div class="spinner-container container2">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
    </div>
    <div class="spinner-container container3">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
    </div>
</div>
<script>
    function onload(Cesium) {
        var obj = [6378137.0, 6378137.0, 6356752.3142451793];
        Cesium.Ellipsoid.WGS84 = Object.freeze(new Cesium.Ellipsoid(obj[0], obj[1], obj[2]));
        var viewer = new Cesium.Viewer('cesiumContainer');


 var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ url: 'http://localhost:8090/iserver/services/3D-ThreeDTilesCache-tileset/rest/realspace/datas/tileset/config', isSuperMapiServer: true }))

        tileset.readyPromise.then(function () {
            var boundingSphere = tileset.boundingSphere;
            viewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0.0, -0.5, boundingSphere.radius));
            viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
        }).otherwise(function (error) {
            throw(error);
        });
        $('#loadingbar').remove();
    }
    if (typeof Cesium !== 'undefined') {
        window.startupCalled = true;
        onload(Cesium);
    }
</script>
</body>
</html>

图7 加载结果

标签

#其他