Measurement in 3D | Sample | ArcGIS Maps SDK for JavaScript

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Measurement in 3D | Sample | ArcGIS Maps SDK for JavaScript</title>

    <style>
      html,
      body,
      #viewDiv {
        height: 100%;
        margin: 0;
      }

      #topbar {
        background: #fff;
        padding: 10px;
      }

      .action-button {
        font-size: 16px;
        background-color: transparent;
        border: 1px solid #d3d3d3;
        color: #6e6e6e;
        height: 32px;
        width: 32px;
        text-align: center;
        box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
      }

      .action-button:hover,
      .action-button:focus {
        background: #0079c1;
        color: #e4e4e4;
      }

      .active {
        background: #0079c1;
        color: #e4e4e4;
      }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/5.1/esri/themes/light/main.css" />
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.1/"></script>

    <script type="module">
      const [WebScene, SceneView, DirectLineMeasurement3D, AreaMeasurement3D, promiseUtils] = await $arcgis.import([
        "@arcgis/core/WebScene.js",
        "@arcgis/core/views/SceneView.js",
        "@arcgis/core/widgets/DirectLineMeasurement3D.js",
        "@arcgis/core/widgets/AreaMeasurement3D.js",
        "@arcgis/core/core/promiseUtils.js",
      ]);

      let activeWidget = null;

      // load a webscene
      const webscene = new WebScene({
        portalItem: {
          id: "5ce0de673d3b41a3bf3a217942211c4b",
        },
      });

      // create the scene view
      const view = new SceneView({
        container: "viewDiv",
        map: webscene,
      });

      // add the toolbar for the measurement widgets
      view.ui.add("topbar", "top-right");

      document.getElementById("distanceButton").addEventListener("click", (event) => {
        setActiveWidget(null);
        if (!event.target.classList.contains("active")) {
          setActiveWidget("distance");
        } else {
          setActiveButton(null);
        }
      });

      document.getElementById("areaButton").addEventListener("click", (event) => {
        setActiveWidget(null);
        if (!event.target.classList.contains("active")) {
          setActiveWidget("area");
        } else {
          setActiveButton(null);
        }
      });

      function setActiveWidget(type) {
        switch (type) {
          case "distance":
            activeWidget = new DirectLineMeasurement3D({
              view: view,
            });

            // skip the initial 'new measurement' button
            activeWidget.viewModel.start().catch((error) => {
              if (promiseUtils.isAbortError(error)) {
                return; // don't display abort errors
              }
              throw error; // throw other errors since they are of interest
            });

            view.ui.add(activeWidget, "top-right");
            setActiveButton(document.getElementById("distanceButton"));
            break;
          case "area":
            activeWidget = new AreaMeasurement3D({
              view: view,
            });

            // skip the initial 'new measurement' button
            activeWidget.viewModel.start().catch((error) => {
              if (promiseUtils.isAbortError(error)) {
                return; // don't display abort errors
              }
              throw error; // throw other errors since they are of interest
            });

            view.ui.add(activeWidget, "top-right");
            setActiveButton(document.getElementById("areaButton"));
            break;
          case null:
            if (activeWidget) {
              view.ui.remove(activeWidget);
              activeWidget.destroy();
              activeWidget = null;
            }
            break;
        }
      }

      function setActiveButton(selectedButton) {
        // focus the view to activate keyboard shortcuts for sketching
        view.focus();
        const elements = document.getElementsByClassName("active");
        for (let i = 0; i < elements.length; i++) {
          elements[i].classList.remove("active");
        }
        if (selectedButton) {
          selectedButton.classList.add("active");
        }
      }
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
    <div id="topbar">
      <button
        class="action-button esri-icon-measure-line"
        id="distanceButton"
        type="button"
        title="Measure distance between two points"
      ></button>
      <button class="action-button esri-icon-measure-area" id="areaButton" type="button" title="Measure area"></button>
    </div>
  </body>
</html>