Display a viewshed

Learn how to perform and display a viewshed analysis in a 3D scene.

display a viewshed

Viewshed analysis determines the visibility of terrain, buildings, and other 3D objects from an observer's location within a scene (using a specified field of view). The result indicates which areas are visible and which are obstructed when viewed from the observer's perspective.

In this tutorial, you will perform and display a viewshed analysis in a web scene. Your viewshed analysis will show visibility (visible or obstructed) and can be used to determine which hotspots in the Yosemite Valley are visible from a specified observer's perspective.

Prerequisites

Before starting this tutorial:

  1. You need an ArcGIS Location Platform or ArcGIS Online account.

  2. Your system meets the system requirements.

Steps

Open the Xcode project

  1. To start this tutorial, first complete the Display a web scene tutorial or download and unzip the solution.

  2. Open the .xcodeproj file in Xcode.

  3. If you downloaded the solution, get an access token and set the API key.

Get the web scene item ID

You can use ArcGIS tools to create and view web scenes. Use the Scene Viewer to identify the web scene item ID. This item ID will be used later in the tutorial.

  1. Go to the Yosemite Valley Hotspots web scene in the Scene Viewer in ArcGIS Online. This web scene displays terrain and hotspots in the Yosemite Valley.
  2. Make a note of the item ID at the end of the browser's URL. The item ID should be 7558ee942b2547019f66885c44d4f0b1.

Update the scene

  1. In Xcode, in the Project Navigator, click ContentView.swift.

  2. In the editor, modify the scene variable to create a Scene for the web scene. To do this, create a portal item providing the web scene's item ID and a Portal referencing ArcGIS Online.

    ContentView.swift
    Use dark colors for code blocks
    64 65 66 67 68 69 70 71 72 73
    Change lineChange lineChange lineChange line
    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
        // The Yosemite Valley hotspots scene.
        @State private var scene: ArcGIS.Scene = {
    
            let portalItem = PortalItem(
                portal: .arcGISOnline(connection: .anonymous),
                id: Item.ID("7558ee942b2547019f66885c44d4f0b1")!
            )
    
            return Scene(item: portalItem)
        }()
    

Create a viewshed analysis

Visual analyses are used to help you make sense of complex 3D data contained by a scene. Use a LocationViewshed to perform and display a viewshed analysis using a 3D point to define the observer's location.

  1. Create a private class named Model of type ObservableObject. See the programming patterns page for more information on how to manage states.

    ContentView.swift
    Expand
    Use dark colors for code blocks
    18 19 20
    Add line.Add line.Add line.
    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
    private class Model: ObservableObject {
    
    }
    
    Expand
  2. Create an AnalysisOverlay named analysisOverlay to contain and display the viewshed analyses.

    ContentView.swift
    Expand
    Use dark colors for code blocks
    18 19 20 21 22 23
    Add line.Add line.
    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
    private class Model: ObservableObject {
    
        // The analysis overlay to be added to the scene.
        let analysisOverlay = AnalysisOverlay()
    
    }
    
    Expand
  3. Create a private LocationViewshed named viewshed.

ContentView.swift
Expand
Use dark colors for code blocks
18 19 20 21 22 23 24 25
Add line.
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
private class Model: ObservableObject {

    // The analysis overlay to be added to the scene.
    let analysisOverlay = AnalysisOverlay()

    let viewshed: LocationViewshed

}
Expand
  1. Create a Double variable named maxDistance to track the viewshed's maximum distance. Set the viewshed's maxDistance property to the model's maxDistance property in a didSet observer to update the maximum distance when needed.

    ContentView.swift
    Expand
    Use dark colors for code blocks
    18 19 20 21 22 23 24 25 26 27 28 29 30 31
    Add line.Add line.Add line.Add line.Add line.
    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
    private class Model: ObservableObject {
    
        // The analysis overlay to be added to the scene.
        let analysisOverlay = AnalysisOverlay()
    
        let viewshed: LocationViewshed
    
        var maxDistance: Double {
            didSet {
                viewshed.maxDistance = maxDistance
            }
        }
    
    }
    
    Expand
  2. In init(), initialize all of the properties, make the viewshed not visible upon launch, and add the viewshed to the analysis overlay.

ContentView.swift
Expand
Use dark colors for code blocks
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
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
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
private class Model: ObservableObject {

    // The analysis overlay to be added to the scene.
    let analysisOverlay = AnalysisOverlay()

    let viewshed: LocationViewshed

    var maxDistance: Double {
        didSet {
            viewshed.maxDistance = maxDistance
        }
    }

    init() {
        self.viewshed = LocationViewshed(
            location: Point(latitude: 0, longitude: 0),
            heading: 0,
            pitch: 90,
            horizontalAngle: 360,
            verticalAngle: 180,
            minDistance: 10,
            maxDistance: 12_000
        )
        viewshed.isVisible = false
        analysisOverlay.addAnalysis(viewshed)
        maxDistance = viewshed.maxDistance!
    }

}
Expand
  1. Define a private method named setViewshedLocation(point:) that receives a point as a parameter. This method is used to set the location of the viewshed and make it visible, if it is not visible already.

    ContentView.swift
    Expand
    Use dark colors for code blocks
    46 47 48 49 50 51 52 53
    Add line.Add line.Add line.Add line.Add line.Add line.
    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
        func setViewshedLocation(point: Point) {
            viewshed.location = point
            if !viewshed.isVisible {
                viewshed.isVisible = true
            }
        }
    
    }
    
    Expand
  2. Define a private method named hideViewshed(). This method is used to hide the viewshed.

ContentView.swift
Expand
Use dark colors for code blocks
46 47 48 49 50 51 52 53 54 55 56 57
Add line.Add line.Add line.
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
    func setViewshedLocation(point: Point) {
        viewshed.location = point
        if !viewshed.isVisible {
            viewshed.isVisible = true
        }
    }

    func hideViewshed() {
        viewshed.isVisible = false
    }

}
Expand

Display the viewshed analysis with touch events

Touch events determine where to place the observer for the viewshed analysis. A user will long-press and drag to reveal and move the observer's location.

  1. The first step to displaying the analyses and graphics is to add the analysis and graphics overlays to the scene view. In the ContentView struct, create a variable of type Model with a @StateObject property wrapper and add the overlays to the scene view.

    ContentView.swift
    Expand
    Use dark colors for code blocks
    59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76
    Add line.Add line.
    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
    struct ContentView: View {
    
        // An ObservableObject containing the scene, graphics overlay, and analysis overlay.
        @StateObject private var model = Model()
    
        // The Yosemite Valley hotspots scene.
        @State private var scene: ArcGIS.Scene = {
    
            let portalItem = PortalItem(
                portal: .arcGISOnline(connection: .anonymous),
                id: Item.ID("7558ee942b2547019f66885c44d4f0b1")!
            )
    
            return Scene(item: portalItem)
        }()
    
    
    }
  2. To add or move the viewshed analysis upon long press and drag, add the onLongPressGesture(perform:) method to the SceneView. In the closure, call the previously created setViewshedLocation(point:) method, passing in the scenePoint.

    ContentView.swift
    Expand
    Use dark colors for code blocks
    76 77 78 79 80 81 82 83 84 85
    Add line.Add line.Add line.Add line.
    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
        var body: some View {
    
            SceneView(scene: scene, analysisOverlays: [model.analysisOverlay])
    
                .onLongPressGesture { _, scenePoint in
                    guard let scenePoint = scenePoint else { return }
                    model.setViewshedLocation(point: scenePoint)
                }
    
        }
    
    Expand

Add a UI to control the viewshed analysis

To control the viewshed analysis, some UI elements are required.

  1. Add a toolbar to the bottom of the scene view.

    ContentView.swift
    Expand
    Use dark colors for code blocks
    76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91
    Add line.Add line.Add line.Add line.Add line.
    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
        var body: some View {
    
            SceneView(scene: scene, analysisOverlays: [model.analysisOverlay])
    
                .onLongPressGesture { _, scenePoint in
                    guard let scenePoint = scenePoint else { return }
                    model.setViewshedLocation(point: scenePoint)
                }
    
                .toolbar {
                    ToolbarItemGroup(placement: .bottomBar) {
    
                    }
                }
    
        }
    
    Expand
  2. Add a Slider named slider to the toolbar with the model's maxDistance property as its value and 10...12_000 as the range. The slider changes the viewshed's maximum distance by expanding or contracting the size of the observer's field of view. The maximumValue and minimumValue properties define the range of values the user can select to calculate the viewshed. You set an action on the slider using a selector for a method that will be added in a later step.

    ContentView.swift
    Expand
    Use dark colors for code blocks
    85 86 87 88 89 90 91 92
    Add line.Add line.
    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
                .toolbar {
                    ToolbarItemGroup(placement: .bottomBar) {
    
                        Slider(value: $model.maxDistance, in: 10...12_000)
                            .frame(width: 300)
    
                    }
                }
    
    Expand
  3. Lastly, create a toolbar and add a "Clear" button to reset the analysis and graphics overlays. The "Clear" button calls the previously created hideViewshed() method. This will allow users a fresh start to make more analyses.

    ContentView.swift
    Expand
    Use dark colors for code blocks
    85 86 87 88 89 90 91 92 93 94 95 96 97 98
    Add line.Add line.Add line.Add line.Add line.
    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
                .toolbar {
                    ToolbarItemGroup(placement: .bottomBar) {
    
                        Slider(value: $model.maxDistance, in: 10...12_000)
                            .frame(width: 300)
    
                        Spacer()
                        Button("Clear") {
                            // Resets the line of sight.
                            model.hideViewshed()
                        }
    
                    }
                }
    
    Expand

Run the app

Press Command + R to run the app.

You should see a scene of hotspots in the Yosemite Valley. Long-press and drag to display and move a viewshed analysis to explore the visibility of terrain from various locations.

What's next?

Learn how to use additional API features, ArcGIS location services, and ArcGIS tools in these tutorials:

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