OGC WKT Format for Polygon From Sketch Widget ArcGIS JS SDK

Question

In the ArcGIS JS 4 SDK, there is a sketch widget that allows one to draw different shapes on the map of your choosing. I implemented this to an iframe on my site. However, I need code to help me get to the end goal. I have the iframe working and am able to draw shapes. See the code pen here.

I need to be able to get the polygon or shape that is drawn into the OGC WKT polygon representation. Similar to this...

POLYGON((-124.860+35.928,-121.762+36.489,-116.510+32.896,-122.124+31.776,-124.860+35.928))

I have the code pen showing what the iframe projects. It would be ideal to have the JS code to get the polygon out work on the JS file of the original project, in this case, a tools page.

A little background context this is to put the polygon shape into an HTTP request based on whatever polygon someone has in mind. How do I go about getting the OGC WKT polygon representation out of the sketch widget?

Would I do something like this?

This is the JavaScript code that runs the iframe, precisely what is in the code pen.

require([
            "esri/config",
            "esri/Map",
            "esri/views/MapView",
            "esri/widgets/ScaleBar",
            "esri/widgets/Sketch",
            "esri/Graphic",
            "esri/layers/GraphicsLayer",
            "esri/geometry/geometryEngine",
            "esri/Basemap",
        ], (esriConfig, Map, MapView, ScaleBar, Sketch, Graphic, GraphicsLayer, geometryEngine, Basemap) => {
            esriConfig.apiKey = "AAPKe1c05b9485c44780824e587fe012a020tUuqQMozRdQZiJa_DA9xrDKX6I5Dsl7F9KurI89k2tGEKbfrfdpoX6ek8Kh0rqIf";

            const graphicsLayer = new GraphicsLayer();

            const map = new Map({
                basemap: new Basemap({
                    portalItem: {
                        id: "979c6cc89af9449cbeb5342a439c6a76"  // Light Gray Canvas
                    }
                }),
                layers: [graphicsLayer]
            });

            const view = new MapView({
                container: "viewDiv",
                map: map,
                center: [-75.056, 38.540], // Longitude, latitude
                zoom: 5 // Zoom level
            });

            const sketch = new Sketch({
                layer: graphicsLayer,
                view: view,
                // graphic will be selected as soon as it is created
                creationMode: "update",
                availableCreateTools: ["polygon", "rectangle"],
                updateOnGraphicClick: true,
                visibleElements: {
                    createTools: {
                        point: false,
                        circle: false
                    },
                    selectionTools: {
                        "lasso-selection": false,
                        "rectangle-selection": false,
                    },
                    settingsMenu: false,
                    undoRedoMenu: false
                }
            });
            view.ui.add(sketch, "top-right");

            const scalebar = new ScaleBar({
                view: view,
                unit: "metric"
            });
            view.ui.add(scalebar, "bottom-right");

            const measurements = document.getElementById("measurements");
            view.ui.add(measurements, "manual");
        });

Answer 1

Conversion of ArcGiS graphics to WKT geometry can be done with the use of terraformer-arcgis-parser and terraformer-wkt-parser libraries:

<script src="https://cdnjs.cloudflare.com/ajax/libs/terraformer/1.0.12/terraformer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/terraformer-wkt-parser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/terraformer-arcgis-parser.min.js"></script>

ArcGIS graphics is first converted to GeojSON feature and then feature geometry is converted to WKT. Code for conversion could the look something like this:

sketch.on(["update"], onGraphicUpdate);

function onGraphicUpdate(evt) {
  var feature = Terraformer.ArcGIS.parse(evt.graphics[0]);
  var wkt = Terraformer.WKT.convert(feature.geometry);
  console.log(wkt);
}

Here is working JSFiddle: https://jsfiddle.net/TomazicM/kbpL3c4z/