3D 城市

字数统计: 2.1k
阅读时长: 约 4 分钟
当前版本: 4.29

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

什么是 3D 城市?

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

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

3D 城市可视化的逼真或抽象描述

如何可视化 3D 城市

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

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

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

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

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

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

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

有关详细信息,请参阅逼真的城市可视化示例。

示例

将建筑物可视化为覆盖区

您并不总是需要使用 3D 数据来可视化 3D 场景中的建筑。以下示例将建筑物覆盖区显示为多边形填充符号和拉伸多边形符号。要创建此可视化,请执行以下操作:

  1. 创建要素图层,并使用填充符号或拉伸多边形符号设置渲染器。

  2. 将图层添加到地图中,然后在场景视图中设置地图。

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 模型的位置。接下来,拖动圆形处理程序以调整其大小或旋转它。

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

  1. 添加具有城市对象类型、旋转和大小属性的点要素图层。

  2. 设置唯一值渲染器,示例中使用了 Esri的 3D 模型符号。

  3. 使用视觉变量按点要素图层中的属性驱动大小和旋转。

  4. 接下来,添加具有纹理建筑物的 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"
        }
    });