在本教程中，您将学习如何创建 Cesium 应用程序，用您自己的 3D 模型替换真实城市中的建筑物。您可以使用它来可视化拟建建筑的影响，及如何改变天际线？从特定楼层或房间看到的景色会是什么样子？
我们将介绍如何：
-
在网络上设置并部署您的 Cesium 应用程序。
-
添加全球 3D 建筑物、地形和图像的基础图层。
-
隐藏单个建筑物并用您自己的 3D 模型替换它们。
开始之前
我们将从 Cesium ion（一个用于流式传输和托管 3D 内容的开放平台）获取全球卫星图像、3D 建筑物和地形。
如果您还没有免费的Cesium ion帐户，请注册一个。
登录后：
-
转到您的 访问令牌 选项卡。
-
请注意默认令牌旁边的复制按钮。我们将在下一步中使用此令牌。
1 设置你的Cesium应用程序
我们将使用 CesiumJS（一个开源 JavaScript 引擎）创建我们的应用程序。我们将使用 Glitch（一个在线 IDE）来托管我们的应用程序。
1 使用我们组合的基本模板创建一个新的 Glitch 项目。
2单击 左侧面板中的index.html以查看应用程序的代码。
3替换 为您的令牌页面your_token_here 中的访问令牌 。
4单击 顶部的 "显示"并选择"代码旁边"来运行应用程序。
到目前为止，index.html中的代码 做了三件事：
-
导入 CesiumJS 库。JavaScript 和 CSS 文件在这两行中加载：
<script src="https://cesium.com/downloads/cesiumjs/releases/1.115/Build/Cesium/Cesium.js"></script><link href="https://cesium.com/downloads/cesiumjs/releases/1.115/Build/Cesium/Widgets/widgets.css" rel="stylesheet"> -
为场景添加一个 HTML 容器：
<div id="cesiumContainer"></div>。 -
用 ; 初始化查看器
const viewer = new Cesium.Viewer('cesiumContainer')。
现在，您的浏览器中运行了一个基本的 CesiumJS 应用程序，其中包含来自 Cesium ion 的全球卫星图像。
配置自动刷新
每次代码更改时，Glitch 都会自动刷新页面。您可以通过单击左上角的项目名称并取消选中此框来切换此选项：
使用应用程序窗口顶部的刷新按钮重新运行应用程序：
2添加Cesium OSM建筑物和Cesium世界地形
Cesium OSM Buildings是一个全球基础层，拥有来自 OpenStreetMap 数据的超过 3.5 亿座建筑物。它被用作 3D Tiles，这是由 Cesium 创建的开放标准，可以将 3D 内容流式传输到任何兼容的客户端。
让我们添加这些图层，然后将摄像机移动到我们虚构的新建筑将位于的城市 - 美国科罗拉多州丹佛市。
1将index.html中的 JavaScript 代码替换 为以下代码，保留之前的访问令牌行。
2单击并拖动以移动相机。按住 CTRL 键的同时拖动可倾斜。
3单击任何建筑物以查看其元数据。
// Keep your Cesium.Ion.defaultAccessToken = 'your_token_here' line above. // STEP 2 CODE// Initialize the viewer with Cesium World Terrain.const viewer = new Cesium.Viewer('cesiumContainer', { terrain: Cesium.Terrain.fromWorldTerrain(),});
// Fly the camera to Denver, Colorado at the given longitude, latitude, and height.viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(-104.9965, 39.74248, 4000)});
// Add Cesium OSM Buildings.const buildingsTileset = await Cesium.createOsmBuildingsAsync();viewer.scene.primitives.add(buildingsTileset);
此时，完整的index.html将如下所示（访问令牌除外）。在后续步骤中，您将在标记内的现有代码下方添加新代码。
<!DOCTYPE html><html lang="en"><head> <script src="https://cesium.com/downloads/cesiumjs/releases/1.115/Build/Cesium/Cesium.js"></script> <link href="https://cesium.com/downloads/cesiumjs/releases/1.115/Build/Cesium/Widgets/widgets.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"></head><body> <div id="cesiumContainer"></div> <script type="module"> // Your access token can be found at: https://ion.cesium.com/tokens. // Replace `your_access_token` with your Cesium ion access token. Cesium.Ion.defaultAccessToken = 'your_access_token'; // Keep your Cesium.Ion.defaultAccessToken = 'your_token_here' line above. // STEP 2 CODE // Initialize the viewer with Cesium World Terrain. const viewer = new Cesium.Viewer('cesiumContainer', { terrain: Cesium.Terrain.fromWorldTerrain(), });
// Fly the camera to Denver, Colorado at the given longitude, latitude, and height. viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(-104.9965, 39.74248, 4000) });
// Add Cesium OSM Buildings. const buildingsTileset = await Cesium.createOsmBuildingsAsync(); viewer.scene.primitives.add(buildingsTileset);</script></body></html>
Cesium OSM Buildings 被固定在全球高分辨率 3D 地形层Cesium World Terrain上。这使得它非常适合需要精确建筑高度的应用，例如洪水分析工具。
3确定新建筑面积
在添加新建筑物之前，让我们添加一个 GeoJSON 文件来标记它的占地面积。这将向我们展示哪些现有建筑物需要拆除。
1下载 GeoJSON 文件。
2将 GeoJSON 文件拖放到 Cesium ion 仪表板中。
3按 UPLOAD。
4上传后，记下预览窗口下的3D对象 ID。
1在index.html中添加以下代码。
-
替换
your_asset_id为您的3D对象ID。ID 是一个数字，因此不需要引号。// STEP 3 CODEasync function addBuildingGeoJSON() { // Load the GeoJSON file from Cesium ion. const geoJSONURL = await Cesium.IonResource.fromAssetId(your_asset_id); // Create the geometry from the GeoJSON, and clamp it to the ground. const geoJSON = await Cesium.GeoJsonDataSource.load(geoJSONURL, { clampToGround: true }); // Add it to the scene. const dataSource = await viewer.dataSources.add(geoJSON); // By default, polygons in CesiumJS will be draped over all 3D content in the scene. // Modify the polygons so that this draping only applies to the terrain, not 3D buildings. for (const entity of dataSource.entities.values) { entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN; } // Move the camera so that the polygon is in view. viewer.flyTo(dataSource);}addBuildingGeoJSON();
您现在会在地面上看到建筑物的足迹。使用鼠标滚轮放大或右键单击并拖动以仔细查看。
5隐藏现场现有的3D建筑物
现在我们已经确定了新建筑的去向，我们可以看到当前有哪些建筑。我们将使用 3D Tiles 样式语言 来隐藏它们。
在上面的足迹中，我们可以看到我们新拟建建筑的场地上有六栋建筑------一栋大型建筑和五栋小得多的建筑。
1添加以下代码。它隐藏了所有较小的 3D 建筑物。
// STEP 4 CODE// Hide individual buildings in this area using 3D Tiles Styling language.buildingsTileset.style = new Cesium.Cesium3DTileStyle({ // Create a style rule to control each building's "show" property. show: { conditions : [ // Any building that has this elementId will have `show = false`. ['${elementId} === 332469316', false], ['${elementId} === 332469317', false], ['${elementId} === 235368665', false], ['${elementId} === 530288180', false], ['${elementId} === 530288179', false], // If a building does not have one of these elementIds, set `show = true`. [true, true] ] }, // Set the default color style for this particular 3D Tileset. // For any building that has a `cesium#color` property, use that color, otherwise make it white. color: "Boolean(${feature['cesium#color']}) ? color(${feature['cesium#color']}) : color('#ffffff')"});
2扩展此代码以隐藏剩余的 3D 建筑。
-
单击建筑物即可找到其
elementId。 -
添加另一行，例如：
['${elementId} === large_building_elementId', false],.
6上传并定位新建筑
让我们上传建议的建筑模型。
1下载此 glTF 模型。
2将其拖放到 Cesium ion 仪表板中。
3选择 3D 模型（平铺为 3D 平铺） 并按 UPLOAD。
4平铺完成后，单击 资源预览窗口顶部的"调整平铺集位置"按钮。
5在搜索框中 输入建筑物的地址 1250 Cherokee Street ，然后单击NEXT。
6使用查看器上的控件，直观地定位并旋转建筑物，使其与下方的卫星图像对齐。您的最终设置应约为：
-
经度：-104.9909
-
纬度: 39.73579
-
身高：1577
-
标题：-8
7按SAVE。
7将新建筑添加到场景中
现在让我们将新建筑添加到场景中。
1在资源预览窗口下获取我们刚刚地理定位的建筑模型的3D对象 ID。
2在index.html 中添加以下代码。
-
替换
your_asset_id为您的3D对象 ID。// STEP 6 CODE// Add the 3D Tileset you created from your Cesium ion account.const newBuildingTileset = await Cesium.Cesium3DTileset.fromIonAssetId(your_asset_id);viewer.scene.primitives.add(newBuildingTileset);
// Move the camera to the new building.viewer.flyTo(newBuildingTileset);
8添加一个按钮来切换新建筑
1在 index.html中，将按钮添加到 <body> 标记内的上方 <script>。
<button id="toggle-building">Toggle new building</button>
2style 在标签内 添加以下 CSS 标签head 。
<style type="text/css"> #toggle-building { z-index: 1; position: fixed; top: 5px; left: 5px; }</style>
3在index.html中添加以下JavaScript
// STEP 7 CODE// Toggle the tileset's show property when the button is clicked.document.querySelector('#toggle-building').onclick = function() { newBuildingTileset.show = !newBuildingTileset.show;};
9考虑建筑物对周围环境的影响
现在您可以比较有和没有这座新建筑的场景！丹佛的全景山景非常珍贵。这座建筑如何影响其他地点（例如科罗拉多州议会大厦）的景观？
对科罗拉多州议会大厦景观的影响。
要重现此效果，请搜索State Capitol Building, Denver, CO, USA并调整相机。
我们甚至可以探索国会大厦入口处的景色将如何变化。
从更接近地面的角度对视野的影响。
完整教程源码
这是此应用程序的完整源代码，带有 your_token_here 和 your_asset_id 占位符
<!DOCTYPE html><html lang="en"><head> <script src="https://cesium.com/downloads/cesiumjs/releases/1.115/Build/Cesium/Cesium.js"></script> <link href="https://cesium.com/downloads/cesiumjs/releases/1.115/Build/Cesium/Widgets/widgets.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> <style type="text/css"> #toggle-building { z-index: 1; position: fixed; top: 5px; left: 5px; }</style></head><body type="module"> <div id="cesiumContainer"></div> <button id="toggle-building">Toggle new building</button> <script> // Your access token can be found at: https://ion.cesium.com/tokens. // Replace `your_access_token` with your Cesium ion access token. Cesium.Ion.defaultAccessToken = 'your_access_token';
// Keep your Cesium.Ion.defaultAccessToken = 'your_token_here' line from above. // STEP 2 CODE // Initialize the viewer with Cesium World Terrain. const viewer = new Cesium.Viewer('cesiumContainer', { terrain: Cesium.Terrain.fromWorldTerrain(), });
// Fly the camera to Denver, Colorado at the given longitude, latitude, and height. /* viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(-104.9965, 39.74248, 4000) }); */
// Add Cesium OSM Buildings. const buildingsTileset = await Cesium.createOsmBuildingsAsync(); viewer.scene.primitives.add(buildingsTileset);
// STEP 3 CODE async function addBuildingGeoJSON() { // Load the GeoJSON file from Cesium ion. const geoJSONURL = await Cesium.IonResource.fromAssetId(your_asset_id); // Create the geometry from the GeoJSON, and clamp it to the ground. const geoJSON = await Cesium.GeoJsonDataSource.load(geoJSONURL, { clampToGround: true }); // Add it to the scene. const dataSource = await viewer.dataSources.add(geoJSON); // By default, polygons in CesiumJS will be draped over all 3D content in the scene. // Modify the polygons so that this draping only applies to the terrain, not 3D buildings. for (const entity of dataSource.entities.values) { entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN; } // Move the camera so that the polygon is in view. // viewer.flyTo(dataSource); } addBuildingGeoJSON();
// STEP 4 CODE // Hide individual buildings in this area using 3D Tiles Styling language. buildingsTileset.style = new Cesium.Cesium3DTileStyle({ // Create a style rule to control each building's "show" property. show: { conditions : [ // Any building that has this elementId will have `show = false`. ['${elementId} === 532245203', false], ['${elementId} === 332469316', false], ['${elementId} === 332469317', false], ['${elementId} === 235368665', false], ['${elementId} === 530288180', false], ['${elementId} === 530288179', false], // If a building does not have one of these elementIds, set `show = true`. [true, true] ] }, // Set the default color style for this particular 3D Tileset. // For any building that has a `cesium#color` property, use that color, otherwise make it white. color: "Boolean(${feature['cesium#color']}) ? color(${feature['cesium#color']}) : color('#ffffff')" });
// STEP 6 CODE // Add the 3D Tileset you created from your Cesium ion account. const newBuildingTileset = await Cesium.Cesium3DTileset.fromIonAssetId(your_asset_id); viewer.scene.primitives.add(newBuildingTileset);
// Move the camera to the new building. viewer.flyTo(newBuildingTileset);
// STEP 7 CODE // Toggle the tileset's show property when the button is clicked. document.querySelector('#toggle-building').onclick = function() { newBuildingTileset.show = !newBuildingTileset.show; };</script></body></html>