一、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>实现效果如下
Cesium3DTileset渲染的大规模白膜，页面也不是很卡顿，性能要比方法一好很多。
