将视图从 2D 切换到 3D

尝试一下在线预览

此示例演示如何将地图视图从 2D 切换到 3D。这可以使用相同的 Map 实例或单独的 WebMapWebScene 实例完成。使用 WebMaps 和 WebScenes 可减少检查两个视图中都不支持的 2D 和 3D 之间的差异(例如 2D 和 3D 符号系统)所需的代码量。单击视图左上角的 3D 按钮可将视图从 2D 切换到 3D,反之亦然。

若要实现此行为,请将起始视图中的容器设置为目标视图的容器。同样,在目标视图上设置地图实例和视点

虽然 Camera 是设置 SceneView 的可见范围的首选对象,而 MapView 首选范围,但每个视图上的视点属性都很方便,因为它会将范围旋转从一种视图类型保存到下一种视图类型。某些属性(如倾斜高程图层)将在 2D MapViews 中被忽略。

下面的函数演示了如何实现此目的。

                      
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// Switches the view from 2D to 3D and vice versa
function switchView() {
  const is3D = appConfig.activeView.type === "3d";

  // remove the reference to the container for the previous view
  appConfig.activeView.container = null;

  if (is3D) {
    // if the input view is a SceneView, set the viewpoint on the
    // mapView instance. Set the container on the mapView and flag
    // it as the active view
    appConfig.mapView.viewpoint = appConfig.activeView.viewpoint.clone();
    appConfig.mapView.container = appConfig.container;
    appConfig.activeView = appConfig.mapView;
    switchButton.value = "3D";
  } else {
    appConfig.sceneView.viewpoint = appConfig.activeView.viewpoint.clone();
    appConfig.sceneView.container = appConfig.container;
    appConfig.activeView = appConfig.sceneView;
    switchButton.value = "2D";
  }
}

在 2D 和 3D 之间切换的限制

请记住,从 MapView 切换到 SceneView 需要仔细考虑许多因素。有关一些考虑因素,请参阅下面的列表。此列表并不全面。

  • 数据类型 - 某些图层由于其 3D 性质,在 2D 中不受支持。其中包括 SceneLayerIntegratedMeshLayerPointCloudLayer。它们需要从地图实例中完全移除,或替换为 2D 对应项。例如,您可以将表示建筑物的场景图层与表示建筑物的面 FeatureLayer 切换为表示建筑物覆盖区的面。ElevationLayer 不需要像上面提到的其他图层那样仔细考虑,因为在 MapViews 中会忽略地图的地面
  • 符号 - 虽然大多数 2D 符号在 SceneView 中可用,但 MapView 中不支持所有 3D 符号。如果使用 3D 符号,则可能需要重新配置渲染器
  • UI 组件 - 如果使用 view.ui.add() 添加微件和其他 UI 组件,请记住,这些组件需要额外的逻辑才能从一个视图保存到下一个视图。
  • 微件 - API 中的所有微件都绑定到特定视图。如果需要将微件从 2D 视图持久化为 3D 视图,则需要包含额外的逻辑来切换每个微件引用的视图。这包括视图的弹出窗口实例。

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.