当前位置：首页 > backend >正文

在Cesium中通过geojson和3d tiles分别加载楼宇白膜

backend 2025/7/18 2:39:24

一、geojson渲染楼宇白膜（不推荐）

如果你没有3dtiles文件来加载白膜，只有geojson加载白膜可以通过GeoJsonDataSource来加载白膜，json格式如下。

实现代码如下

<template><div id="cesium_container"></div>
</template><script setup>
import * as Cesium from 'cesium'
import {Ion,Viewer } from 'cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'
import buildList from '../../assets/json/xintai.json'
let viewer = null
let build3Dtileset = nullonMounted(()=>{initMap()
})
const initMap = async ()=>{Ion.defaultAccessToken = '你注册的cesium的token'viewer = new Viewer('cesium_container',{})initBuild(buildList)
}
const initBuild = (list) =>{let data = []list.features.forEach(item=>{let obj = {"type":"Feature","geometry":{"type":"Polygon","coordinates":item.geometry.coordinates[0]},"properties":item.properties}data.push(obj)})let geoJson = {"type": "FeatureCollection","features": data}Cesium.GeoJsonDataSource.load(geoJson).then(dataSource => {viewer.dataSources.add(dataSource);console.log(dataSource, '==================================');dataSource.entities.values.forEach(function (entity) {entity.polygon.extrudedHeight = 100;  // 设置多边形高度entity.polygon.outline = false;  // 关闭边框entity.polygon.material =new Cesium.Color(83 / 255, 140 / 255, 245 / 255, 1);});viewer.zoomTo(dataSource); // 让视角适应数据});}</script><style lang="less" scoped>
#cesium_container{width: 100%;height: 100%;
}
</style>

实现效果

可以看到以上的方法实现了在cesium中绘制白膜；但是在cesium中不推荐这种方式，这种加载少量的白膜可以实现效果，但是数据量大起来后，会导致卡顿，性能上会出大问题，所以不推荐这种加载方式，在cesium中推荐Cesium3DTileset来加载3d tiles文件来渲染白膜，也就是方法二。

二、Cesium3DTileset渲染楼宇白膜（推荐）

cesium文档：

http://cesium.xin/cesium/cn/Documentation1.62/Cesium3DTileset.html?classFilter=Cesium3DTileset

Cesium3DTileset可以渲染大量的3d模型，并且对性能上有一定的优化

3dtiles文件目录结构如下

Cesium3DTileset用法也非常简单，只需要一个url去引入3dtiles主入口文件tileset.json即可。

具体代码如下

<template><div id="cesium_container"></div>
</template><script setup>
import * as Cesium from 'cesium'
import {Ion,Viewer } from 'cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'let viewer = null
let build3Dtileset = nullonMounted(()=>{initMap()
})
const initMap = async ()=>{Ion.defaultAccessToken = 'cesium的token'viewer = new Viewer('cesium_container',{})init3DBuild()
}
const init3DBuild = async () =>{const url = '/tiles2/tileset.json';const tilesetUrl = await Cesium.Cesium3DTileset.fromUrl(url);console.log(tilesetUrl, 'tilesetUrl');build3Dtileset = viewer.scene.primitives.add(tilesetUrl);build3Dtileset.style = new Cesium.Cesium3DTileStyle({color: {conditions: [['true', "color('rgb(51, 153, 255)',1)"]]},});viewer.flyTo(build3Dtileset);
}</script><style lang="less" scoped>
#cesium_container{width: 100%;height: 100%;
}
</style>

实现效果如下