<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>ArcGIS JSAPI ESM Template</title>

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

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

</html>
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#viewDiv {
  height: 100%;
  width: 100%;
}

import ArcGISMap from "https://js.arcgis.com/4.19/@arcgis/core/Map.js";
import MapView from "https://js.arcgis.com/4.19/@arcgis/core/views/MapView.js";
import FeatureLayer from "https://js.arcgis.com/4.19/@arcgis/core/layers/FeatureLayer.js";
import Polyline from "https://js.arcgis.com/4.19/@arcgis/core/geometry/Polyline.js";
import { generalize, geodesicLength } from "https://js.arcgis.com/4.19/@arcgis/core/geometry/geometryEngine.js";

const geometry = {
  type: "polygon",
  rings: [
    [
      [-117.984989, 34.010189],
      [-117.985301, 34.009654],
      [-117.985462, 34.009378],
      [-117.985622, 34.009106],
      [-117.985781, 34.008831],
      [-117.98594, 34.008561],
      [-117.985941, 34.00856],
      [-117.986021, 34.008592],
      [-117.986319, 34.008714],
      [-117.98657, 34.008817],
      [-117.986838, 34.008926],
      [-117.986918, 34.008959],
      [-117.986919, 34.00896],
      [-117.986095, 34.010368],
      [-117.985965, 34.010588],
      [-117.984989, 34.010189]
    ]
  ]
};

const map = new ArcGISMap({
  basemap: "gray-vector"
});

const view = new MapView({
  container: "viewDiv",
  map,
  center: [-117.986, 34.009443],
  zoom: 16
});

view.when(() => {
  view.graphics.add({
    attributes: {},
    geometry,
    symbol: { type: "simple-fill" }
  });
  
  view.on("click", async (e) => {
    const {results} = await view.hitTest(e);
    const result = results.find(a => a.graphic.layer.type === "2d");
    // TODO
    const geom = generalize(result.graphic.geometry, 0.0001, false);
    toMidPoints(geom);
  });
});

function toMidPoints(geom) {
  const mids = [];
  const xys = geom.rings[0];
  const len = xys.length;
  for (let i = 0; i < len - 1; i++) {
    const paths = [xys[i], xys[i + 1]];
    const line = new Polyline({ paths });
    const len = geodesicLength(line, "feet");
    console.log(len);
    mids.push({
      attribute: {},
      geometry: line.extent.center,
      symbol: createTextSymbol(len.toFixed(2))
    });
  }
  view.graphics.addMany(mids);
}

function createTextSymbol(text) {
  return {
    type: "text",
    color: "white",
    haloColor: "black",
    haloSize: "2px",
    font: {
      size: 14,
      weight: "bold"
    },
    text: `${text}'`
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.