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建筑。这不仅可以用于可视化拟建建筑的影响,还可以用于各种空间分析和数据可视化应用。
评论记录:
回复评论: