Cities in 3D

Scene with a water body feature layer with water reflection and a scene layer with data from a scene service

What are cities in 3D?

3D city visualizations are realistic or abstract depictions of city infrastructure. Among many others, such visualizations can show buildings, transportation infrastructure, tourist points of interest, or planned projects within a city.

You can create a 3D city visualization with styles that range from realistic to abstract. A realistic visualization renders the city in a way that mimics reality; a more abstract style renders buildings, vegetation, and other city elements using schematic objects. You can also create a visualization that blends these.

Realistic or abstract depictions of 3D city visualizations

How to visualize cities in 3D

Buildings are an important part of most 3D city visualizations. The simplest way to visualize a building is to display its footprint on the terrain. The footprint is stored as a polygon feature layer and displayed with a fill symbol. This type of visualization is useful when buildings are not the center point of the visualization, but you want to include them for context.

A building's footprint contains information about its height. You can use that height data to extrude its polygon. This is useful to show the height of buildings in a city, even when the detailed shape of the building is unimportant for your visualization.

For more information, see the Visualize buildings as footprints example.

Some visualizations can be made more compelling when they display the detailed 3D model of a building. 3D object scene layers store large city models that can be displayed with textures or colors. Such data can be modeled in software such as ArcGIS Pro or CityEngine, can be extracted from LiDAR data, and some 3D data has been made available on open data portals. A first step to visualize this type of data is to publish a scene service, add it to a map as a scene layer, and then visualize it in a scene view. You can display the data either with the original textures or set a renderer to display the buildings with a different color or with a data-driven styling.

For more information, see the Visualize buildings as 3D objects example.

To visualize a city in 3D realistically, you need 3D data. The most common types of data layers are integrated mesh layer and 3D object scene layer with textures.

3D mesh data capturing is an automated process that constructs 3D objects from large sets of overlapping imagery. This process is achieved using a drone, and the result is a textured mesh that includes all of the 3D objects in a city, such as buildings, trees, roads, and elevation information. Generally, there are no styling options are available for an integrated mesh layer, but data can be added to a scene to mark items, such as points of interest, neighborhoods, or landmarks within a city.

For more information, see the Realistic city visualization example.

Examples

Visualize buildings as footprints

You do not always need to use 3D data to visualize buildings in a 3D scene. The following example displays building footprints as both polygon fill symbols and as extruded polygon symbols. Data provided by the Open Data Portal of San Francisco. To create this visualization:

  1. Download data and publish as a feature layer on ArcGIS Online.
  2. Create a feature layer and set a renderer with a fill symbol or an extruded polygon symbol.
  3. Add the layer to a map and set the map on scene view.
Expand
Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
  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

Visualize buildings as 3D objects

3D geometry is required to visualize buildings as their actual 3D shape. The best way to store such data is through a 3D object scene layer. In this layer, each building represents a feature that stores information about its geometry, textures, and, optionally, some attribute details such as construction year or building's usage.

In the following example, the buildings of San Francisco are added as a 3D object scene layer to the map. This layer contains the geometry and textures of each building.

To display the buildings using their original texture, you need to add them to the map without a renderer. To remove that texture and display the buildings using a specific color, apply a simple renderer containing a mesh symbol with the desired color. If the layer also contains attributes such as building usage, you can apply a renderer that generates a data-driven visualization. See Categorical data in 3D for an example of a data-driven visualization.

ArcGIS JS API
Expand
Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
  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

Realistic city visualization

In this example, the city of Frankfurt is rendered with an integrated mesh layer. A feature layer that contains points of interest is added to the map. These points are placed relative to the scene, so that they are aligned to the height of the mesh. Additionally, callouts are added to show the precise location of that point. See the terrain rendering page for more information on elevation alignment.

Expand
Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
        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

Add real world city objects as 3D models

You can add individual city elements like trees, light posts, or benches as 3D model symbols for points. In this example, the cars, trees, and light posts are point geometries with a 3D model symbol. You can use your own 3D models in glTF™ format, or you can choose from the 3D models that Esri provides as web styles. These models are useful when your goal is to recreate a close-up visualization of an area in a city.

In the below example, you can add points with specific 3D model symbols. You can also align and resize the models to integrate with the environment. Click the Tree button and then click the location in the scene in which to place the tree 3D model. Next, drag the circle handler to resize it or rotate it.

To create a visualization like this:

  1. Add a point feature layer with attributes for the type of city object, the rotation, and the size.
  2. Set a unique value renderer that maps the type of city object to a 3D model symbol in the Esri web style library.
  3. Use visual variables to drive the size and the rotation by attributes in the point feature layers.
  4. Next, add a 3D object scene layer with textured buildings to increase the scene's realism.
ArcGIS JS API
Expand
Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
        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"
          }
        });
Expand

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.