3D 城市

查看演示

具有水体要素图层（具有水反射）的场景和具有来自场景服务的数据的场景图层

什么是 3D 城市？

3D 城市可视化是对城市基础设施的逼真或抽象描述。在许多其他可视化中，此类可视化可以显示城市内的建筑物、交通基础设施、旅游景点或计划项目。

您可以使用从逼真到抽象的样式创建 3D 城市可视化。逼真的可视化以模仿现实的方式渲染城市；更抽象的样式使用逻辑示意图对象渲染建筑物、植被和其他城市元素。您还可以创建混合这些内容的可视化效果。

如何可视化 3D 城市

建筑物是大多数 3D 城市可视化的重要组成部分。可视化建筑物的最简单方法是在地形上显示其覆盖区。覆盖区将存储为面要素图层，并使用填充符号显示。当建筑物不是可视化的中心点，但您希望将其包含在上下文中时，此可视化类型非常有用。

建筑物覆盖区包含有关其高度的信息。您可以使用该高度数据来拉伸其多边形。这对于显示城市中建筑物的高度非常有用，即使建筑物的细节形状对于可视化并不重要。

有关详细信息，请参阅将建筑物可视化为覆盖区示例。

当某些可视化显示建筑物的详细 3D 模型时，可以使其更具吸引力。3D 对象场景图层存储可使用纹理或颜色显示的大型城市模型。这些数据可以在 GeoScene Pro 或 CityEngine 等软件中建模，可以从 LiDAR 数据中提取，并且一些 3D 数据已在开放数据门户上提供。可视化此类数据的第一步是发布场景服务，将其作为场景图层添加到地图，然后在场景视图中可视化它。您可以使用原始纹理显示数据，也可以设置渲染器以显示具有不同颜色或数据驱动型样式的建筑物。

有关详细信息，请参阅将建筑物可视化为 3D 对象示例。

要以逼真 3D 方式可视化城市，您需要 3D 数据。最常见的数据图层类型是集成格网图层和带纹理的 3D 对象场景图层。

3D 格网数据捕获是一个自动化过程，可基于大量重叠影像构建 3D 对象。此过程是使用无人机实现的，结果是一个包含城市中所有 3D 对象的纹理格网，例如建筑物、树木、道路和高程信息。通常，集成格网图层没有可用的样式选项，但可以将数据添加到场景中以标记项目，例如城市内的兴趣点、社区或地标。

有关详细信息，请参阅真实城市可视化示例。

示例

将建筑物可视化为覆盖区

您并不总是需要使用 3D 数据来可视化 3D 场景中的建筑。以下示例将建筑物示意图显示为多边形填充符号和拉伸多边形符号。数据由旧金山开放数据门户提供。要创建此可视化，请执行以下操作：

在 GeoScene Online 上下载数据并作为要素图层发布。
创建要素图层，并使用填充符号或拉伸多边形符号设置渲染器。
将层添加到地图中，然后在场景视图中设置地图。

查看演示

Expand
代码块使用深色复制
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"} ]
Expand

将建筑物可视化为 3D 对象

3D 几何是将建筑物可视化为其实际 3D 形状所必需的。存储此类数据的最佳方法是通过 3D 对象场景图层。在此图层中，每个建筑物都表示一个要素，该要素存储有关其几何、纹理以及一些属性详细信息（可选，例如建造年份或建筑物的使用情况）的信息。

在以下示例中，旧金山的建筑物将作为 3D 对象场景图层添加到地图中。此图层包含每个建筑物的几何和纹理。

要使用其原始纹理显示建筑物，您需要在不使用渲染器的情况下将其添加到地图中。要移除该纹理并使用特定颜色显示建筑物，请应用包含具有所需颜色的格网符号的简单渲染器。如果图层还包含建筑物使用情况等属性，则可以应用生成数据驱动型可视化的渲染器。有关数据驱动型可视化的示例，请参阅 3D 中的分类数据。

查看演示

GeoScene JS API
Expand
代码块使用深色复制
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} } ] } } });
Expand

逼真的城市可视化

在此示例中，法兰克福市使用集成格网图层进行渲染。包含感兴趣点的要素图层随即添加到地图中。这些点相对于场景放置，以便它们与格网的高度对齐。此外，添加标注以显示该点的精确位置。有关高程对齐的详细信息，请参阅地形渲染页面。

查看演示

Expand
代码块使用深色复制
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"});
Expand

将现实世界的城市对象添加为 3D 模型

您可以将树木、灯柱或长椅等单个城市元素添加为点的 3D 模型符号。在此示例中，汽车、树木和灯柱是具有 3D 模型符号的点几何。您可以使用 glTF™ 格式的自己的 3D 模型，也可以从 GeoScene 提供的作为 web 样式的 3D 模型中进行选择。当您的目标是重新创建城市中某个区域的特写可视化时，这些模型非常有用。

在下面的示例中，您可以使用特定的 3D 模型符号添加点。您还可以对齐模型并调整模型大小以与环境集成。单击树按钮，然后单击场景中放置树 3D 模型的位置。接下来，拖动圆形处理程序以调整其大小或旋转它。

要创建如下所示的可视化效果，请执行以下操作：

添加具有城市对象类型、旋转和大小属性的点要素图层。
设置唯一值渲染器，用于将城市对象的类型映射到 GeoScene Web 样式库中的 3D 模型符号。
使用视觉变量按点要素图层中的属性驱动大小和旋转。
接下来，添加具有纹理建筑物的 3D 对象场景图层，以增加场景的真实感。

查看演示

GeoScene JS API
Expand
代码块使用深色复制
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 streetfield: "ROTATION"}, {type: "size",field: "SIZE",axis: "depth"} ] },elevationInfo: {mode: "on-the-ground"} });
Expand

GeoScene Maps SDK for JavaScript

3D 城市

什么是 3D 城市？

如何可视化 3D 城市

示例

将建筑物可视化为覆盖区

将建筑物可视化为 3D 对象

逼真的城市可视化

将现实世界的城市对象添加为 3D 模型