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>