<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.