Cesium加载3Dtiles模型-大疆智图

最新推荐文章于 2025-04-08 19:04:07 发布

汪小敏同学

最新推荐文章于 2025-04-08 19:04:07 发布

阅读量9.8k

点赞数 3

分类专栏： vue基础知识总结文章标签： 3d

本文链接：https://blog.csdn.net/weixin_44692055/article/details/126915166

版权

vue基础知识总结专栏收录该内容

70 篇文章

订阅专栏

本文介绍如何在Cesium中加载3Dtiles模型，并提供具体步骤与代码示例，包括使用不同软件输出3Dtiles格式的方法及效果展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Cesium加载3Dtiles模型

Cesium加载3Dtiles模型步骤：
（一）如果您使用的是大疆智图，则该软件可以直接输出3Dtiles格式（B3DM切片）的数据，如图所示：

  var viewer = new Cesium.Viewer('cesiumContainer', {
        //需要进行可视化的数据源的集合
        animation: false, //是否显示动画控件
        shouldAnimate: true,
        homeButton: false, //是否显示Home按钮
        fullscreenButton: false, //是否显示全屏按钮
        baseLayerPicker: false, //是否显示图层选择控件
        geocoder: false, //是否显示地名查找控件
        timeline: false, //是否显示时间线控件
        sceneModePicker: true, //是否显示投影方式控件
        navigationHelpButton: false, //是否显示帮助信息控件
        infoBox: false, //是否显示点击要素之后显示的信息
        requestRenderMode: true, //启用请求渲染模式
        scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
        sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
        fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处
        //加载天地图影像地图，WebMapTileServiceImageryProvider该接口是加载WMTS服务的接口
        imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
            url: 'http://t0.tianditu.gov.cn/img_w/wmts?tk=ebf64362215c081f8317203220f133eb',
            layer: 'img',
            style: 'default',
            tileMatrixSetID: 'w',
            format: 'tiles',
            maximumLevel: 18
        })
    });
    // 如果需要叠加路网与注记矢量则添加以下代码
    viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
        url: 'http://t0.tianditu.gov.cn/cia_w/wmts?tk=ebf64362215c081f8317203220f133eb',
        layer: 'cia',
        style: 'default',
        tileMatrixSetID: 'w',
        format: 'tiles',
        maximumLevel: 18
    }))
    //加载倾斜示范数据
    var palaceTileset = new Cesium.Cesium3DTileset({
        url: '../../SampleData/OSGB&3Dtiles/terra_b3dms/tileset.json',
            //控制切片视角显示的数量，可调整性能
            maximumScreenSpaceError: 2,
            maximumNumberOfLoadedTiles: 100000,
    })
    //添加到场景
    viewer.scene.primitives.add(palaceTileset);
    //控制模型的位置
    palaceTileset.readyPromise.then(function (palaceTileset) {
        viewer.scene.primitives.add(palaceTileset);
        var heightOffset = 0.0; //可以改变3Dtiles的高度
        var boundingSphere = palaceTileset.boundingSphere;
        var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
        var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
        var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, heightOffset);
        var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
        palaceTileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
        viewer.zoomTo(palaceTileset, new Cesium.HeadingPitchRange(0.5, -0.2, palaceTileset.boundingSphere.radius *
            1.0));
    });
    //定位到三维模型
    viewer.zoomTo(palaceTileset);

（二）如果您使用的是CC（Smart3D），该软件可以输出OSGB格式的数据，我们可以借助：
1.osg2cesiumApp v1.3软件来将我们的OSGB倾斜摄影数据转换成3Dtiles文件进行加载
2.cesiumlab2软件来将我们的OSGB倾斜摄影数据转换成3Dtiles文件进行加载
3.我们可以借助SuperMap的iearth工具来转换
加载效果如图所示：