主题
3D 城市
字数统计: 2.1k 字
阅读时长: 约 4 分钟
当前版本: 4.29
具有水体要素图层(具有水反射)的场景和具有来自场景服务数据的场景图层
什么是 3D 城市?
3D 城市可视化是对城市基础设施的逼真或抽象描述。在许多其他可视化中,此类可视化可以显示城市内的建筑物、交通基础设施、旅游景点或计划项目。
您可以使用从逼真到抽象的样式来创建 3D 城市可视化。逼真可视化以模拟现实的方式渲染城市;更抽象的样式则使用示意图对象来渲染建筑物、植被和其他城市元素。您还可以创建混合这些内容的可视化效果。

如何可视化 3D 城市
建筑物是大多数 3D 城市可视化的重要组成部分。可视化建筑物的最简单方法是在地形上显示其覆盖区。覆盖区将存储为面要素图层,并使用填充符号显示。当建筑物不是可视化的中心点,但您希望将其包含在上下文中时,此可视化类型非常有用。
建筑物覆盖区包含有关其高度的信息。您可以使用该高度数据来拉伸其多边形。这对于显示城市中建筑物的高度非常有用,即使建筑物的细节形状对于可视化并不重要。
有关详细信息,请参阅将建筑物可视化为覆盖区示例。
当某些可视化显示建筑物的详细 3D 模型时,可以使其更具吸引力。3D 对象场景图层存储可使用纹理或颜色显示的大型城市模型。这些数据可以在 GeoScene Pro 或 CityEngine 等软件中建模,可以从 LiDAR 数据中提取,并且某些 3D 数据已在开放数据门户上提供。可视化此类型数据的第一步是发布场景服务,并将其作为场景图层添加到地图中,然后在场景视图中可视化它。您可使用原始纹理显示数据,也可设置渲染器以显示具有不同颜色或数据驱动型样式的建筑物。
有关详细信息,请参阅将建筑物可视化为 3D 对象示例。
要以逼真 3D 方式可视化城市,您需要 3D 数据。最常见的数据图层类型是集成格网图层和带纹理的 3D 对象场景图层。
3D 格网数据捕获是一个自动化过程,可基于大量重叠影像构建 3D 对象。此过程是使用无人机实现的,结果是一个包含城市中所有 3D 对象的纹理格网,例如建筑物、树木、道路和高程信息。通常,集成格网图层没有可用的样式选项,但可以将数据添加到场景中以标记项目,例如城市内的兴趣点、社区或地标。
有关详细信息,请参阅逼真的城市可视化示例。
示例
将建筑物可视化为覆盖区
您并不总是需要使用 3D 数据来可视化 3D 场景中的建筑。以下示例将建筑物覆盖区显示为多边形填充符号和拉伸多边形符号。要创建此可视化,请执行以下操作:
创建要素图层,并使用填充符号或拉伸多边形符号设置渲染器。
将图层添加到地图中,然后在场景视图中设置地图。
js
const footprintBuildings = new FeatureLayer({
url: "https://services2.arcgis.com/cFEFS0EWrhfDeVw9/arcgis/rest/services/san_francisco_footprints_selection/FeatureServer",
renderer: {
type: "simple",
symbol: {
type: "polygon-3d",
symbolLayers: [{
type: "fill",
material: { color: [255, 237, 204] },
outline: { color: [133, 108, 62, 0.5] }
}]
}
},
visible: false
});
const extrudedBuildings = new FeatureLayer({
url:"https://services2.arcgis.com/cFEFS0EWrhfDeVw9/arcgis/rest/services/san_francisco_footprints_selection/FeatureServer",
renderer: {
type: "simple",
symbol: {
type: "polygon-3d",
symbolLayers: [{
type: "extrude",
material: { color: [255, 237, 204] },
edges: {
type: "solid",
color: [133, 108, 62, 0.5],
size: 1
}
}]
},
visualVariables: [{
type: "size",
field: "heightcm",
valueUnit: "centimeters"
}]
})
将建筑物可视化为 3D 对象
3D 几何是将建筑物可视化为其实际 3D 形状所必需的。存储此类数据的最佳方法是通过 3D 对象场景图层。在此图层中,每个建筑物均表示一个要素,该要素存储有关其几何、纹理以及一些属性详细信息 (可选,例如建造年份或建筑物的使用情况) 的信息。
在以下示例中,旧金山的建筑物将作为 3D 对象场景图层添加到地图中。此图层包含每个建筑物的几何和纹理。
要使用其原始纹理显示建筑物,您需要在不使用渲染器的情况下将其添加到地图中。要移除该纹理并使用特定颜色显示建筑物,请应用包含具有所需颜色的格网符号的简单渲染器。如果图层还包含建筑物使用情况等属性,则可应用生成数据驱动型可视化的渲染器。有关数据驱动型可视化的示例,请参阅 3D 中的分类数据。
js
const buildings3DObjects = new SceneLayer({
url:
"https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/SF_BLDG_WSL1/SceneServer",
renderer: {
type: "simple",
symbol: {
type: "mesh-3d",
symbolLayers: [{
type: "fill",
material: {
color: [255, 237, 204],
colorMixMode: "replace"
},
edges: {
type: "solid",
color: [133, 108, 62, 0.5],
size: 1
}
}]
}
}
});
逼真的城市可视化
在此示例中,法兰克福市使用集成格网图层进行渲染。包含感兴趣点的要素图层随即添加到地图中。这些点相对于场景放置,以便它们与格网的高度对齐。此外,添加标注以显示该点的精确位置。有关高程对齐的详细信息,请参阅地形渲染页面。
js
const meshLayer = new IntegratedMeshLayer({
url: "https://tiles.arcgis.com/tiles/cFEFS0EWrhfDeVw9/arcgis/rest/services/Buildings_Frankfurt_2021/SceneServer/layers/0",
copyright: "nFrames - Aerowest",
title: "Integrated Mesh Frankfurt"
});
将现实世界的城市对象添加为 3D 模型
您可以将树木、灯柱或长椅等单个城市元素添加为点的 3D 模型符号。在此示例中,汽车、树木和灯柱是具有 3D 模型符号的点几何。您可使用自己的 glTF™ 格式的 3D 模型,也可从 GeoScene 提供的 Web 样式的 3D 模型中进行选择。当您的目标是重新创建城市中某个区域的特写可视化时,这些模型非常有用。
在以下示例中,您可以使用特定的 3D 模型符号添加点。还可以对齐模型并调整模型大小以与环境集成。单击树按钮,然后单击场景中放置树 3D 模型的位置。接下来,拖动圆形处理程序以调整其大小或旋转它。
要创建如下所示的可视化效果,请执行以下操作:
添加具有城市对象类型、旋转和大小属性的点要素图层。
设置唯一值渲染器,示例中使用了 Esri的 3D 模型符号。
使用视觉变量按点要素图层中的属性驱动大小和旋转。
接下来,添加具有纹理建筑物的 3D 对象场景图层,以增加场景的真实感。
js
const transportationLayer = new FeatureLayer({
url:
"https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Philadelphia_LoganSquare_cars/FeatureServer",
outFields: ["ROTATION", "CATEGORY", "SIZE"],
renderer: {
type: "unique-value", // autocasts as new UniqueValueRenderer()
field: "CATEGORY",
uniqueValueInfos: transportationSymbols.map(function (type) {
return {
value: type.value,
symbol: {
type: "web-style", // autocasts as new WebStyleSymbol()
name: type.name,
styleName: "EsriRealisticTransportationStyle"
}
};
}),
visualVariables: [{
type: "rotation",
// cars need to have a rotation field so that they are aligned to the street
field: "ROTATION"
},
{
type: "size",
field: "SIZE",
axis: "depth"
}]
},
elevationInfo: {
mode: "on-the-ground"
}
});