Extrude graphics

View on GitHub
Sample viewer app

Extrude graphics based on an attribute value.

Extrude graphics sample

Use case

Graphics representing features can be vertically extruded to represent properties of the data that might otherwise go unseen. Extrusion can add visual prominence to data beyond what may be offered by varying the color, size, or shape of symbol alone. For example, graphics representing wind turbines in a wind farm application can be extruded by a real-world "height" attribute so that they can be visualized in a landscape. Likewise, census data can be extruded by a thematic "population" attribute to visually convey population levels across a country.

How to use the sample

Once the sample is launched, notice that the graphics are extruded to the level set in their height property. Pan and zoom to explore.

How it works

  1. Create an AGSScene with a topographic() basemap.
  2. Set the scene to an AGSSceneView.
  3. Create an AGSGraphicsOverlay and AGSSimpleRenderer.
  4. Set the renderer's extrusionMode property to baseHeight.
  5. Specify the attribute name of the graphic that the extrusion mode will use by setting the renderer's extrusionExpression property to [height].
  6. Apply the renderer to the graphics overlay.
  7. Create graphics and specify the attributes with the key height.

Relevant API

  • AGSExtrusionMode
  • AGSRendererSceneProperties
  • AGSScene
  • AGSSimpleRenderer

About the data

This sample uses World Elevation data from ArcGIS REST Services.

Tags

3D, extrude, extrusion, height, scene, visualization

Sample Code

ExtrudeGraphicsViewController.swift
                                                                                                         
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
//
// Copyright 2016 Esri.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//   http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//

import UIKit
import ArcGIS

class ExtrudeGraphicsViewController: UIViewController {
    @IBOutlet var sceneView: AGSSceneView!

    private let graphicsOverlay = AGSGraphicsOverlay()

    private let cameraStartingPoint = AGSPoint(x: 83, y: 28.4, z: 20000, spatialReference: .wgs84())
    private let squareSize: Double = 0.01
    private let spacing: Double = 0.01
    private let maxHeight = 10000

    override func viewDidLoad() {
        super.viewDidLoad()

        // add the source code button item to the right of navigation bar
        (self.navigationItem.rightBarButtonItem as! SourceCodeBarButtonItem).filenames = ["ExtrudeGraphicsViewController"]

        // initialize scene with topographic basemap
        let scene = AGSScene(basemap: .topographic())
        // assign scene to the scene view
        self.sceneView.scene = scene

        // set the viewpoint camera
        let camera = AGSCamera(location: self.cameraStartingPoint, heading: 10, pitch: 70, roll: 0)
        self.sceneView.setViewpointCamera(camera)

        // add graphics overlay
        graphicsOverlay.sceneProperties?.surfacePlacement = .drapedBillboarded
        self.sceneView.graphicsOverlays.add(graphicsOverlay)

        // simple renderer with extrusion property
        let renderer = AGSSimpleRenderer()
        let lineSymbol = AGSSimpleLineSymbol(style: .solid, color: .white, width: 1)
        renderer.symbol = AGSSimpleFillSymbol(style: .solid, color: .accentColor, outline: lineSymbol)
        renderer.sceneProperties?.extrusionMode = .baseHeight
        renderer.sceneProperties?.extrusionExpression = "[height]"
        self.graphicsOverlay.renderer = renderer

        // add base surface for elevation data
        let surface = AGSSurface()
        /// The url of the Terrain 3D ArcGIS REST Service.
        let worldElevationServiceURL = URL(string: "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer")!
        let elevationSource = AGSArcGISTiledElevationSource(url: worldElevationServiceURL)
        surface.elevationSources.append(elevationSource)
        scene.baseSurface = surface

        // add the graphics
        self.addGraphics()
    }

    private func addGraphics() {
        // starting point
        let x = cameraStartingPoint.x - 0.01
        let y = cameraStartingPoint.y + 0.25

        // creating a grid of polygon graphics
        for column in stride(from: 0.0, through: 6.0, by: 1.0) {
            for row in stride(from: 0.0, through: 4.0, by: 1.0) {
                let startingX = x + column * (squareSize + spacing)
                let startingY = y + row * (squareSize + spacing)
                let startingPoint = AGSPoint(x: startingX, y: startingY, spatialReference: nil)
                let polygon = polygonForStartingPoint(startingPoint)
                addGraphicForPolygon(polygon)
            }
        }
    }

    // the function returns a polygon starting at the given point
    // with size equal to squareSize
    private func polygonForStartingPoint(_ point: AGSPoint) -> AGSPolygon {
        let polygon = AGSPolygonBuilder(spatialReference: .wgs84())
        polygon.addPointWith(x: point.x, y: point.y)
        polygon.addPointWith(x: point.x, y: point.y + squareSize)
        polygon.addPointWith(x: point.x + squareSize, y: point.y + squareSize)
        polygon.addPointWith(x: point.x + squareSize, y: point.y)
        return polygon.toGeometry()
    }

    // add a graphic to the graphics overlay for the given polygon
    private func addGraphicForPolygon(_ polygon: AGSPolygon) {
        let rand = Int.random(in: 0...maxHeight)

        let graphic = AGSGraphic(geometry: polygon, symbol: nil, attributes: nil)
        graphic.attributes.setValue(rand, forKey: "height")
        self.graphicsOverlay.graphics.add(graphic)
    }
}

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