Clip geometry

View inC++QMLView on GitHubSample viewer app

Clip a geometry with another geometry.

screenshot

Use case

Create a new set of geometries for analysis (e.g. displaying buffer zones around abandoned coal mine shafts in an area of planned urban development) by clipping intersecting geometries.

How to use the sample

Click the "Clip" button to clip the blue graphic with the red dashed envelopes.

How it works

  1. Create a GraphicsOverlay and add a Graphic containing an envelope.
  2. Create another GraphicsOverlay that contains three other envelopes: one that intersects a part of the first graphic, one that is entirely within it, and another completely outside of it.
  3. Create a third GraphicsOverlay but add no graphics to it.
  4. Create a Button that, when clicked, calls a function that hides the main graphic. In the same function, iterate through the GraphicsOverlay that contains the three envelopes and call GeometryEngine.clip for each Envelope, by passing in the main graphic's Geometry and the current Envelope as arguments.
  5. Add each clipped Geometry graphic to the empty GraphicsOverlay to visualize the clipped geometries.

Relevant API

  • Envelope
  • Geometry
  • GeometryEngine.clip
  • Graphic
  • GraphicsOverlay

Additional information

Note: the resulting geometry may be null if the envelope does not intersect the geometry being clipped.

Tags

analysis, clip, geometry

Sample Code

ClipGeometry.qml
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
// [WriteFile Name=ClipGeometry, Category=Geometry]
// [Legal]
// Copyright 2018 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.
// [Legal]

import QtQuick 2.6
import QtQuick.Controls 2.2
import Esri.ArcGISRuntime 100.15

Rectangle {
    id: rootRectangle
    clip: true
    width: 800
    height: 600

    MapView {
        id: mapView
        anchors.fill: parent

        Component.onCompleted: {
            // Set the focus on MapView to initially enable keyboard navigation
            forceActiveFocus();
        }

        Map {
            Basemap {
                initStyle: Enums.BasemapStyleArcGISTopographic
            }
            initialViewpoint: vc

            // Create the envelope for Colorado
            Envelope {
                id: coloradoGeometry
                xMax: -11362327.128340
                xMin: -12138232.018408
                yMin: 4441198.773776
                yMax: 5012861.290274
                spatialReference: SpatialReference {
                    wkid: 3857
                }
            }

            // Create the dotted outline for the clipping envelopes
            SimpleLineSymbol {
                id: redOutline
                style: Enums.SimpleLineSymbolStyleDash
                color: "#FFFF0000"
                width: 3
            }

            // Create the outline and fill for Colorado
            SimpleFillSymbol {
                id: coloradoFillSymbol
                color: "#220000FF"
                style: Enums.SimpleFillSymbolStyleSolid
                SimpleLineSymbol {
                    color: "#FF0000FF"
                    width: 2.0
                    style: Enums.SimpleFillSymbolStyleSolid
                }
            }
        }

        ViewpointCenter {
            id: vc
            center: Point {
                x: -11655182.595204
                y: 4741618.772994
                spatialReference: SpatialReference {
                    wkid: 3857
                }
            }
            targetScale: 15151632
        }

        // Create an envelope outside of Colorado
        Envelope {
            id: outsideEnvelope
            xMax: -11858344.321294
            xMin: -12201990.219681
            yMax: 5297071.577304
            yMin: 5147942.225174
            spatialReference: SpatialReference {
                wkid: 3857
            }
        }

        // Create an envelope intersecting Colorado
        Envelope {
            id: intersectingEnvelope
            xMax: -11962086.479298
            xMin: -12260345.183558
            yMax: 4566553.881363
            yMin: 4332053.378376
            spatialReference: SpatialReference {
                wkid: 3857
            }
        }

        // Create an envelope inside of Colorado
        Envelope {
            id: containedEnvelope
            xMax: -11431488.567009
            xMin: -11655182.595204
            yMax: 4741618.772994
            yMin: 4593570.068343
            spatialReference: SpatialReference {
                wkid: 3857
            }
        }

        // Create a graphics overlay for the Colorado geometry
        GraphicsOverlay {
            id: coloradoOverlay

            // Colorado
            Graphic {
                id: coloradoGraphic
                geometry: coloradoGeometry
                symbol: coloradoFillSymbol
            }
        }

        // Create a graphics overlay to contain the clipping envelopes
        GraphicsOverlay {
            id: envelopesOverlay

            // Outside envelope
            Graphic {
                id: outsideEnvelopeGraphic
                geometry: outsideEnvelope
                symbol: redOutline
            }

            // Intersecting envelope
            Graphic {
                id: intersectingEnvelopeGraphic
                geometry: intersectingEnvelope
                symbol: redOutline
            }

            // Contained envelope
            Graphic {
                id: containedEnvelopeGraphic
                geometry: containedEnvelope
                symbol: redOutline
            }
        }

        // Create a graphics overlay for the clipped graphics
        GraphicsOverlay {
            id: clippedAreasOverlay
        }
    }

    // Create a button that clips the geometry into the envelopes
    Button {
        id: clipButton
        anchors {
            horizontalCenter: parent.horizontalCenter
            bottom: parent.bottom
            bottomMargin: 25
        }
        text: "Clip"
        onClicked: {
            // Immediately hide the Colorado graphic to prevent overlap
            coloradoOverlay.visible = false;

            // Iterate through the clipping envelopes
            envelopesOverlay.graphics.forEach(graphic => {

                // Create a variable that contains the clip result, which is an envelope of the overlap between colorado and the current graphic
                const clippedGeometry = GeometryEngine.clip(coloradoGraphic.geometry, graphic.geometry.extent);
                if (clippedGeometry !== null) {

                    // Create a new graphic using the clip envelope, and fill it in with the colorado fill symbol
                    const clippedGraphic = ArcGISRuntimeEnvironment.createObject("Graphic", { geometry: clippedGeometry, symbol: coloradoFillSymbol });

                    // Add the new clipped graphic to the map
                    clippedAreasOverlay.graphics.append(clippedGraphic);
                }
            });

            // Only allow the clip action to fire once
            clipButton.enabled = false;
        }
    }
}

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