Nearest vertex

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
// [WriteFile Name=NearestVertex, Category=Geometry]
// [Legal]
// Copyright 2020 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.4
import Esri.ArcGISRuntime 100.15

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

    MapView {
        id: mapView
        anchors.fill: parent

        GraphicsOverlay {
            id: graphicsOverlay
        }

        Graphic {
            id: polygonGraphic
            SimpleFillSymbol {
                style: Enums.SimpleFillSymbolStyleForwardDiagonal
                color: "lime"
                SimpleLineSymbol {
                    style: Enums.SimpleLineSymbolStyleSolid
                    color: "lime"
                    width: 2.0
                }
            }
        }

        PolygonBuilder {
            id: polygonBuilder
            SpatialReference { wkid: 3857 }
        }

        Graphic {
            id:  clickedPointGraphic
            SimpleMarkerSymbol {
                style: Enums.SimpleMarkerSymbolStyleX
                color: "yellow"
                size: 15
            }
        }

        Graphic {
            id: nearestVertexGraphic
            SimpleMarkerSymbol {
                style: Enums.SimpleMarkerSymbolStyleCircle
                color: "blue"
                size: 15
            }
        }

        Graphic {
            id: nearestCoordinateGraphic
            SimpleMarkerSymbol {
                style: Enums.SimpleMarkerSymbolStyleDiamond
                color: "red"
                size: 10
            }
        }

        Component.onCompleted: {
            // create polygon in middle of Atlantic Ocean
            polygonBuilder.addPointXY(-5991501.677830, 5599295.131468);
            polygonBuilder.addPointXY(-6928550.398185, 2087936.739807);
            polygonBuilder.addPointXY(-3149463.800709, 1840803.011362);
            polygonBuilder.addPointXY(-1563689.043184, 3714900.452072);
            polygonBuilder.addPointXY(-3180355.516764, 5619889.608838);
            polygonGraphic.geometry = polygonBuilder.geometry;

            // append graphics to overlay
            graphicsOverlay.graphics.append(polygonGraphic);
            graphicsOverlay.graphics.append(clickedPointGraphic);
            graphicsOverlay.graphics.append(nearestVertexGraphic);
            graphicsOverlay.graphics.append(nearestCoordinateGraphic);

            // Set the focus on MapView to initially enable keyboard navigation
            forceActiveFocus();
        }

        Map {
            Basemap {
                initStyle: Enums.BasemapStyleArcGISTopographic
            }

            ViewpointCenter {
                Point {
                    x: -4487263.495911
                    y: 3699176.480377
                    SpatialReference {wkid: 3857}
                }
                targetScale: 50000000
            }
        }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            const clickedPoint = mapView.screenToLocation(mouseX, mouseY);
            // normalizing the geometry before performing geometric operations
            const normalizedPoint = GeometryEngine.normalizeCentralMeridian(clickedPoint);
            clickedPointGraphic.geometry = normalizedPoint;

            const nearestVertexPoint = GeometryEngine.nearestVertex(polygonBuilder.geometry, normalizedPoint);
            nearestVertexGraphic.geometry = nearestVertexPoint.coordinate;

            const nearestCoordinateResult = GeometryEngine.nearestCoordinate(polygonBuilder.geometry, normalizedPoint);
            nearestCoordinateGraphic.geometry = nearestCoordinateResult.coordinate;

            distancesLabel.text = `Vertex distance: ${(nearestVertexPoint.distance/1000.0).toFixed()} km
Coordinate distance: ${(nearestCoordinateResult.distance/1000.0).toFixed()} km` ;
        }
    }

    // create box to display label with distances to nearest vertex and coordinate
    Rectangle
    {
        id: labelRectangle
        width: childrenRect.width
        height: childrenRect.height
        anchors {
            top: parent.top
            left: parent.left
        }
        visible: true
        color: "white"
        border.color: "black"
        border.width: 2
        Label {
            id: distancesLabel
            font.pointSize: 14
            padding: 5
            text: "Vertex Distance: 0 km\nCoordinate distance: 0 km"
        }
    }
}