Search code examples
gisarcgisarcgis-js-api

Get coodinate from each point of the polygon on ArcGIS?


I'm working with the ArcGIS API for JavaScript. I wondering is there any features I can use to get the coordinates of each vertex after I draw using the Sketch tool in the ArcGiS API?

Update

I try to use the webmercator method but it keep appear this error to me "webMercatorUtils.webMercatorToGeographic is not a function"

this is the code i written to parse it.

 sketch.on("create", (e: __esri.SketchCreateEvent) => {

    if (e.state === "complete") {
      // this.rings = e.graphic.geometry.toJSON().rings.webMercatorUtils.webMercatorToGeographic();

      this.rings = webMercatorUtils.webMercatorToGeographic(e.graphic.geometry);
    }
  });

Error

Error


Solution

  • Sketch widget has a series of events that you can bind to get the information you are looking for.

    In your case, use create event.

    ArcGIS API - Sketch

    Take a look at this simple example I put for you.

    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
      <title>Sketch</title>
      <style>
        html, body, #viewDiv {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
        }
      </style>
    
      <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/css/main.css">
      <script src="https://js.arcgis.com/4.21/"></script>
    
      <script>
        require([
            "esri/widgets/Sketch",
            "esri/Map",
            "esri/layers/GraphicsLayer",
            "esri/views/MapView"
          ], (Sketch, Map, GraphicsLayer, MapView) => {
            const graphicsLayer = new GraphicsLayer();
    
            const map = new Map({
              basemap: "topo-vector",
              layers: [graphicsLayer]
            });
    
            const view = new MapView({
              container: "viewDiv",
              map: map,
              zoom: 5,
              center: [90, 45]
            });
    
            view.when(() => {
              const sketch = new Sketch({
                layer: graphicsLayer,
                view: view
              });
              sketch.on("create", function(event) {
                if (event.state === "complete") {
                  console.log(event.graphic.geometry.toJSON());
                }
              });
              view.ui.add(sketch, "top-right");
            });
          });
      </script>
    </head>
    <body>
      <div id="viewDiv"></div>
    </body>
    </html>

    UPDATE

    Here is the same code with the addition to convert the geometry from WebMercator (wkid 102100 or 3857) to geographics (wkid 4326)

    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
      <title>Sketch</title>
      <style>
        html, body, #viewDiv {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
        }
      </style>
    
      <link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/css/main.css">
      <script src="https://js.arcgis.com/4.21/"></script>
    
      <script>
        require([
            "esri/widgets/Sketch",
            "esri/Map",
            "esri/layers/GraphicsLayer",
            "esri/views/MapView",
            "esri/geometry/support/webMercatorUtils"
          ], (Sketch, Map, GraphicsLayer, MapView, webMercatorUtils) => {
            const graphicsLayer = new GraphicsLayer();
    
            const map = new Map({
              basemap: "topo-vector",
              layers: [graphicsLayer]
            });
    
            const view = new MapView({
              container: "viewDiv",
              map: map,
              zoom: 5,
              center: [90, 45]
            });
    
            view.when(() => {
              const sketch = new Sketch({
                layer: graphicsLayer,
                view: view
              });
              sketch.on("create", function(event) {
                if (event.state === "complete") {
                  console.log(event.graphic.geometry.toJSON());
                  console.log(webMercatorUtils.webMercatorToGeographic(event.graphic.geometry).toJSON());
                }
              });
              view.ui.add(sketch, "top-right");
            });
          });
      </script>
    </head>
    <body>
      <div id="viewDiv"></div>
    </body>
    </html>