Cesium加载城市白膜数据3DTiles-Toy模板网

这篇具有很好参考价值的文章主要介绍了Cesium加载城市白膜数据3DTiles。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Cesium加载城市白膜数据

数据获取

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

数据转化

shp文件可以很方便的转为Geojson文件，然后再通过Cesium导入也可以实现效果。效果如下所示：
Cesium加载城市白膜数据3DTiles

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

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

加载3DTiles

下面封装了一个添加3DTiles的方法add3DTiles()，可以直接拿去使用。文章来源地址https://www.toymoban.com/news/detail-502368.html

// 添加城市白膜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
}