NSDT工具推荐： Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器 - REVIT导出3D模型插件 - 3D模型语义搜索引擎 - AI模型在线查看 - Three.js虚拟轴心开发包 - 3D模型在线减面 - STL模型在线切割 - 3D道路快速建模
在本文中，我将展示一种使用Node.js和Cesium.js 在基于 Web 的应用程序上可视化CityGML 3D 城市模型的简单方法，并以纽约市曼哈顿地区的示例为例。在这个简短的教程结束时，你将能够构建一个看起来像这样的 Web 应用程序：
1、CityGML 简介
在开始之前，让我们先了解CityGML 3D 城市模型。CityGML是一种开放的标准化数据模型和交换格式，用于存储由 OGC（开放地理空间联盟）引入的城市和景观的数字 3D 模型。CityGML的特别之处在于它是一个包含属性和几何数据的语义城市模型。
CityGML 模型的几何和属性允许模拟各种建筑能源需求、光伏潜力等等。
好消息是，许多城市提供了他们的 CityGML 作为开源数据集。
下面让我们开始，从 CityGML 构建基于 Web 的 3D 应用程序。
1、准备 3D 数据集
NYC DoITT以CityGML 格式发布了纽约市 (NYC) 的语义 3D 城市模型，包括纽约市的每座建筑，可以在这里下载。这个数据集中，我们将只关注曼哈顿地区（DA12_3D_Buildings_Merged.gml ~48,000 个建筑物）并使用它来创建 3D Web 应用程序。
虽然 CityGML 适合交换和存储 3D 建筑模型，但它不能直接在 Web 上可视化。由于我们将 Cesium 用于开发 Web 应用程序，因此我们需要将 CityGML 转换为 3D Tiles 格式。FME Workbench是我所知道的最适合这项工作的工具，它对学生和开源研究项目也是免费的。
或者，可以跳过此步骤并从下面的我的 GitHub 项目下载已转换的 3D Tiles。
2、设置 Web 服务器
对于 Web 服务器，创建一个项目文件夹和具有以下依赖项的 Node.js 项目：
$ npm init #initiate node project
$ npm install express #install express framework
$ npm install compression #install compression 然后，使用 Express 为 Node.js创建一个简单的server.js文件：
var express = require('express');
var compression = require('compression');
var app = express();
app.use(compression());
app.use(express.static('public'));
var server = app.listen('3000', '0.0.0.0', function () {
console.log('Application Running: http://localhost:%d', server.address().port);
});可以通过命令$ node server.js测试运行你的服务器。
3、使用 CesiumJS 开发 3D 应用程序
我们将使用 CesiumJS 来渲染我们的 3D 建筑模型。它是一个开源的 JavaScript 库，用于 Web 浏览器中的 3D 地球和 2D 地图。
现在，让我们在public文件夹中创建一个index.html文件并写入以下代码：
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://cesium.com/downloads/cesiumjs/releases/1.68/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.68/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<div id="cesiumContainer" style="width: 100%; height:100%"></div>
<script>
var viewer = new Cesium.Viewer('cesiumContainer');
var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: "<link to your 3D Tile dataset (tileset.json)>",
}))
Cesium.when(tileset.readyPromise).then(function (tileset) {viewer.flyTo(tileset)}) // fly to 3D tiles after loading!
</script>
</body>
</html>这个 HTML 基本上从 cesium.com 加载 Cesium 依赖项并创建一个 Cesium 容器。变量tileset通常指的是 3D Tiles 数据集。只需在url处将本地部分的值替换为已转换的 3D Tiles。完毕！
运行$ node server.js 后，前往http://localhost:3000 ，你会看到曼哈顿的 3D 模型。如果想要一些建筑模型的颜色/样式，可以通过tileset样式添加。下面的示例脚本显示了如何根据建筑高度设置建筑模型的样式。
tileset.style = new Cesium.Cesium3DTileStyle({
color: {
conditions: [
['${Height} >= 300', 'color("#FF442E")'],
['${Height} >= 200', 'color("#FF8000")'],
['${Height} >= 100', 'color("#E7A700")'],
['${Height} >= 50', 'color("#CFC600")'],
['${Height} >= 25', 'color("#A4B600")'],
['${Height} >= 10', 'color("#6A9E00")'],
['true', 'rgb(127, 59, 8)']
]
}
});
就是这样！我已经为查询功能添加了一些代码，如果你有兴趣，可以随时从我的 GitHub 中查看全部代码。
4、额外的资源
如果你想继续开发该应用程序，可以使用 Cesium 和 3D 城市模型做更多很酷的事情。请在此处查看一些资源：
- CesiumJS API 文档：链接/一些不错的展示：链接
- Cesium Style Expression文档：链接
- CityGML 数据
- 美国纽约市所有建筑物的 CityGML [LoD2] (链接)
- 美国所有建筑物的 CityGML ！！！[LoD1] ( link )
- 德国北莱茵-威斯特法伦州所有建筑物的 CityGML [LoD1,2] ( link )
- TU-Delft 在几个城市的开放 CityGML 数据列表 ( link )
- 没有 CityGML，不用担心。查看 FME 的 OpenStreetMap 到 CityGML 教程（链接） - 3DCityDB：用于存储、表示和管理虚拟 3D 城市模型的开源地理数据库：（链接）
- OGC 提供的有关CityGML的更多信息（链接）
- 实际应用：请查看提供使用 Cesium + CityGML 的 Smart Cites 解决方案的 VCS 公司（链接）
5、结束语
本教程涵盖了使用 Cesium.js 和 3D 城市模型创建基于 Web 的 3D 应用程序的基础。我希望你喜欢这篇文章，并发现它对你的日常工作或项目很有用。
原文链接：Web-based 3D Data Visualization with CityGML City Models
BimAnt翻译整理，转载请标明出处
