一、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 = null

onMounted(()=>{
  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 = null

onMounted(()=>{
  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渲染的大规模白膜，页面也不是很卡顿，性能要比方法一好很多。