AnsweredAssumed Answered

How to get the coordinates of each vertex of a polygon?

Question asked by siyakubeka on May 6, 2020
Latest reply on May 6, 2020 by siyakubeka

Hi All

 

I am using a webmap. On it I can drop a point or draw a polygon. I can get the coordinates of the point. Now suppose I am drawing a polygon, how can I get the coordinates of each vertex? Please see my code below:

 

<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>

<title>GIS Map for CRM</title>

<link
rel="stylesheet"
href="https://js.arcgis.com/4.14/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.14/"></script>

<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
//alert("Project ID is equals to 0");
require(["esri/views/MapView",
"esri/WebMap", "esri/config",
"esri/widgets/Sketch",
"esri/layers/GraphicsLayer"],

function (MapView, WebMap, esriConfig, Sketch, GraphicsLayer) {

esriConfig.portalUrl = "https://portal.environment.gov.za/portal";
var webmap = new WebMap({
portalItem: {
id: "04582be14885483da48f29398960f653"
}
});

var graphicsLayer = new GraphicsLayer();

var view = new MapView({
map: webmap,
//zoom: 14,
container: "viewDiv"
});

//var symbol = {
// type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
// style: "circle",
// color: "blue",
// size: "8px", // pixels
// outline: { // autocasts as new SimpleLineSymbol()
// color: [255, 255, 0],
// width: 1 // points
// }
//};

webmap.layers.add(graphicsLayer);

var sketch = new Sketch({
layer: graphicsLayer,
view: view,
//symbol: symbol,
creationMode: "update",
//availableCreateTools: ["point"]
//container: "viewDiv"
});

view.ui.add(sketch, {
position: "top-right"
});

//Listen to sketch widget's create event.

sketch.on('create', function (event) {
// check if the create event's state has changed to complete indicating
// the graphic create operation is completed.
if (event.state === "complete") {

if (view.zoom >= 11) {
let gra = event.graphic.clone();
event.graphic.layer.removeAll();
gra.symbol.color = "red";
gra.layer.add(gra);
console.log(view.zoom);
console.log("X = ", gra.geometry.x);
console.log("Y = ", gra.geometry.y);
console.log("Lat = ", event.graphic.geometry.latitude);
console.log("Long = ", event.graphic.geometry.longitude);
//lati = event.graphic.geometry.latitude;
//longi = event.graphic.geometry.longitude;
zoomLevel = view.zoom;
debugger;
}
else {
alert("please zoom in");
event.graphic.layer.remove(event.graphic);
}
}
});
});
</script>
</head>

<body>
<div id="viewDiv"></div>
</body>
</html>

Outcomes