Cesium加载城市白膜数据3DTiles

最新推荐文章于 2024-08-13 15:46:27 发布

偶尔躲躲乌云_0

最新推荐文章于 2024-08-13 15:46:27 发布

阅读量4.1k

点赞数 3

分类专栏： Cesium 文章标签： javascript 前端

本文链接：https://blog.csdn.net/Aurora_1970s/article/details/128832788

版权

Cesium 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章讲述了如何将城市建筑的shp数据转化为Geojson或3DTiles格式以在Cesium中加载。通过CesiumLab可将shp转为3DTiles，以优化大數據量的加载和显示性能。文中提供了一个add3DTiles()方法示例，用于添加3DTiles并支持加载完成后的回调和飞行至目标位置功能。

摘要由CSDN通过智能技术生成

Cesium加载城市白膜数据

数据获取

首先，城市建筑数据可以去网上扒一些，拿到的都是shp格式的文件。

数据转化

shp文件可以很方便的转为Geojson文件，然后再通过Cesium导入也可以实现效果。效果如下所示：
在这里插入图片描述

图中就是用Geojson数据添加到地图中，大约有117000条数据，加载的效果还可以。但是数据量大加载时间会比较长而且会卡顿。

shp数据文件可以通过CesiumLab来转换为3dtiles，然后再通过Cesium加载到地球中。

加载3DTiles

下面封装了一个添加3DTiles的方法add3DTiles()，可以直接拿去使用。

// 添加城市白膜3DTiles
add3DTiles(params) {
    const { 
        url, 
        complete,  // 加载完成的回调函数
        flyTo = false,
        show = true
    } = params
    console.log(url + '——数据开始加载');
    console.time('3dtiles');
    const tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
        url,
        show,
        shadows: Cesium.ShadowMode.DISABLED,
        luminanceAtZenith: 1,
    }))
    // 监听数据加载完成
    tileset.allTilesLoaded.addEventListener(() => {
        console.log('数据加载完成');
        console.timeEnd('3dtiles');
        if(typeof complete == 'function') {
            complete()
        } else {
            console.error('complete参数值格式有误，应为function类型')
        }
        // 加载完成后飞往该处
        if(flyTo) {
            viewer.flyTo(tileset);
        }
    });
    return tileset
}