测量微件

此示例展示了如何在 2D MapViews 和 3D SceneViews 中使用可与所有类型的图层一起使用的测量微件。如果要使用，请从右上角的选项中选择一个测量工具。清除按钮也可用于删除当前测量。请注意，当您在测量工具之间切换时，测量图形会保持不变。您还可以使用左上角的按钮在 MapView 和 SceneView 之间切换。该应用程序最初加载一个 MapView。

测量微件对多个测量工具进行分组和管理，并允许您使用 activeTool 属性在它们之间轻松切换。这些工具对应于 2D（AreaMeasurement2D、DistanceMeasurement2D）和 3D（AreaMeasurement3D、DirectLineMeasurement3D）中面积和距离的测量微件。您可以在 2D 测量示例 和 3D 测量示例 中查看有关这些单独微件的更多信息。

此微件遵循复合模式，允许开发人员配置 UI 以最符合他们的特定要求。测量工具、位置和图标都可以配置，这为使用选项卡式界面或其他自定义 UI 提供了极大的灵活性。在此示例中，我们在应用程序的右上角添加了一个 toolbarDiv，作为距离微件、区域微件和 clear() 方法的容器。每个微件和 clear() 方法都使用 GeoScene 图标字体中适当的图标进行风格化。 

此外，此示例展示了如何添加一次测量微件，然后将视图从 MapView 更改为 SceneView，并且仍然使用相同的微件进行测量。为此，我们调用一个检查视图值（2D 或 3D）的函数，然后将 activeTool 设置为适当的值（例如 2D 的 distance ，或 3D的 direct-line）。

1
2
3
4
5
6
7
// Calls the appropriate DistanceMeasurement2D or DirectLineMeasurement3D depending on the view
function distanceMeasurement() {
  const type = activeView.type;
  measurement.activeTool = type.toUpperCase() === "2D" ? "distance" : "direct-line";
  distanceButton.classList.add("active");
  areaButton.classList.remove("active");
}

我们不需要这个逻辑来进行 area 测量，因为 2D 和 3D 之间的值是相同的。您可以在将视图从 2D 切换到 3D 示例以及同步 MapView 和 SceneView 示例中查看有关使用 MapViews 和 SceneViews 的更多信息。