Cesium.js是一个功能强大的开源JavaScript库，它允许开发者在Web应用中创建和展示3D地球和地图。利用Cesium.js，我们可以加载和渲染3D建筑模型，为用户提供沉浸式的地理空间体验。本文将详细介绍如何使用Cesium.js生成3D建筑。

1. 创建Cesium应用

首先，你需要创建一个Cesium应用。如果你使用的是Vue 3，可以通过以下步骤来集成Cesium：

ini
 代码解读
复制代码
javascript
import * as Cesium from 'cesium';
import "cesium/Build/Cesium/Widgets/widgets.css";

Cesium.Ion.defaultAccessToken = '你的Cesium Ion访问令牌';
const viewer = new Cesium.Viewer("cesiumContainer", {
    terrain: Cesium.Terrain.fromWorldTerrain()
});

2. 添加Cesium OSM Buildings和Cesium World Terrain

Cesium OSM Buildings是一个全球基础层，包含超过3.5亿座建筑物，源自OpenStreetMap数据。你可以将其作为3D Tiles添加到你的应用中：

ini
 代码解读
复制代码
javascript
const buildingsTileset = await Cesium.createOsmBuildingsAsync();
viewer.scene.primitives.add(buildingsTileset);

Cesium World Terrain是一个全球高分辨率3D地形层，适合需要精确建筑高度的应用。

3. 显示新建筑地面范围

在添加新建筑物之前，你可以添加一个GeoJSON文件来标记它的覆盖区（footprint）：

ini
 代码解读
复制代码
javascript
async function addBuildingGeoJSON() {
  const new_building_denver = '/new_building_denver.json';
  const buildingGeoJSON = await Cesium.GeoJsonDataSource.load(new_building_denver, { clampToGround: true });
  const dataSource = await viewer.dataSources.add(buildingGeoJSON);
  for (const entity of dataSource.entities.values) {
    entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN;
  }
}

4. 隐藏场地上现有的3D建筑物

使用3D Tiles样式语言来隐藏特定区域的现有建筑物：

dart
 代码解读
复制代码
javascript
buildingsTileset.style = new Cesium.Cesium3DTileStyle({
  show: {
    conditions: [
      ['${elementId} === 332469316', false],
      ['${elementId} === 332469317', false],
      // 更多条件...
      [true, true]
    ]
  }
});

5. 将新建筑添加到场景中

最后，你可以将新建筑的3D模型（例如GLB格式）添加到场景中：

ini
 代码解读
复制代码
javascript
async function showNewBuilding() {
  const newBuildingTilesetUrl = '/PSFS.glb';
  const position = Cesium.Cartesian3.fromDegrees(-104.9909, 39.73579, 1577);
  const headingPositionRoll = new Cesium.HeadingPitchRoll(-8, 0, 0);
  const newBuildingTileset = await Cesium.Model.fromGltfAsync({
    url: newBuildingTilesetUrl,
    modelMatrix: Cesium.Transforms.headingPitchRollToFixedFrame(position, headingPositionRoll, Cesium.Ellipsoid.WGS84)
  });
  viewer.scene.primitives.add(newBuildingTileset);
}

通过这些步骤，你可以在Cesium.js中生成和显示3D建筑。这不仅可以用于可视化拟建建筑的影响，还可以用于各种空间分析和数据可视化应用。