查找长度和面积

了解如何计算几何的长度和面积。

您可使用 geometryEngine 计算线的长度并确定面的面积。测量值取决于为几何定义的坐标系 ( 或空间参考)。如果几何的空间参考是 Web Mercator (3857) 或 WGS84 (4326)，则应使用测地线计算以考虑地球的曲率。如果空间参考与 Web Mercator (3857) 或 WGS84 (4326) 不同，则应使用基于欧氏距离的平面测量。

在本教程中，您将使用草绘微件在视图上绘制图形，并使用 geometryEngine 来计算测地线和平面长度及面积，以查看两个测量值之间的差异。

步骤

创建新 Pen

要开始使用，请完成显示地图教程或使用此 Pen。

设置 HTML

创建 measurements div 以显示计算结果，并添加一些 CSS 样式来设置字体大小和边距。

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Get length and area</title>
    <style>
      html,
      body,

      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

      #measurements {
        padding: 4px 8px;
        font-size: 16px;
        bottom: 15px;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%,-50%);
      }

    </style>

  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>
    <script>
      require([
        "geoscene/config",
        "geoscene/Map",
        "geoscene/views/MapView",

        "geoscene/widgets/ScaleBar",
        "geoscene/widgets/Sketch",
        "geoscene/Graphic",
        "geoscene/layers/GraphicsLayer",
        "geoscene/geometry/geometryEngine",

      ], (
        geosceneConfig,
        Map,
        MapView,

        ScaleBar,
        Sketch,
        Graphic,
        GraphicsLayer,
        geometryEngine,

      ) => {

        const map = new Map({
          basemap: "tianditu-vector", // 底图图层服务
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,

          center: [-10, 30],
          zoom: 3,

        });

        const scalebar = new ScaleBar({
          view: view,
          unit: "metric"
        });

        view.ui.add(scalebar, "bottom-right");

        const graphicsLayer = new GraphicsLayer();
        map.add(graphicsLayer);

        const sketch = new Sketch({
          layer: graphicsLayer,
          view: view,
          availableCreateTools: ["polyline", "polygon", "rectangle"],
          creationMode: "update",
          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 measurements = document.getElementById("measurements");
        view.ui.add(measurements, "manual");

        const polygon = {
            type: "polygon",
            spatialReference: {
              wkid: 3857,
            },
            rings: [
              [
                [-4508069.082189632, 3599936.936171892],
                [-4508069.082189632, 5478453.343307884],
                [-2629552.6750536393, 5478453.343307884],
                [-2629552.6750536393, 3599936.936171892],
                [-4508069.082189632, 3599936.936171892],
              ],
            ],
          };

          const simplePolygonSymbol = {
            type: "simple-fill",
            outline: {
              color: [200, 0, 0],
              width: 2,
            },
          };

          const polygonGraphic = new Graphic({
            geometry: polygon,
            symbol: simplePolygonSymbol
          });

        graphicsLayer.add(polygonGraphic);

        view.when(() => {
          sketch.update(polygonGraphic);
          getArea(polygonGraphic.geometry);
        });

        sketch.on("update", (e) => {
          const geometry = e.graphics[0].geometry;

          if (e.state === "start") {
            switchType(geometry);
          }

          if (e.state === "complete") {
            graphicsLayer.remove(graphicsLayer.graphics.getItemAt(0));
            measurements.innerHTML = null;
          }

          if (
            e.toolEventInfo &&
            (e.toolEventInfo.type === "scale-stop" ||
              e.toolEventInfo.type === "reshape-stop" ||
              e.toolEventInfo.type === "move-stop")
          ) {
            switchType(geometry);
          }

        });

        function getArea(polygon) {
          const geodesicArea = geometryEngine.geodesicArea(polygon, "square-kilometers");
          const planarArea = geometryEngine.planarArea(polygon, "square-kilometers");

          measurements.innerHTML =
          "<b>Geodesic area</b>:  " + geodesicArea.toFixed(2) + " km\xB2" + " |   <b>Planar area</b>: " + planarArea.toFixed(2) + "  km\xB2";

        }

        function getLength(line) {
          const geodesicLength = geometryEngine.geodesicLength(line, "kilometers");
          const planarLength = geometryEngine.planarLength(line, "kilometers");

          measurements.innerHTML =
            "<b>Geodesic length</b>:  " + geodesicLength.toFixed(2) + " km" + " |   <b>Planar length</b>: " + planarLength.toFixed(2) + "  km";

        }

        function switchType(geom) {
          switch (geom.type) {
            case "polygon":
              getArea(geom);
              break;
            case "polyline":
              getLength(geom);
              break;
            default:
              console.log("No value found");
          }
        }

      });
    </script>
  </head>
  <body>
    <div id="viewDiv">

      <div id="measurements" class="geoscene-widget">

    </div>
  </div>
  </body>
</html>

添加模块

在 require 语句中，添加模块。

GeoScene API for JavaScript 使用 AMD 模块。require 函数用于加载模块，以便它们可在主 function 中使用。保持模块引用和函数参数的顺序相同很重要。

Add line.Add line.Add line.Add line.Add line.Change lineChange lineChange lineChange lineChange line
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Get length and area</title>
    <style>
      html,
      body,

      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

      #measurements {
        padding: 4px 8px;
        font-size: 16px;
        bottom: 15px;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%,-50%);
      }

    </style>

  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>
    <script>
      require([
        "geoscene/config",
        "geoscene/Map",
        "geoscene/views/MapView",

        "geoscene/widgets/ScaleBar",
        "geoscene/widgets/Sketch",
        "geoscene/Graphic",
        "geoscene/layers/GraphicsLayer",
        "geoscene/geometry/geometryEngine",

      ], (
        geosceneConfig,
        Map,
        MapView,

        ScaleBar,
        Sketch,
        Graphic,
        GraphicsLayer,
        geometryEngine,

      ) => {

        const map = new Map({
          basemap: "tianditu-vector", // 底图图层服务
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,

          center: [-10, 30],
          zoom: 3,

        });

        const scalebar = new ScaleBar({
          view: view,
          unit: "metric"
        });

        view.ui.add(scalebar, "bottom-right");

        const graphicsLayer = new GraphicsLayer();
        map.add(graphicsLayer);

        const sketch = new Sketch({
          layer: graphicsLayer,
          view: view,
          availableCreateTools: ["polyline", "polygon", "rectangle"],
          creationMode: "update",
          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 measurements = document.getElementById("measurements");
        view.ui.add(measurements, "manual");

        const polygon = {
            type: "polygon",
            spatialReference: {
              wkid: 3857,
            },
            rings: [
              [
                [-4508069.082189632, 3599936.936171892],
                [-4508069.082189632, 5478453.343307884],
                [-2629552.6750536393, 5478453.343307884],
                [-2629552.6750536393, 3599936.936171892],
                [-4508069.082189632, 3599936.936171892],
              ],
            ],
          };

          const simplePolygonSymbol = {
            type: "simple-fill",
            outline: {
              color: [200, 0, 0],
              width: 2,
            },
          };

          const polygonGraphic = new Graphic({
            geometry: polygon,
            symbol: simplePolygonSymbol
          });

        graphicsLayer.add(polygonGraphic);

        view.when(() => {
          sketch.update(polygonGraphic);
          getArea(polygonGraphic.geometry);
        });

        sketch.on("update", (e) => {
          const geometry = e.graphics[0].geometry;

          if (e.state === "start") {
            switchType(geometry);
          }

          if (e.state === "complete") {
            graphicsLayer.remove(graphicsLayer.graphics.getItemAt(0));
            measurements.innerHTML = null;
          }

          if (
            e.toolEventInfo &&
            (e.toolEventInfo.type === "scale-stop" ||
              e.toolEventInfo.type === "reshape-stop" ||
              e.toolEventInfo.type === "move-stop")
          ) {
            switchType(geometry);
          }

        });

        function getArea(polygon) {
          const geodesicArea = geometryEngine.geodesicArea(polygon, "square-kilometers");
          const planarArea = geometryEngine.planarArea(polygon, "square-kilometers");

          measurements.innerHTML =
          "<b>Geodesic area</b>:  " + geodesicArea.toFixed(2) + " km\xB2" + " |   <b>Planar area</b>: " + planarArea.toFixed(2) + "  km\xB2";

        }

        function getLength(line) {
          const geodesicLength = geometryEngine.geodesicLength(line, "kilometers");
          const planarLength = geometryEngine.planarLength(line, "kilometers");

          measurements.innerHTML =
            "<b>Geodesic length</b>:  " + geodesicLength.toFixed(2) + " km" + " |   <b>Planar length</b>: " + planarLength.toFixed(2) + "  km";

        }

        function switchType(geom) {
          switch (geom.type) {
            case "polygon":
              getArea(geom);
              break;
            case "polyline":
              getLength(geom);
              break;
            default:
              console.log("No value found");
          }
        }

      });
    </script>
  </head>
  <body>
    <div id="viewDiv">

      <div id="measurements" class="geoscene-widget">

    </div>
  </div>
  </body>
</html>

重定位并添加比例尺

ScaleBar 微件将在地图上显示比例尺。您可以选择公制或非公制值。例如，如果指定 metric，则会根据比例显示公里或米。

更改 view 的 center 和 zoom 级别。

Change lineChange line
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Get length and area</title>
    <style>
      html,
      body,

      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

      #measurements {
        padding: 4px 8px;
        font-size: 16px;
        bottom: 15px;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%,-50%);
      }

    </style>

  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>
    <script>
      require([
        "geoscene/config",
        "geoscene/Map",
        "geoscene/views/MapView",

        "geoscene/widgets/ScaleBar",
        "geoscene/widgets/Sketch",
        "geoscene/Graphic",
        "geoscene/layers/GraphicsLayer",
        "geoscene/geometry/geometryEngine",

      ], (
        geosceneConfig,
        Map,
        MapView,

        ScaleBar,
        Sketch,
        Graphic,
        GraphicsLayer,
        geometryEngine,

      ) => {

        const map = new Map({
          basemap: "tianditu-vector", // Basemap layer service
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,

          center: [-10, 30],
          zoom: 3,

        });

        const scalebar = new ScaleBar({
          view: view,
          unit: "metric"
        });

        view.ui.add(scalebar, "bottom-right");

        const graphicsLayer = new GraphicsLayer();
        map.add(graphicsLayer);

        const sketch = new Sketch({
          layer: graphicsLayer,
          view: view,
          availableCreateTools: ["polyline", "polygon", "rectangle"],
          creationMode: "update",
          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 measurements = document.getElementById("measurements");
        view.ui.add(measurements, "manual");

        const polygon = {
            type: "polygon",
            spatialReference: {
              wkid: 3857,
            },
            rings: [
              [
                [-4508069.082189632, 3599936.936171892],
                [-4508069.082189632, 5478453.343307884],
                [-2629552.6750536393, 5478453.343307884],
                [-2629552.6750536393, 3599936.936171892],
                [-4508069.082189632, 3599936.936171892],
              ],
            ],
          };

          const simplePolygonSymbol = {
            type: "simple-fill",
            outline: {
              color: [200, 0, 0],
              width: 2,
            },
          };

          const polygonGraphic = new Graphic({
            geometry: polygon,
            symbol: simplePolygonSymbol
          });

        graphicsLayer.add(polygonGraphic);

        view.when(() => {
          sketch.update(polygonGraphic);
          getArea(polygonGraphic.geometry);
        });

        sketch.on("update", (e) => {
          const geometry = e.graphics[0].geometry;

          if (e.state === "start") {
            switchType(geometry);
          }

          if (e.state === "complete") {
            graphicsLayer.remove(graphicsLayer.graphics.getItemAt(0));
            measurements.innerHTML = null;
          }

          if (
            e.toolEventInfo &&
            (e.toolEventInfo.type === "scale-stop" ||
              e.toolEventInfo.type === "reshape-stop" ||
              e.toolEventInfo.type === "move-stop")
          ) {
            switchType(geometry);
          }

        });

        function getArea(polygon) {
          const geodesicArea = geometryEngine.geodesicArea(polygon, "square-kilometers");
          const planarArea = geometryEngine.planarArea(polygon, "square-kilometers");

          measurements.innerHTML =
          "<b>Geodesic area</b>:  " + geodesicArea.toFixed(2) + " km\xB2" + " |   <b>Planar area</b>: " + planarArea.toFixed(2) + "  km\xB2";

        }

        function getLength(line) {
          const geodesicLength = geometryEngine.geodesicLength(line, "kilometers");
          const planarLength = geometryEngine.planarLength(line, "kilometers");

          measurements.innerHTML =
            "<b>Geodesic length</b>:  " + geodesicLength.toFixed(2) + " km" + " |   <b>Planar length</b>: " + planarLength.toFixed(2) + "  km";

        }

        function switchType(geom) {
          switch (geom.type) {
            case "polygon":
              getArea(geom);
              break;
            case "polyline":
              getLength(geom);
              break;
            default:
              console.log("No value found");
          }
        }

      });
    </script>
  </head>
  <body>
    <div id="viewDiv">

      <div id="measurements" class="geoscene-widget">

    </div>
  </div>
  </body>
</html>

创建 scalebar 并将 view 参数设置为 view。将 unit 指定为 metric。

Add line.Add line.Add line.Add line.
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Get length and area</title>
    <style>
      html,
      body,

      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

      #measurements {
        padding: 4px 8px;
        font-size: 16px;
        bottom: 15px;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%,-50%);
      }

    </style>

  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>
    <script>
      require([
        "geoscene/config",
        "geoscene/Map",
        "geoscene/views/MapView",

        "geoscene/widgets/ScaleBar",
        "geoscene/widgets/Sketch",
        "geoscene/Graphic",
        "geoscene/layers/GraphicsLayer",
        "geoscene/geometry/geometryEngine",

      ], (
        geosceneConfig,
        Map,
        MapView,

        ScaleBar,
        Sketch,
        Graphic,
        GraphicsLayer,
        geometryEngine,

      ) => {

        const map = new Map({
          basemap: "tianditu-vector", // Basemap layer service
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,

          center: [-10, 30],
          zoom: 3,

        });

        const scalebar = new ScaleBar({
          view: view,
          unit: "metric"
        });

        view.ui.add(scalebar, "bottom-right");

        const graphicsLayer = new GraphicsLayer();
        map.add(graphicsLayer);

        const sketch = new Sketch({
          layer: graphicsLayer,
          view: view,
          availableCreateTools: ["polyline", "polygon", "rectangle"],
          creationMode: "update",
          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 measurements = document.getElementById("measurements");
        view.ui.add(measurements, "manual");

        const polygon = {
            type: "polygon",
            spatialReference: {
              wkid: 3857,
            },
            rings: [
              [
                [-4508069.082189632, 3599936.936171892],
                [-4508069.082189632, 5478453.343307884],
                [-2629552.6750536393, 5478453.343307884],
                [-2629552.6750536393, 3599936.936171892],
                [-4508069.082189632, 3599936.936171892],
              ],
            ],
          };

          const simplePolygonSymbol = {
            type: "simple-fill",
            outline: {
              color: [200, 0, 0],
              width: 2,
            },
          };

          const polygonGraphic = new Graphic({
            geometry: polygon,
            symbol: simplePolygonSymbol
          });

        graphicsLayer.add(polygonGraphic);

        view.when(() => {
          sketch.update(polygonGraphic);
          getArea(polygonGraphic.geometry);
        });

        sketch.on("update", (e) => {
          const geometry = e.graphics[0].geometry;

          if (e.state === "start") {
            switchType(geometry);
          }

          if (e.state === "complete") {
            graphicsLayer.remove(graphicsLayer.graphics.getItemAt(0));
            measurements.innerHTML = null;
          }

          if (
            e.toolEventInfo &&
            (e.toolEventInfo.type === "scale-stop" ||
              e.toolEventInfo.type === "reshape-stop" ||
              e.toolEventInfo.type === "move-stop")
          ) {
            switchType(geometry);
          }

        });

        function getArea(polygon) {
          const geodesicArea = geometryEngine.geodesicArea(polygon, "square-kilometers");
          const planarArea = geometryEngine.planarArea(polygon, "square-kilometers");

          measurements.innerHTML =
          "<b>Geodesic area</b>:  " + geodesicArea.toFixed(2) + " km\xB2" + " |   <b>Planar area</b>: " + planarArea.toFixed(2) + "  km\xB2";

        }

        function getLength(line) {
          const geodesicLength = geometryEngine.geodesicLength(line, "kilometers");
          const planarLength = geometryEngine.planarLength(line, "kilometers");

          measurements.innerHTML =
            "<b>Geodesic length</b>:  " + geodesicLength.toFixed(2) + " km" + " |   <b>Planar length</b>: " + planarLength.toFixed(2) + "  km";

        }

        function switchType(geom) {
          switch (geom.type) {
            case "polygon":
              getArea(geom);
              break;
            case "polyline":
              getLength(geom);
              break;
            default:
              console.log("No value found");
          }
        }

      });
    </script>
  </head>
  <body>
    <div id="viewDiv">

      <div id="measurements" class="geoscene-widget">

    </div>
  </div>
  </body>
</html>

将 scalebar 添加至 view 的 bottom-right。

Add line.
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Get length and area</title>
    <style>
      html,
      body,

      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

      #measurements {
        padding: 4px 8px;
        font-size: 16px;
        bottom: 15px;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%,-50%);
      }

    </style>

  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>
    <script>
      require([
        "geoscene/config",
        "geoscene/Map",
        "geoscene/views/MapView",

        "geoscene/widgets/ScaleBar",
        "geoscene/widgets/Sketch",
        "geoscene/Graphic",
        "geoscene/layers/GraphicsLayer",
        "geoscene/geometry/geometryEngine",

      ], (
        geosceneConfig,
        Map,
        MapView,

        ScaleBar,
        Sketch,
        Graphic,
        GraphicsLayer,
        geometryEngine,

      ) => {

        const map = new Map({
          basemap: "tianditu-vector", // Basemap layer service
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,

          center: [-10, 30],
          zoom: 3,

        });

        const scalebar = new ScaleBar({
          view: view,
          unit: "metric"
        });

        view.ui.add(scalebar, "bottom-right");

        const graphicsLayer = new GraphicsLayer();
        map.add(graphicsLayer);

        const sketch = new Sketch({
          layer: graphicsLayer,
          view: view,
          availableCreateTools: ["polyline", "polygon", "rectangle"],
          creationMode: "update",
          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 measurements = document.getElementById("measurements");
        view.ui.add(measurements, "manual");

        const polygon = {
            type: "polygon",
            spatialReference: {
              wkid: 3857,
            },
            rings: [
              [
                [-4508069.082189632, 3599936.936171892],
                [-4508069.082189632, 5478453.343307884],
                [-2629552.6750536393, 5478453.343307884],
                [-2629552.6750536393, 3599936.936171892],
                [-4508069.082189632, 3599936.936171892],
              ],
            ],
          };

          const simplePolygonSymbol = {
            type: "simple-fill",
            outline: {
              color: [200, 0, 0],
              width: 2,
            },
          };

          const polygonGraphic = new Graphic({
            geometry: polygon,
            symbol: simplePolygonSymbol
          });

        graphicsLayer.add(polygonGraphic);

        view.when(() => {
          sketch.update(polygonGraphic);
          getArea(polygonGraphic.geometry);
        });

        sketch.on("update", (e) => {
          const geometry = e.graphics[0].geometry;

          if (e.state === "start") {
            switchType(geometry);
          }

          if (e.state === "complete") {
            graphicsLayer.remove(graphicsLayer.graphics.getItemAt(0));
            measurements.innerHTML = null;
          }

          if (
            e.toolEventInfo &&
            (e.toolEventInfo.type === "scale-stop" ||
              e.toolEventInfo.type === "reshape-stop" ||
              e.toolEventInfo.type === "move-stop")
          ) {
            switchType(geometry);
          }

        });

        function getArea(polygon) {
          const geodesicArea = geometryEngine.geodesicArea(polygon, "square-kilometers");
          const planarArea = geometryEngine.planarArea(polygon, "square-kilometers");

          measurements.innerHTML =
          "<b>Geodesic area</b>:  " + geodesicArea.toFixed(2) + " km\xB2" + " |   <b>Planar area</b>: " + planarArea.toFixed(2) + "  km\xB2";

        }

        function getLength(line) {
          const geodesicLength = geometryEngine.geodesicLength(line, "kilometers");
          const planarLength = geometryEngine.planarLength(line, "kilometers");

          measurements.innerHTML =
            "<b>Geodesic length</b>:  " + geodesicLength.toFixed(2) + " km" + " |   <b>Planar length</b>: " + planarLength.toFixed(2) + "  km";

        }

        function switchType(geom) {
          switch (geom.type) {
            case "polygon":
              getArea(geom);
              break;
            case "polyline":
              getLength(geom);
              break;
            default:
              console.log("No value found");
          }
        }

      });
    </script>
  </head>
  <body>
    <div id="viewDiv">

      <div id="measurements" class="geoscene-widget">

    </div>
  </div>
  </body>
</html>

运行应用程序以验证 center 和 zoom 级别中的更改。scalebar 应显示在视图的底部。

Sketch 微件提供的 UI 允许您在 MapView 中创建和更新图形。

创建 graphicsLayer 以将 GraphicsLayer 添加到 map。

Add line.Add line.
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Get length and area</title>
    <style>
      html,
      body,

      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

      #measurements {
        padding: 4px 8px;
        font-size: 16px;
        bottom: 15px;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%,-50%);
      }

    </style>

  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>
    <script>
      require([
        "geoscene/config",
        "geoscene/Map",
        "geoscene/views/MapView",

        "geoscene/widgets/ScaleBar",
        "geoscene/widgets/Sketch",
        "geoscene/Graphic",
        "geoscene/layers/GraphicsLayer",
        "geoscene/geometry/geometryEngine",

      ], (
        geosceneConfig,
        Map,
        MapView,

        ScaleBar,
        Sketch,
        Graphic,
        GraphicsLayer,
        geometryEngine,

      ) => {

        const map = new Map({
          basemap: "tianditu-vector", // Basemap layer service
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,

          center: [-10, 30],
          zoom: 3,

        });

        const scalebar = new ScaleBar({
          view: view,
          unit: "metric"
        });

        view.ui.add(scalebar, "bottom-right");

        const graphicsLayer = new GraphicsLayer();
        map.add(graphicsLayer);

        const sketch = new Sketch({
          layer: graphicsLayer,
          view: view,
          availableCreateTools: ["polyline", "polygon", "rectangle"],
          creationMode: "update",
          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 measurements = document.getElementById("measurements");
        view.ui.add(measurements, "manual");

        const polygon = {
            type: "polygon",
            spatialReference: {
              wkid: 3857,
            },
            rings: [
              [
                [-4508069.082189632, 3599936.936171892],
                [-4508069.082189632, 5478453.343307884],
                [-2629552.6750536393, 5478453.343307884],
                [-2629552.6750536393, 3599936.936171892],
                [-4508069.082189632, 3599936.936171892],
              ],
            ],
          };

          const simplePolygonSymbol = {
            type: "simple-fill",
            outline: {
              color: [200, 0, 0],
              width: 2,
            },
          };

          const polygonGraphic = new Graphic({
            geometry: polygon,
            symbol: simplePolygonSymbol
          });

        graphicsLayer.add(polygonGraphic);

        view.when(() => {
          sketch.update(polygonGraphic);
          getArea(polygonGraphic.geometry);
        });

        sketch.on("update", (e) => {
          const geometry = e.graphics[0].geometry;

          if (e.state === "start") {
            switchType(geometry);
          }

          if (e.state === "complete") {
            graphicsLayer.remove(graphicsLayer.graphics.getItemAt(0));
            measurements.innerHTML = null;
          }

          if (
            e.toolEventInfo &&
            (e.toolEventInfo.type === "scale-stop" ||
              e.toolEventInfo.type === "reshape-stop" ||
              e.toolEventInfo.type === "move-stop")
          ) {
            switchType(geometry);
          }

        });

        function getArea(polygon) {
          const geodesicArea = geometryEngine.geodesicArea(polygon, "square-kilometers");
          const planarArea = geometryEngine.planarArea(polygon, "square-kilometers");

          measurements.innerHTML =
          "<b>Geodesic area</b>:  " + geodesicArea.toFixed(2) + " km\xB2" + " |   <b>Planar area</b>: " + planarArea.toFixed(2) + "  km\xB2";

        }

        function getLength(line) {
          const geodesicLength = geometryEngine.geodesicLength(line, "kilometers");
          const planarLength = geometryEngine.planarLength(line, "kilometers");

          measurements.innerHTML =
            "<b>Geodesic length</b>:  " + geodesicLength.toFixed(2) + " km" + " |   <b>Planar length</b>: " + planarLength.toFixed(2) + "  km";

        }

        function switchType(geom) {
          switch (geom.type) {
            case "polygon":
              getArea(geom);
              break;
            case "polyline":
              getLength(geom);
              break;
            default:
              console.log("No value found");
          }
        }

      });
    </script>
  </head>
  <body>
    <div id="viewDiv">

      <div id="measurements" class="geoscene-widget">

    </div>
  </div>
  </body>
</html>

创建 sketch 微件。将 layer 参数设置为 graphicsLayer。使用微件绘制的任何几何都将添加到 graphicsLayer 中。通过将 availableCreateTools 设置为仅显示 polyline、polygon 和 rectangle 选项并禁用在 visibleElements 和 selectionTools 属性中找到的其他默认设置来限制微件上的要素。

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Get length and area</title>
    <style>
      html,
      body,

      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

      #measurements {
        padding: 4px 8px;
        font-size: 16px;
        bottom: 15px;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%,-50%);
      }

    </style>

  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>
    <script>
      require([
        "geoscene/config",
        "geoscene/Map",
        "geoscene/views/MapView",

        "geoscene/widgets/ScaleBar",
        "geoscene/widgets/Sketch",
        "geoscene/Graphic",
        "geoscene/layers/GraphicsLayer",
        "geoscene/geometry/geometryEngine",

      ], (
        geosceneConfig,
        Map,
        MapView,

        ScaleBar,
        Sketch,
        Graphic,
        GraphicsLayer,
        geometryEngine,

      ) => {

        const map = new Map({
          basemap: "tianditu-vector", // Basemap layer service
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,

          center: [-10, 30],
          zoom: 3,

        });

        const scalebar = new ScaleBar({
          view: view,
          unit: "metric"
        });

        view.ui.add(scalebar, "bottom-right");

        const graphicsLayer = new GraphicsLayer();
        map.add(graphicsLayer);

        const sketch = new Sketch({
          layer: graphicsLayer,
          view: view,
          availableCreateTools: ["polyline", "polygon", "rectangle"],
          creationMode: "update",
          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 measurements = document.getElementById("measurements");
        view.ui.add(measurements, "manual");

        const polygon = {
            type: "polygon",
            spatialReference: {
              wkid: 3857,
            },
            rings: [
              [
                [-4508069.082189632, 3599936.936171892],
                [-4508069.082189632, 5478453.343307884],
                [-2629552.6750536393, 5478453.343307884],
                [-2629552.6750536393, 3599936.936171892],
                [-4508069.082189632, 3599936.936171892],
              ],
            ],
          };

          const simplePolygonSymbol = {
            type: "simple-fill",
            outline: {
              color: [200, 0, 0],
              width: 2,
            },
          };

          const polygonGraphic = new Graphic({
            geometry: polygon,
            symbol: simplePolygonSymbol
          });

        graphicsLayer.add(polygonGraphic);

        view.when(() => {
          sketch.update(polygonGraphic);
          getArea(polygonGraphic.geometry);
        });

        sketch.on("update", (e) => {
          const geometry = e.graphics[0].geometry;

          if (e.state === "start") {
            switchType(geometry);
          }

          if (e.state === "complete") {
            graphicsLayer.remove(graphicsLayer.graphics.getItemAt(0));
            measurements.innerHTML = null;
          }

          if (
            e.toolEventInfo &&
            (e.toolEventInfo.type === "scale-stop" ||
              e.toolEventInfo.type === "reshape-stop" ||
              e.toolEventInfo.type === "move-stop")
          ) {
            switchType(geometry);
          }

        });

        function getArea(polygon) {
          const geodesicArea = geometryEngine.geodesicArea(polygon, "square-kilometers");
          const planarArea = geometryEngine.planarArea(polygon, "square-kilometers");

          measurements.innerHTML =
          "<b>Geodesic area</b>:  " + geodesicArea.toFixed(2) + " km\xB2" + " |   <b>Planar area</b>: " + planarArea.toFixed(2) + "  km\xB2";

        }

        function getLength(line) {
          const geodesicLength = geometryEngine.geodesicLength(line, "kilometers");
          const planarLength = geometryEngine.planarLength(line, "kilometers");

          measurements.innerHTML =
            "<b>Geodesic length</b>:  " + geodesicLength.toFixed(2) + " km" + " |   <b>Planar length</b>: " + planarLength.toFixed(2) + "  km";

        }

        function switchType(geom) {
          switch (geom.type) {
            case "polygon":
              getArea(geom);
              break;
            case "polyline":
              getLength(geom);
              break;
            default:
              console.log("No value found");
          }
        }

      });
    </script>
  </head>
  <body>
    <div id="viewDiv">

      <div id="measurements" class="geoscene-widget">

    </div>
  </div>
  </body>
</html>

将 sketch 微件添加到 view 的 top-right 处。

Add line.
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Get length and area</title>
    <style>
      html,
      body,

      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

      #measurements {
        padding: 4px 8px;
        font-size: 16px;
        bottom: 15px;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%,-50%);
      }

    </style>

  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>
    <script>
      require([
        "geoscene/config",
        "geoscene/Map",
        "geoscene/views/MapView",

        "geoscene/widgets/ScaleBar",
        "geoscene/widgets/Sketch",
        "geoscene/Graphic",
        "geoscene/layers/GraphicsLayer",
        "geoscene/geometry/geometryEngine",

      ], (
        geosceneConfig,
        Map,
        MapView,

        ScaleBar,
        Sketch,
        Graphic,
        GraphicsLayer,
        geometryEngine,

      ) => {

        const map = new Map({
          basemap: "tianditu-vector", // Basemap layer service
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,

          center: [-10, 30],
          zoom: 3,

        });

        const scalebar = new ScaleBar({
          view: view,
          unit: "metric"
        });

        view.ui.add(scalebar, "bottom-right");

        const graphicsLayer = new GraphicsLayer();
        map.add(graphicsLayer);

        const sketch = new Sketch({
          layer: graphicsLayer,
          view: view,
          availableCreateTools: ["polyline", "polygon", "rectangle"],
          creationMode: "update",
          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 measurements = document.getElementById("measurements");
        view.ui.add(measurements, "manual");

        const polygon = {
            type: "polygon",
            spatialReference: {
              wkid: 3857,
            },
            rings: [
              [
                [-4508069.082189632, 3599936.936171892],
                [-4508069.082189632, 5478453.343307884],
                [-2629552.6750536393, 5478453.343307884],
                [-2629552.6750536393, 3599936.936171892],
                [-4508069.082189632, 3599936.936171892],
              ],
            ],
          };

          const simplePolygonSymbol = {
            type: "simple-fill",
            outline: {
              color: [200, 0, 0],
              width: 2,
            },
          };

          const polygonGraphic = new Graphic({
            geometry: polygon,
            symbol: simplePolygonSymbol
          });

        graphicsLayer.add(polygonGraphic);

        view.when(() => {
          sketch.update(polygonGraphic);
          getArea(polygonGraphic.geometry);
        });

        sketch.on("update", (e) => {
          const geometry = e.graphics[0].geometry;

          if (e.state === "start") {
            switchType(geometry);
          }

          if (e.state === "complete") {
            graphicsLayer.remove(graphicsLayer.graphics.getItemAt(0));
            measurements.innerHTML = null;
          }

          if (
            e.toolEventInfo &&
            (e.toolEventInfo.type === "scale-stop" ||
              e.toolEventInfo.type === "reshape-stop" ||
              e.toolEventInfo.type === "move-stop")
          ) {
            switchType(geometry);
          }

        });

        function getArea(polygon) {
          const geodesicArea = geometryEngine.geodesicArea(polygon, "square-kilometers");
          const planarArea = geometryEngine.planarArea(polygon, "square-kilometers");

          measurements.innerHTML =
          "<b>Geodesic area</b>:  " + geodesicArea.toFixed(2) + " km\xB2" + " |   <b>Planar area</b>: " + planarArea.toFixed(2) + "  km\xB2";

        }

        function getLength(line) {
          const geodesicLength = geometryEngine.geodesicLength(line, "kilometers");
          const planarLength = geometryEngine.planarLength(line, "kilometers");

          measurements.innerHTML =
            "<b>Geodesic length</b>:  " + geodesicLength.toFixed(2) + " km" + " |   <b>Planar length</b>: " + planarLength.toFixed(2) + "  km";

        }

        function switchType(geom) {
          switch (geom.type) {
            case "polygon":
              getArea(geom);
              break;
            case "polyline":
              getLength(geom);
              break;
            default:
              console.log("No value found");
          }
        }

      });
    </script>
  </head>
  <body>
    <div id="viewDiv">

      <div id="measurements" class="geoscene-widget">

    </div>
  </div>
  </body>
</html>

将 measurements 元素添加到 view 中以在绘制几何时显示测量值。

Add line.Add line.
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Get length and area</title>
    <style>
      html,
      body,

      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

      #measurements {
        padding: 4px 8px;
        font-size: 16px;
        bottom: 15px;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%,-50%);
      }

    </style>

  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>
    <script>
      require([
        "geoscene/config",
        "geoscene/Map",
        "geoscene/views/MapView",

        "geoscene/widgets/ScaleBar",
        "geoscene/widgets/Sketch",
        "geoscene/Graphic",
        "geoscene/layers/GraphicsLayer",
        "geoscene/geometry/geometryEngine",

      ], (
        geosceneConfig,
        Map,
        MapView,

        ScaleBar,
        Sketch,
        Graphic,
        GraphicsLayer,
        geometryEngine,

      ) => {

        const map = new Map({
          basemap: "tianditu-vector", // Basemap layer service
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,

          center: [-10, 30],
          zoom: 3,

        });

        const scalebar = new ScaleBar({
          view: view,
          unit: "metric"
        });

        view.ui.add(scalebar, "bottom-right");

        const graphicsLayer = new GraphicsLayer();
        map.add(graphicsLayer);

        const sketch = new Sketch({
          layer: graphicsLayer,
          view: view,
          availableCreateTools: ["polyline", "polygon", "rectangle"],
          creationMode: "update",
          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 measurements = document.getElementById("measurements");
        view.ui.add(measurements, "manual");

        const polygon = {
            type: "polygon",
            spatialReference: {
              wkid: 3857,
            },
            rings: [
              [
                [-4508069.082189632, 3599936.936171892],
                [-4508069.082189632, 5478453.343307884],
                [-2629552.6750536393, 5478453.343307884],
                [-2629552.6750536393, 3599936.936171892],
                [-4508069.082189632, 3599936.936171892],
              ],
            ],
          };

          const simplePolygonSymbol = {
            type: "simple-fill",
            outline: {
              color: [200, 0, 0],
              width: 2,
            },
          };

          const polygonGraphic = new Graphic({
            geometry: polygon,
            symbol: simplePolygonSymbol
          });

        graphicsLayer.add(polygonGraphic);

        view.when(() => {
          sketch.update(polygonGraphic);
          getArea(polygonGraphic.geometry);
        });

        sketch.on("update", (e) => {
          const geometry = e.graphics[0].geometry;

          if (e.state === "start") {
            switchType(geometry);
          }

          if (e.state === "complete") {
            graphicsLayer.remove(graphicsLayer.graphics.getItemAt(0));
            measurements.innerHTML = null;
          }

          if (
            e.toolEventInfo &&
            (e.toolEventInfo.type === "scale-stop" ||
              e.toolEventInfo.type === "reshape-stop" ||
              e.toolEventInfo.type === "move-stop")
          ) {
            switchType(geometry);
          }

        });

        function getArea(polygon) {
          const geodesicArea = geometryEngine.geodesicArea(polygon, "square-kilometers");
          const planarArea = geometryEngine.planarArea(polygon, "square-kilometers");

          measurements.innerHTML =
          "<b>Geodesic area</b>:  " + geodesicArea.toFixed(2) + " km\xB2" + " |   <b>Planar area</b>: " + planarArea.toFixed(2) + "  km\xB2";

        }

        function getLength(line) {
          const geodesicLength = geometryEngine.geodesicLength(line, "kilometers");
          const planarLength = geometryEngine.planarLength(line, "kilometers");

          measurements.innerHTML =
            "<b>Geodesic length</b>:  " + geodesicLength.toFixed(2) + " km" + " |   <b>Planar length</b>: " + planarLength.toFixed(2) + "  km";

        }

        function switchType(geom) {
          switch (geom.type) {
            case "polygon":
              getArea(geom);
              break;
            case "polyline":
              getLength(geom);
              break;
            default:
              console.log("No value found");
          }
        }

      });
    </script>
  </head>
  <body>
    <div id="viewDiv">

      <div id="measurements" class="geoscene-widget">

    </div>
  </div>
  </body>
</html>

运行应用程序以验证微件是否显示在视图中，以及您是否能够绘制几何。

计算长度和面积

geometryEngine 允许您计算几何的平面长度/面积或测地线长度/面积。由于此应用程序中的几何使用 Web Mercator 进行投影，因此最佳做法是使用测地线测量。但是，要可视化测地线计算和平面计算之间的差异，请在绘制几何时同时测量这两者。

创建 getArea 函数，该函数使用 polygon 作为其参数。调用 geodesicArea() 方法和 planarArea() 方法来计算多边形的面积，以 square-kilometers 为单位。

Add line.Add line.Add line.Add line.Add line.
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Get length and area</title>
    <style>
      html,
      body,

      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

      #measurements {
        padding: 4px 8px;
        font-size: 16px;
        bottom: 15px;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%,-50%);
      }

    </style>

  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>
    <script>
      require([
        "geoscene/config",
        "geoscene/Map",
        "geoscene/views/MapView",

        "geoscene/widgets/ScaleBar",
        "geoscene/widgets/Sketch",
        "geoscene/Graphic",
        "geoscene/layers/GraphicsLayer",
        "geoscene/geometry/geometryEngine",

      ], (
        geosceneConfig,
        Map,
        MapView,

        ScaleBar,
        Sketch,
        Graphic,
        GraphicsLayer,
        geometryEngine,

      ) => {

        const map = new Map({
          basemap: "tianditu-vector", // Basemap layer service
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,

          center: [-10, 30],
          zoom: 3,

        });

        const scalebar = new ScaleBar({
          view: view,
          unit: "metric"
        });

        view.ui.add(scalebar, "bottom-right");

        const graphicsLayer = new GraphicsLayer();
        map.add(graphicsLayer);

        const sketch = new Sketch({
          layer: graphicsLayer,
          view: view,
          availableCreateTools: ["polyline", "polygon", "rectangle"],
          creationMode: "update",
          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 measurements = document.getElementById("measurements");
        view.ui.add(measurements, "manual");

        const polygon = {
            type: "polygon",
            spatialReference: {
              wkid: 3857,
            },
            rings: [
              [
                [-4508069.082189632, 3599936.936171892],
                [-4508069.082189632, 5478453.343307884],
                [-2629552.6750536393, 5478453.343307884],
                [-2629552.6750536393, 3599936.936171892],
                [-4508069.082189632, 3599936.936171892],
              ],
            ],
          };

          const simplePolygonSymbol = {
            type: "simple-fill",
            outline: {
              color: [200, 0, 0],
              width: 2,
            },
          };

          const polygonGraphic = new Graphic({
            geometry: polygon,
            symbol: simplePolygonSymbol
          });

        graphicsLayer.add(polygonGraphic);

        view.when(() => {
          sketch.update(polygonGraphic);
          getArea(polygonGraphic.geometry);
        });

        sketch.on("update", (e) => {
          const geometry = e.graphics[0].geometry;

          if (e.state === "start") {
            switchType(geometry);
          }

          if (e.state === "complete") {
            graphicsLayer.remove(graphicsLayer.graphics.getItemAt(0));
            measurements.innerHTML = null;
          }

          if (
            e.toolEventInfo &&
            (e.toolEventInfo.type === "scale-stop" ||
              e.toolEventInfo.type === "reshape-stop" ||
              e.toolEventInfo.type === "move-stop")
          ) {
            switchType(geometry);
          }

        });

        function getArea(polygon) {
          const geodesicArea = geometryEngine.geodesicArea(polygon, "square-kilometers");
          const planarArea = geometryEngine.planarArea(polygon, "square-kilometers");

          measurements.innerHTML =
          "<b>Geodesic area</b>:  " + geodesicArea.toFixed(2) + " km\xB2" + " |   <b>Planar area</b>: " + planarArea.toFixed(2) + "  km\xB2";

        }

        function getLength(line) {
          const geodesicLength = geometryEngine.geodesicLength(line, "kilometers");
          const planarLength = geometryEngine.planarLength(line, "kilometers");

          measurements.innerHTML =
            "<b>Geodesic length</b>:  " + geodesicLength.toFixed(2) + " km" + " |   <b>Planar length</b>: " + planarLength.toFixed(2) + "  km";

        }

        function switchType(geom) {
          switch (geom.type) {
            case "polygon":
              getArea(geom);
              break;
            case "polyline":
              getLength(geom);
              break;
            default:
              console.log("No value found");
          }
        }

      });
    </script>
  </head>
  <body>
    <div id="viewDiv">

      <div id="measurements" class="geoscene-widget">

    </div>
  </div>
  </body>
</html>

将计算结果追加到 measurements 的 innerHTML。

Add line.Add line.
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Get length and area</title>
    <style>
      html,
      body,

      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

      #measurements {
        padding: 4px 8px;
        font-size: 16px;
        bottom: 15px;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%,-50%);
      }

    </style>

  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>
    <script>
      require([
        "geoscene/config",
        "geoscene/Map",
        "geoscene/views/MapView",

        "geoscene/widgets/ScaleBar",
        "geoscene/widgets/Sketch",
        "geoscene/Graphic",
        "geoscene/layers/GraphicsLayer",
        "geoscene/geometry/geometryEngine",

      ], (
        geosceneConfig,
        Map,
        MapView,

        ScaleBar,
        Sketch,
        Graphic,
        GraphicsLayer,
        geometryEngine,

      ) => {

        const map = new Map({
          basemap: "tianditu-vector", // Basemap layer service
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,

          center: [-10, 30],
          zoom: 3,

        });

        const scalebar = new ScaleBar({
          view: view,
          unit: "metric"
        });

        view.ui.add(scalebar, "bottom-right");

        const graphicsLayer = new GraphicsLayer();
        map.add(graphicsLayer);

        const sketch = new Sketch({
          layer: graphicsLayer,
          view: view,
          availableCreateTools: ["polyline", "polygon", "rectangle"],
          creationMode: "update",
          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 measurements = document.getElementById("measurements");
        view.ui.add(measurements, "manual");

        const polygon = {
            type: "polygon",
            spatialReference: {
              wkid: 3857,
            },
            rings: [
              [
                [-4508069.082189632, 3599936.936171892],
                [-4508069.082189632, 5478453.343307884],
                [-2629552.6750536393, 5478453.343307884],
                [-2629552.6750536393, 3599936.936171892],
                [-4508069.082189632, 3599936.936171892],
              ],
            ],
          };

          const simplePolygonSymbol = {
            type: "simple-fill",
            outline: {
              color: [200, 0, 0],
              width: 2,
            },
          };

          const polygonGraphic = new Graphic({
            geometry: polygon,
            symbol: simplePolygonSymbol
          });

        graphicsLayer.add(polygonGraphic);

        view.when(() => {
          sketch.update(polygonGraphic);
          getArea(polygonGraphic.geometry);
        });

        sketch.on("update", (e) => {
          const geometry = e.graphics[0].geometry;

          if (e.state === "start") {
            switchType(geometry);
          }

          if (e.state === "complete") {
            graphicsLayer.remove(graphicsLayer.graphics.getItemAt(0));
            measurements.innerHTML = null;
          }

          if (
            e.toolEventInfo &&
            (e.toolEventInfo.type === "scale-stop" ||
              e.toolEventInfo.type === "reshape-stop" ||
              e.toolEventInfo.type === "move-stop")
          ) {
            switchType(geometry);
          }

        });

        function getArea(polygon) {
          const geodesicArea = geometryEngine.geodesicArea(polygon, "square-kilometers");
          const planarArea = geometryEngine.planarArea(polygon, "square-kilometers");

          measurements.innerHTML =
          "<b>Geodesic area</b>:  " + geodesicArea.toFixed(2) + " km\xB2" + " |   <b>Planar area</b>: " + planarArea.toFixed(2) + "  km\xB2";

        }

        function getLength(line) {
          const geodesicLength = geometryEngine.geodesicLength(line, "kilometers");
          const planarLength = geometryEngine.planarLength(line, "kilometers");

          measurements.innerHTML =
            "<b>Geodesic length</b>:  " + geodesicLength.toFixed(2) + " km" + " |   <b>Planar length</b>: " + planarLength.toFixed(2) + "  km";

        }

        function switchType(geom) {
          switch (geom.type) {
            case "polygon":
              getArea(geom);
              break;
            case "polyline":
              getLength(geom);
              break;
            default:
              console.log("No value found");
          }
        }

      });
    </script>
  </head>
  <body>
    <div id="viewDiv">

      <div id="measurements" class="geoscene-widget">

    </div>
  </div>
  </body>
</html>

创建 getLength 函数，该函数使用 line 参数。调用 geodesicLength 和 planarLength 方法来计算 line 的长度，以千米为单位。

Add line.Add line.Add line.Add line.Add line.
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Get length and area</title>
    <style>
      html,
      body,

      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

      #measurements {
        padding: 4px 8px;
        font-size: 16px;
        bottom: 15px;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%,-50%);
      }

    </style>

  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>
    <script>
      require([
        "geoscene/config",
        "geoscene/Map",
        "geoscene/views/MapView",

        "geoscene/widgets/ScaleBar",
        "geoscene/widgets/Sketch",
        "geoscene/Graphic",
        "geoscene/layers/GraphicsLayer",
        "geoscene/geometry/geometryEngine",

      ], (
        geosceneConfig,
        Map,
        MapView,

        ScaleBar,
        Sketch,
        Graphic,
        GraphicsLayer,
        geometryEngine,

      ) => {

        const map = new Map({
          basemap: "tianditu-vector", // Basemap layer service
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,

          center: [-10, 30],
          zoom: 3,

        });

        const scalebar = new ScaleBar({
          view: view,
          unit: "metric"
        });

        view.ui.add(scalebar, "bottom-right");

        const graphicsLayer = new GraphicsLayer();
        map.add(graphicsLayer);

        const sketch = new Sketch({
          layer: graphicsLayer,
          view: view,
          availableCreateTools: ["polyline", "polygon", "rectangle"],
          creationMode: "update",
          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 measurements = document.getElementById("measurements");
        view.ui.add(measurements, "manual");

        const polygon = {
            type: "polygon",
            spatialReference: {
              wkid: 3857,
            },
            rings: [
              [
                [-4508069.082189632, 3599936.936171892],
                [-4508069.082189632, 5478453.343307884],
                [-2629552.6750536393, 5478453.343307884],
                [-2629552.6750536393, 3599936.936171892],
                [-4508069.082189632, 3599936.936171892],
              ],
            ],
          };

          const simplePolygonSymbol = {
            type: "simple-fill",
            outline: {
              color: [200, 0, 0],
              width: 2,
            },
          };

          const polygonGraphic = new Graphic({
            geometry: polygon,
            symbol: simplePolygonSymbol
          });

        graphicsLayer.add(polygonGraphic);

        view.when(() => {
          sketch.update(polygonGraphic);
          getArea(polygonGraphic.geometry);
        });

        sketch.on("update", (e) => {
          const geometry = e.graphics[0].geometry;

          if (e.state === "start") {
            switchType(geometry);
          }

          if (e.state === "complete") {
            graphicsLayer.remove(graphicsLayer.graphics.getItemAt(0));
            measurements.innerHTML = null;
          }

          if (
            e.toolEventInfo &&
            (e.toolEventInfo.type === "scale-stop" ||
              e.toolEventInfo.type === "reshape-stop" ||
              e.toolEventInfo.type === "move-stop")
          ) {
            switchType(geometry);
          }

        });

        function getArea(polygon) {
          const geodesicArea = geometryEngine.geodesicArea(polygon, "square-kilometers");
          const planarArea = geometryEngine.planarArea(polygon, "square-kilometers");

          measurements.innerHTML =
          "<b>Geodesic area</b>:  " + geodesicArea.toFixed(2) + " km\xB2" + " |   <b>Planar area</b>: " + planarArea.toFixed(2) + "  km\xB2";

        }

        function getLength(line) {
          const geodesicLength = geometryEngine.geodesicLength(line, "kilometers");
          const planarLength = geometryEngine.planarLength(line, "kilometers");

          measurements.innerHTML =
            "<b>Geodesic length</b>:  " + geodesicLength.toFixed(2) + " km" + " |   <b>Planar length</b>: " + planarLength.toFixed(2) + "  km";

        }

        function switchType(geom) {
          switch (geom.type) {
            case "polygon":
              getArea(geom);
              break;
            case "polyline":
              getLength(geom);
              break;
            default:
              console.log("No value found");
          }
        }

      });
    </script>
  </head>
  <body>
    <div id="viewDiv">

      <div id="measurements" class="geoscene-widget">

    </div>
  </div>
  </body>
</html>

将测地线长度计算的结果追加到 measurements 的 innerHTML。

Add line.Add line.
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Get length and area</title>
    <style>
      html,
      body,

      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

      #measurements {
        padding: 4px 8px;
        font-size: 16px;
        bottom: 15px;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%,-50%);
      }

    </style>

  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>
    <script>
      require([
        "geoscene/config",
        "geoscene/Map",
        "geoscene/views/MapView",

        "geoscene/widgets/ScaleBar",
        "geoscene/widgets/Sketch",
        "geoscene/Graphic",
        "geoscene/layers/GraphicsLayer",
        "geoscene/geometry/geometryEngine",

      ], (
        geosceneConfig,
        Map,
        MapView,

        ScaleBar,
        Sketch,
        Graphic,
        GraphicsLayer,
        geometryEngine,

      ) => {

        const map = new Map({
          basemap: "tianditu-vector", // Basemap layer service
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,

          center: [-10, 30],
          zoom: 3,

        });

        const scalebar = new ScaleBar({
          view: view,
          unit: "metric"
        });

        view.ui.add(scalebar, "bottom-right");

        const graphicsLayer = new GraphicsLayer();
        map.add(graphicsLayer);

        const sketch = new Sketch({
          layer: graphicsLayer,
          view: view,
          availableCreateTools: ["polyline", "polygon", "rectangle"],
          creationMode: "update",
          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 measurements = document.getElementById("measurements");
        view.ui.add(measurements, "manual");

        const polygon = {
            type: "polygon",
            spatialReference: {
              wkid: 3857,
            },
            rings: [
              [
                [-4508069.082189632, 3599936.936171892],
                [-4508069.082189632, 5478453.343307884],
                [-2629552.6750536393, 5478453.343307884],
                [-2629552.6750536393, 3599936.936171892],
                [-4508069.082189632, 3599936.936171892],
              ],
            ],
          };

          const simplePolygonSymbol = {
            type: "simple-fill",
            outline: {
              color: [200, 0, 0],
              width: 2,
            },
          };

          const polygonGraphic = new Graphic({
            geometry: polygon,
            symbol: simplePolygonSymbol
          });

        graphicsLayer.add(polygonGraphic);

        view.when(() => {
          sketch.update(polygonGraphic);
          getArea(polygonGraphic.geometry);
        });

        sketch.on("update", (e) => {
          const geometry = e.graphics[0].geometry;

          if (e.state === "start") {
            switchType(geometry);
          }

          if (e.state === "complete") {
            graphicsLayer.remove(graphicsLayer.graphics.getItemAt(0));
            measurements.innerHTML = null;
          }

          if (
            e.toolEventInfo &&
            (e.toolEventInfo.type === "scale-stop" ||
              e.toolEventInfo.type === "reshape-stop" ||
              e.toolEventInfo.type === "move-stop")
          ) {
            switchType(geometry);
          }

        });

        function getArea(polygon) {
          const geodesicArea = geometryEngine.geodesicArea(polygon, "square-kilometers");
          const planarArea = geometryEngine.planarArea(polygon, "square-kilometers");

          measurements.innerHTML =
          "<b>Geodesic area</b>:  " + geodesicArea.toFixed(2) + " km\xB2" + " |   <b>Planar area</b>: " + planarArea.toFixed(2) + "  km\xB2";

        }

        function getLength(line) {
          const geodesicLength = geometryEngine.geodesicLength(line, "kilometers");
          const planarLength = geometryEngine.planarLength(line, "kilometers");

          measurements.innerHTML =
            "<b>Geodesic length</b>:  " + geodesicLength.toFixed(2) + " km" + " |   <b>Planar length</b>: " + planarLength.toFixed(2) + "  km";

        }

        function switchType(geom) {
          switch (geom.type) {
            case "polygon":
              getArea(geom);
              break;
            case "polyline":
              getLength(geom);
              break;
            default:
              console.log("No value found");
          }
        }

      });
    </script>
  </head>
  <body>
    <div id="viewDiv">

      <div id="measurements" class="geoscene-widget">

    </div>
  </div>
  </body>
</html>

创建 switch 语句，以调用 getArea 函数或 getLength 函数，具体取决于几何是 polygon 还是 polyline。

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Get length and area</title>
    <style>
      html,
      body,

      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

      #measurements {
        padding: 4px 8px;
        font-size: 16px;
        bottom: 15px;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%,-50%);
      }

    </style>

  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>
    <script>
      require([
        "geoscene/config",
        "geoscene/Map",
        "geoscene/views/MapView",

        "geoscene/widgets/ScaleBar",
        "geoscene/widgets/Sketch",
        "geoscene/Graphic",
        "geoscene/layers/GraphicsLayer",
        "geoscene/geometry/geometryEngine",

      ], (
        geosceneConfig,
        Map,
        MapView,

        ScaleBar,
        Sketch,
        Graphic,
        GraphicsLayer,
        geometryEngine,

      ) => {

        const map = new Map({
          basemap: "tianditu-vector", // Basemap layer service
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,

          center: [-10, 30],
          zoom: 3,

        });

        const scalebar = new ScaleBar({
          view: view,
          unit: "metric"
        });

        view.ui.add(scalebar, "bottom-right");

        const graphicsLayer = new GraphicsLayer();
        map.add(graphicsLayer);

        const sketch = new Sketch({
          layer: graphicsLayer,
          view: view,
          availableCreateTools: ["polyline", "polygon", "rectangle"],
          creationMode: "update",
          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 measurements = document.getElementById("measurements");
        view.ui.add(measurements, "manual");

        const polygon = {
            type: "polygon",
            spatialReference: {
              wkid: 3857,
            },
            rings: [
              [
                [-4508069.082189632, 3599936.936171892],
                [-4508069.082189632, 5478453.343307884],
                [-2629552.6750536393, 5478453.343307884],
                [-2629552.6750536393, 3599936.936171892],
                [-4508069.082189632, 3599936.936171892],
              ],
            ],
          };

          const simplePolygonSymbol = {
            type: "simple-fill",
            outline: {
              color: [200, 0, 0],
              width: 2,
            },
          };

          const polygonGraphic = new Graphic({
            geometry: polygon,
            symbol: simplePolygonSymbol
          });

        graphicsLayer.add(polygonGraphic);

        view.when(() => {
          sketch.update(polygonGraphic);
          getArea(polygonGraphic.geometry);
        });

        sketch.on("update", (e) => {
          const geometry = e.graphics[0].geometry;

          if (e.state === "start") {
            switchType(geometry);
          }

          if (e.state === "complete") {
            graphicsLayer.remove(graphicsLayer.graphics.getItemAt(0));
            measurements.innerHTML = null;
          }

          if (
            e.toolEventInfo &&
            (e.toolEventInfo.type === "scale-stop" ||
              e.toolEventInfo.type === "reshape-stop" ||
              e.toolEventInfo.type === "move-stop")
          ) {
            switchType(geometry);
          }

        });

        function getArea(polygon) {
          const geodesicArea = geometryEngine.geodesicArea(polygon, "square-kilometers");
          const planarArea = geometryEngine.planarArea(polygon, "square-kilometers");

          measurements.innerHTML =
          "<b>Geodesic area</b>:  " + geodesicArea.toFixed(2) + " km\xB2" + " |   <b>Planar area</b>: " + planarArea.toFixed(2) + "  km\xB2";

        }

        function getLength(line) {
          const geodesicLength = geometryEngine.geodesicLength(line, "kilometers");
          const planarLength = geometryEngine.planarLength(line, "kilometers");

          measurements.innerHTML =
            "<b>Geodesic length</b>:  " + geodesicLength.toFixed(2) + " km" + " |   <b>Planar length</b>: " + planarLength.toFixed(2) + "  km";

        }

        function switchType(geom) {
          switch (geom.type) {
            case "polygon":
              getArea(geom);
              break;
            case "polyline":
              getLength(geom);
              break;
            default:
              console.log("No value found");
          }
        }

      });
    </script>
  </head>
  <body>
    <div id="viewDiv">

      <div id="measurements" class="geoscene-widget">

    </div>
  </div>
  </body>
</html>

创建默认图形以测量

要向用户展示与应用程序交互的方式，请创建一个默认多边形，并在应用程序启动时显示其区域。

创建 polygon。将 type 设置为 polygon，并将 spatialReference 属性中的 wkid 设置为 3857 (Web Mercator)。创建 simplePolygonSymbol 来设置图形样式。

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Get length and area</title>
    <style>
      html,
      body,

      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

      #measurements {
        padding: 4px 8px;
        font-size: 16px;
        bottom: 15px;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%,-50%);
      }

    </style>

  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>
    <script>
      require([
        "geoscene/config",
        "geoscene/Map",
        "geoscene/views/MapView",

        "geoscene/widgets/ScaleBar",
        "geoscene/widgets/Sketch",
        "geoscene/Graphic",
        "geoscene/layers/GraphicsLayer",
        "geoscene/geometry/geometryEngine",

      ], (
        geosceneConfig,
        Map,
        MapView,

        ScaleBar,
        Sketch,
        Graphic,
        GraphicsLayer,
        geometryEngine,

      ) => {

        const map = new Map({
          basemap: "tianditu-vector", // Basemap layer service
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,

          center: [-10, 30],
          zoom: 3,

        });

        const scalebar = new ScaleBar({
          view: view,
          unit: "metric"
        });

        view.ui.add(scalebar, "bottom-right");

        const graphicsLayer = new GraphicsLayer();
        map.add(graphicsLayer);

        const sketch = new Sketch({
          layer: graphicsLayer,
          view: view,
          availableCreateTools: ["polyline", "polygon", "rectangle"],
          creationMode: "update",
          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 measurements = document.getElementById("measurements");
        view.ui.add(measurements, "manual");

        const polygon = {
            type: "polygon",
            spatialReference: {
              wkid: 3857,
            },
            rings: [
              [
                [-4508069.082189632, 3599936.936171892],
                [-4508069.082189632, 5478453.343307884],
                [-2629552.6750536393, 5478453.343307884],
                [-2629552.6750536393, 3599936.936171892],
                [-4508069.082189632, 3599936.936171892],
              ],
            ],
          };

          const simplePolygonSymbol = {
            type: "simple-fill",
            outline: {
              color: [200, 0, 0],
              width: 2,
            },
          };

          const polygonGraphic = new Graphic({
            geometry: polygon,
            symbol: simplePolygonSymbol
          });

        graphicsLayer.add(polygonGraphic);

        view.when(() => {
          sketch.update(polygonGraphic);
          getArea(polygonGraphic.geometry);
        });

        sketch.on("update", (e) => {
          const geometry = e.graphics[0].geometry;

          if (e.state === "start") {
            switchType(geometry);
          }

          if (e.state === "complete") {
            graphicsLayer.remove(graphicsLayer.graphics.getItemAt(0));
            measurements.innerHTML = null;
          }

          if (
            e.toolEventInfo &&
            (e.toolEventInfo.type === "scale-stop" ||
              e.toolEventInfo.type === "reshape-stop" ||
              e.toolEventInfo.type === "move-stop")
          ) {
            switchType(geometry);
          }

        });

        function getArea(polygon) {
          const geodesicArea = geometryEngine.geodesicArea(polygon, "square-kilometers");
          const planarArea = geometryEngine.planarArea(polygon, "square-kilometers");

          measurements.innerHTML =
          "<b>Geodesic area</b>:  " + geodesicArea.toFixed(2) + " km\xB2" + " |   <b>Planar area</b>: " + planarArea.toFixed(2) + "  km\xB2";

        }

        function getLength(line) {
          const geodesicLength = geometryEngine.geodesicLength(line, "kilometers");
          const planarLength = geometryEngine.planarLength(line, "kilometers");

          measurements.innerHTML =
            "<b>Geodesic length</b>:  " + geodesicLength.toFixed(2) + " km" + " |   <b>Planar length</b>: " + planarLength.toFixed(2) + "  km";

        }

        function switchType(geom) {
          switch (geom.type) {
            case "polygon":
              getArea(geom);
              break;
            case "polyline":
              getLength(geom);
              break;
            default:
              console.log("No value found");
          }
        }

      });
    </script>
  </head>
  <body>
    <div id="viewDiv">

      <div id="measurements" class="geoscene-widget">

    </div>
  </div>
  </body>
</html>

创建图形类实例。将 geometry 和 symbol 属性设置为 polygon 和 simplePolygonSymbol。将图形添加到 graphicsLayer。

Add line.Add line.Add line.Add line.Add line.Add line.
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Get length and area</title>
    <style>
      html,
      body,

      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

      #measurements {
        padding: 4px 8px;
        font-size: 16px;
        bottom: 15px;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%,-50%);
      }

    </style>

  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>
    <script>
      require([
        "geoscene/config",
        "geoscene/Map",
        "geoscene/views/MapView",

        "geoscene/widgets/ScaleBar",
        "geoscene/widgets/Sketch",
        "geoscene/Graphic",
        "geoscene/layers/GraphicsLayer",
        "geoscene/geometry/geometryEngine",

      ], (
        geosceneConfig,
        Map,
        MapView,

        ScaleBar,
        Sketch,
        Graphic,
        GraphicsLayer,
        geometryEngine,

      ) => {

        const map = new Map({
          basemap: "tianditu-vector", // Basemap layer service
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,

          center: [-10, 30],
          zoom: 3,

        });

        const scalebar = new ScaleBar({
          view: view,
          unit: "metric"
        });

        view.ui.add(scalebar, "bottom-right");

        const graphicsLayer = new GraphicsLayer();
        map.add(graphicsLayer);

        const sketch = new Sketch({
          layer: graphicsLayer,
          view: view,
          availableCreateTools: ["polyline", "polygon", "rectangle"],
          creationMode: "update",
          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 measurements = document.getElementById("measurements");
        view.ui.add(measurements, "manual");

        const polygon = {
            type: "polygon",
            spatialReference: {
              wkid: 3857,
            },
            rings: [
              [
                [-4508069.082189632, 3599936.936171892],
                [-4508069.082189632, 5478453.343307884],
                [-2629552.6750536393, 5478453.343307884],
                [-2629552.6750536393, 3599936.936171892],
                [-4508069.082189632, 3599936.936171892],
              ],
            ],
          };

          const simplePolygonSymbol = {
            type: "simple-fill",
            outline: {
              color: [200, 0, 0],
              width: 2,
            },
          };

          const polygonGraphic = new Graphic({
            geometry: polygon,
            symbol: simplePolygonSymbol
          });

        graphicsLayer.add(polygonGraphic);

        view.when(() => {
          sketch.update(polygonGraphic);
          getArea(polygonGraphic.geometry);
        });

        sketch.on("update", (e) => {
          const geometry = e.graphics[0].geometry;

          if (e.state === "start") {
            switchType(geometry);
          }

          if (e.state === "complete") {
            graphicsLayer.remove(graphicsLayer.graphics.getItemAt(0));
            measurements.innerHTML = null;
          }

          if (
            e.toolEventInfo &&
            (e.toolEventInfo.type === "scale-stop" ||
              e.toolEventInfo.type === "reshape-stop" ||
              e.toolEventInfo.type === "move-stop")
          ) {
            switchType(geometry);
          }

        });

        function getArea(polygon) {
          const geodesicArea = geometryEngine.geodesicArea(polygon, "square-kilometers");
          const planarArea = geometryEngine.planarArea(polygon, "square-kilometers");

          measurements.innerHTML =
          "<b>Geodesic area</b>:  " + geodesicArea.toFixed(2) + " km\xB2" + " |   <b>Planar area</b>: " + planarArea.toFixed(2) + "  km\xB2";

        }

        function getLength(line) {
          const geodesicLength = geometryEngine.geodesicLength(line, "kilometers");
          const planarLength = geometryEngine.planarLength(line, "kilometers");

          measurements.innerHTML =
            "<b>Geodesic length</b>:  " + geodesicLength.toFixed(2) + " km" + " |   <b>Planar length</b>: " + planarLength.toFixed(2) + "  km";

        }

        function switchType(geom) {
          switch (geom.type) {
            case "polygon":
              getArea(geom);
              break;
            case "polyline":
              getLength(geom);
              break;
            default:
              console.log("No value found");
          }
        }

      });
    </script>
  </head>
  <body>
    <div id="viewDiv">

      <div id="measurements" class="geoscene-widget">

    </div>
  </div>
  </body>
</html>

when 加载 view 时，调用 polygonGraphic 上的 update 方法，并基于 polygonGraphic 的 geometry 调用 getArea 函数。

Add line.Add line.Add line.Add line.
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Get length and area</title>
    <style>
      html,
      body,

      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

      #measurements {
        padding: 4px 8px;
        font-size: 16px;
        bottom: 15px;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%,-50%);
      }

    </style>

  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>
    <script>
      require([
        "geoscene/config",
        "geoscene/Map",
        "geoscene/views/MapView",

        "geoscene/widgets/ScaleBar",
        "geoscene/widgets/Sketch",
        "geoscene/Graphic",
        "geoscene/layers/GraphicsLayer",
        "geoscene/geometry/geometryEngine",

      ], (
        geosceneConfig,
        Map,
        MapView,

        ScaleBar,
        Sketch,
        Graphic,
        GraphicsLayer,
        geometryEngine,

      ) => {

        const map = new Map({
          basemap: "tianditu-vector", // Basemap layer service
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,

          center: [-10, 30],
          zoom: 3,

        });

        const scalebar = new ScaleBar({
          view: view,
          unit: "metric"
        });

        view.ui.add(scalebar, "bottom-right");

        const graphicsLayer = new GraphicsLayer();
        map.add(graphicsLayer);

        const sketch = new Sketch({
          layer: graphicsLayer,
          view: view,
          availableCreateTools: ["polyline", "polygon", "rectangle"],
          creationMode: "update",
          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 measurements = document.getElementById("measurements");
        view.ui.add(measurements, "manual");

        const polygon = {
            type: "polygon",
            spatialReference: {
              wkid: 3857,
            },
            rings: [
              [
                [-4508069.082189632, 3599936.936171892],
                [-4508069.082189632, 5478453.343307884],
                [-2629552.6750536393, 5478453.343307884],
                [-2629552.6750536393, 3599936.936171892],
                [-4508069.082189632, 3599936.936171892],
              ],
            ],
          };

          const simplePolygonSymbol = {
            type: "simple-fill",
            outline: {
              color: [200, 0, 0],
              width: 2,
            },
          };

          const polygonGraphic = new Graphic({
            geometry: polygon,
            symbol: simplePolygonSymbol
          });

        graphicsLayer.add(polygonGraphic);

        view.when(() => {
          sketch.update(polygonGraphic);
          getArea(polygonGraphic.geometry);
        });

        sketch.on("update", (e) => {
          const geometry = e.graphics[0].geometry;

          if (e.state === "start") {
            switchType(geometry);
          }

          if (e.state === "complete") {
            graphicsLayer.remove(graphicsLayer.graphics.getItemAt(0));
            measurements.innerHTML = null;
          }

          if (
            e.toolEventInfo &&
            (e.toolEventInfo.type === "scale-stop" ||
              e.toolEventInfo.type === "reshape-stop" ||
              e.toolEventInfo.type === "move-stop")
          ) {
            switchType(geometry);
          }

        });

        function getArea(polygon) {
          const geodesicArea = geometryEngine.geodesicArea(polygon, "square-kilometers");
          const planarArea = geometryEngine.planarArea(polygon, "square-kilometers");

          measurements.innerHTML =
          "<b>Geodesic area</b>:  " + geodesicArea.toFixed(2) + " km\xB2" + " |   <b>Planar area</b>: " + planarArea.toFixed(2) + "  km\xB2";

        }

        function getLength(line) {
          const geodesicLength = geometryEngine.geodesicLength(line, "kilometers");
          const planarLength = geometryEngine.planarLength(line, "kilometers");

          measurements.innerHTML =
            "<b>Geodesic length</b>:  " + geodesicLength.toFixed(2) + " km" + " |   <b>Planar length</b>: " + planarLength.toFixed(2) + "  km";

        }

        function switchType(geom) {
          switch (geom.type) {
            case "polygon":
              getArea(geom);
              break;
            case "polyline":
              getLength(geom);
              break;
            default:
              console.log("No value found");
          }
        }

      });
    </script>
  </head>
  <body>
    <div id="viewDiv">

      <div id="measurements" class="geoscene-widget">

    </div>
  </div>
  </body>
</html>

添加事件监听器

Sketch 微件的设置允许您编辑在视图上绘制的几何。创建事件监听器以在更新时注册几何的不同状态，并动态测量其面积或长度。

创建一个事件监听器，用于在创建、调整大小或移动图形时监听 update on 的更改。使用事件中第一个图形的 geometry 设置 geometry 元素。

Add line.Add line.Add line.Add line.
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Get length and area</title>
    <style>
      html,
      body,

      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

      #measurements {
        padding: 4px 8px;
        font-size: 16px;
        bottom: 15px;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%,-50%);
      }

    </style>

  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>
    <script>
      require([
        "geoscene/config",
        "geoscene/Map",
        "geoscene/views/MapView",

        "geoscene/widgets/ScaleBar",
        "geoscene/widgets/Sketch",
        "geoscene/Graphic",
        "geoscene/layers/GraphicsLayer",
        "geoscene/geometry/geometryEngine",

      ], (
        geosceneConfig,
        Map,
        MapView,

        ScaleBar,
        Sketch,
        Graphic,
        GraphicsLayer,
        geometryEngine,

      ) => {

        const map = new Map({
          basemap: "tianditu-vector", // Basemap layer service
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,

          center: [-10, 30],
          zoom: 3,

        });

        const scalebar = new ScaleBar({
          view: view,
          unit: "metric"
        });

        view.ui.add(scalebar, "bottom-right");

        const graphicsLayer = new GraphicsLayer();
        map.add(graphicsLayer);

        const sketch = new Sketch({
          layer: graphicsLayer,
          view: view,
          availableCreateTools: ["polyline", "polygon", "rectangle"],
          creationMode: "update",
          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 measurements = document.getElementById("measurements");
        view.ui.add(measurements, "manual");

        const polygon = {
            type: "polygon",
            spatialReference: {
              wkid: 3857,
            },
            rings: [
              [
                [-4508069.082189632, 3599936.936171892],
                [-4508069.082189632, 5478453.343307884],
                [-2629552.6750536393, 5478453.343307884],
                [-2629552.6750536393, 3599936.936171892],
                [-4508069.082189632, 3599936.936171892],
              ],
            ],
          };

          const simplePolygonSymbol = {
            type: "simple-fill",
            outline: {
              color: [200, 0, 0],
              width: 2,
            },
          };

          const polygonGraphic = new Graphic({
            geometry: polygon,
            symbol: simplePolygonSymbol
          });

        graphicsLayer.add(polygonGraphic);

        view.when(() => {
          sketch.update(polygonGraphic);
          getArea(polygonGraphic.geometry);
        });

        sketch.on("update", (e) => {
          const geometry = e.graphics[0].geometry;

          if (e.state === "start") {
            switchType(geometry);
          }

          if (e.state === "complete") {
            graphicsLayer.remove(graphicsLayer.graphics.getItemAt(0));
            measurements.innerHTML = null;
          }

          if (
            e.toolEventInfo &&
            (e.toolEventInfo.type === "scale-stop" ||
              e.toolEventInfo.type === "reshape-stop" ||
              e.toolEventInfo.type === "move-stop")
          ) {
            switchType(geometry);
          }

        });

        function getArea(polygon) {
          const geodesicArea = geometryEngine.geodesicArea(polygon, "square-kilometers");
          const planarArea = geometryEngine.planarArea(polygon, "square-kilometers");

          measurements.innerHTML =
          "<b>Geodesic area</b>:  " + geodesicArea.toFixed(2) + " km\xB2" + " |   <b>Planar area</b>: " + planarArea.toFixed(2) + "  km\xB2";

        }

        function getLength(line) {
          const geodesicLength = geometryEngine.geodesicLength(line, "kilometers");
          const planarLength = geometryEngine.planarLength(line, "kilometers");

          measurements.innerHTML =
            "<b>Geodesic length</b>:  " + geodesicLength.toFixed(2) + " km" + " |   <b>Planar length</b>: " + planarLength.toFixed(2) + "  km";

        }

        function switchType(geom) {
          switch (geom.type) {
            case "polygon":
              getArea(geom);
              break;
            case "polyline":
              getLength(geom);
              break;
            default:
              console.log("No value found");
          }
        }

      });
    </script>
  </head>
  <body>
    <div id="viewDiv">

      <div id="measurements" class="geoscene-widget">

    </div>
  </div>
  </body>
</html>

根据 sketch 事件的 state 是 start、complete，还是处于更改状态而创建条件语句。对于每个状态 (complete 除外)，调用 switchType 语句，其中 geometry 为其参数。当事件 complete 后，从 graphicsLayer 中移除图形并清除 innerHTML。

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Get length and area</title>
    <style>
      html,
      body,

      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

      #measurements {
        padding: 4px 8px;
        font-size: 16px;
        bottom: 15px;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%,-50%);
      }

    </style>

  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>
    <script>
      require([
        "geoscene/config",
        "geoscene/Map",
        "geoscene/views/MapView",

        "geoscene/widgets/ScaleBar",
        "geoscene/widgets/Sketch",
        "geoscene/Graphic",
        "geoscene/layers/GraphicsLayer",
        "geoscene/geometry/geometryEngine",

      ], (
        geosceneConfig,
        Map,
        MapView,

        ScaleBar,
        Sketch,
        Graphic,
        GraphicsLayer,
        geometryEngine,

      ) => {

        const map = new Map({
          basemap: "tianditu-vector", // Basemap layer service
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,

          center: [-10, 30],
          zoom: 3,

        });

        const scalebar = new ScaleBar({
          view: view,
          unit: "metric"
        });

        view.ui.add(scalebar, "bottom-right");

        const graphicsLayer = new GraphicsLayer();
        map.add(graphicsLayer);

        const sketch = new Sketch({
          layer: graphicsLayer,
          view: view,
          availableCreateTools: ["polyline", "polygon", "rectangle"],
          creationMode: "update",
          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 measurements = document.getElementById("measurements");
        view.ui.add(measurements, "manual");

        const polygon = {
            type: "polygon",
            spatialReference: {
              wkid: 3857,
            },
            rings: [
              [
                [-4508069.082189632, 3599936.936171892],
                [-4508069.082189632, 5478453.343307884],
                [-2629552.6750536393, 5478453.343307884],
                [-2629552.6750536393, 3599936.936171892],
                [-4508069.082189632, 3599936.936171892],
              ],
            ],
          };

          const simplePolygonSymbol = {
            type: "simple-fill",
            outline: {
              color: [200, 0, 0],
              width: 2,
            },
          };

          const polygonGraphic = new Graphic({
            geometry: polygon,
            symbol: simplePolygonSymbol
          });

        graphicsLayer.add(polygonGraphic);

        view.when(() => {
          sketch.update(polygonGraphic);
          getArea(polygonGraphic.geometry);
        });

        sketch.on("update", (e) => {
          const geometry = e.graphics[0].geometry;

          if (e.state === "start") {
            switchType(geometry);
          }

          if (e.state === "complete") {
            graphicsLayer.remove(graphicsLayer.graphics.getItemAt(0));
            measurements.innerHTML = null;
          }

          if (
            e.toolEventInfo &&
            (e.toolEventInfo.type === "scale-stop" ||
              e.toolEventInfo.type === "reshape-stop" ||
              e.toolEventInfo.type === "move-stop")
          ) {
            switchType(geometry);
          }

        });

        function getArea(polygon) {
          const geodesicArea = geometryEngine.geodesicArea(polygon, "square-kilometers");
          const planarArea = geometryEngine.planarArea(polygon, "square-kilometers");

          measurements.innerHTML =
          "<b>Geodesic area</b>:  " + geodesicArea.toFixed(2) + " km\xB2" + " |   <b>Planar area</b>: " + planarArea.toFixed(2) + "  km\xB2";

        }

        function getLength(line) {
          const geodesicLength = geometryEngine.geodesicLength(line, "kilometers");
          const planarLength = geometryEngine.planarLength(line, "kilometers");

          measurements.innerHTML =
            "<b>Geodesic length</b>:  " + geodesicLength.toFixed(2) + " km" + " |   <b>Planar length</b>: " + planarLength.toFixed(2) + "  km";

        }

        function switchType(geom) {
          switch (geom.type) {
            case "polygon":
              getArea(geom);
              break;
            case "polyline":
              getLength(geom);
              break;
            default:
              console.log("No value found");
          }
        }

      });
    </script>
  </head>
  <body>
    <div id="viewDiv">

      <div id="measurements" class="geoscene-widget">

    </div>
  </div>
  </body>
</html>

运行应用程序

在 CodePen 中，运行代码以显示地图。

运行应用程序时，您将看到一个面及其计算出的测地线面积和平面面积。您可以使用草绘微件绘制其他几何并显示其测量值。如果移动几何，测地线测量值将更改，但平面测量值不会更改。

下一步是什么？

要了解如何使用其他API 功能，请参阅以下教程：

GeoScene API for JavaScript

查找长度和面积

解决方案

估计时间

GeoScene API for JavaScript

查找长度和面积

步骤

创建新 Pen

设置 HTML

添加模块

重定位并添加比例尺

添加草绘微件

计算长度和面积

创建默认图形以测量

添加事件监听器

运行应用程序

下一步是什么？

解决方案

估计时间