当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


JavaScript esri/views/SceneView用法及代码示例


基本信息

以下是所在类或对象的基本信息。

AMD: require(["esri/views/SceneView"], (SceneView) => { /* code goes here */ });

ESM: import SceneView from "@arcgis/core/views/SceneView";

类: esri/views/SceneView

继承: SceneView > View > Accessor

自从:用于 JavaScript 4.0 的 ArcGIS API

用法说明

概述

SceneView 使用 WebGL 显示 MapWebScene 实例的 3D 视图。要以 2D 形式渲染Map及其图层,请参阅 MapView 的文档。有关视图的一般概述,请参阅View

Various scenes

对于要在 DOM 中对用户可见的Map,SceneView 必须同时具有有效的 Map instance 和具有非零高度和宽度的 DOM element 以进行渲染。请注意,在视图开始渲染Map之前,map 中必须有有效数据,例如 operational layers 或带有基础层的 basemap

// Create a basic SceneView instance with a basemap and world elevation
const view = new SceneView({
  // An instance of Map or WebScene
  map: new Map({
    basemap: "hybrid"
  }),

  // The id of a DOM element (may also be an actual DOM element)
  container: "viewDiv"
});

使用视图

SceneView 在构建后可能无法立即显示。例如,可能需要首先加载Map数据以确定视图的spatialReference,或者 DOM 容器可能还没有非零大小。许多视图方法(例如 hitTestgoTo )需要在使用之前准备好视图。

// create a SceneView instance (for 3D viewing)
const view = new SceneView({
  map: new Map({
    basemap: "topo-vector"
  }),
  container: "viewDiv"
});

view.when(function() {
  // SceneView is now ready for display and can be used. Here we will
  // use goTo to view a particular location at a given zoom level, camera
  // heading and tilt.
  view.goTo({
    center: [-112, 38],
    zoom: 13,
    heading: 30,
    tilt: 60
  })
})
.catch(function(err) {
  // A rejected view indicates a fatal error making it unable to display,
  // this usually means that WebGL is not available, or too old.
  console.error("SceneView rejected:", err);
});

有关 view.when() 的实时示例,请参阅 2D overview map in SceneViewToggle elevation layer 示例。

SceneView 导航

可以通过goTo() 和视图属性以编程方式导航视图,也可以使用鼠标、键盘或触摸输入进行交互。 SceneView 导航默认启用,包括鼠标、键盘和触摸交互,如下表所述。触摸交互可在任何启用触摸的显示器或笔记本电脑屏幕上进行。

行动 SceneView 行为
Drag Pan
Double-click 放大光标
向前滚动 放大光标
向后滚动 在视图中心缩小
右键单击+拖动 3D-rotate 围绕视图中心
方向键 向左、向右、向上或向下微调视图(仅在全局场景中支持)
B + 左键单击+拖动 3D-rotate围绕相机的位置
P 移动相机以垂直于视图中显示的数据
N 调整SceneView 指向北方
W 向上倾斜相机
A 逆时针旋转相机
S 向下倾斜相机
D 顺时针旋转相机
J 向下移动,靠近视图(仅在全局场景中支持)
U 从视图中向上移动(仅在全局场景中支持)
用一根或多根手指拖动 Pan
Double-tap用一根手指 放大手指位置
两指捏入/捏出 缩小/放大
顺时针或逆时针方向移动两根手指 Rotate
在屏幕上上下拖动两根手指 倾斜场景

要禁用SceneView 导航,您必须对触发导航的指针或手势事件的事件对象调用stopPropagation() 方法。

有关示例,请参阅我们在 disabling view navigation 上的示例。

SceneView 使用游戏手柄和 3DConnexion 设备进行导航

view.navigation.gamepad.enabled 设置为 true(默认)时,游戏手柄和 3Dconnexion 设备(如 SpaceMouse)可用于导航。有关支持的设备,请参阅GamepadInputDevice

Gamepad

游戏手柄动作 SceneView 行为
左触发器 Descend
右触发器 Ascend
左摇杆 Pan
右摇杆 3D-rotate 围绕视图中心
动作形象 SpaceMouse 动作 SceneView 行为
3DMousePan 推(左/右/前/后) Pan
3DMousePan 拉起 Ascend
3DMousePan 向下推 Descend
3DMousePan 顺时针旋转 顺时针旋转视图
3DMousePan 逆时针旋转 逆时针旋转视图
3DMousePan Tilt 倾斜场景

要禁用游戏手柄导航,您可以将 view.navigation.gamepad.enabled 设置为 false

注意:

  • 根据 W3C Working Draft 29 October 2020 ,如果 Web 应用程序托管在 non-secure context(例如 http 而不是 https)上,则游戏手柄函数可能无法在部分或所有浏览器上使用。用于 JavaScript 的 ArcGIS API 的未来版本可能会在非安全上下文中显式禁用游戏手柄函数。

程序化导航

传统的 2D 映射属性,例如 scalezoomcenterextent 在 3D 中并不总是有效。例如,在地球环境中查看时,Map的scale 并不清晰。因此,SceneView 会尽最大努力支持这些属性,但有一定的限制(有关详细信息,请参阅各个属性的文档)。

// Compatibility with 2D viewing properties, such as center and zoom, allows
// convenient transitioning from the familiar use of the 2D MapView to the
// use of the SceneView for 3D viewing.
let view = new SceneView({
  map: new Map({
    basemap: "satellite"
  }),

  container: "viewDiv",

  // Sets the center point of the view at a specified lon/lat
  center: [-112, 38],

  // Sets the zoom LOD to 13
  zoom: 13
});

3D 查看的性质包括倾斜视图、z-values 和旋转,所有这些都增加了定义视图中可见内容的复杂性。与主要由 extentcenterscale 定义的 2D MapView 相比,SceneView 的主要视图规范是 Camera 实例。 camera 由 3D positionheadingtilt 定义。有关详细信息,请参阅Camera 的文档。

由于某些视图属性重叠(例如 centercamera ),因此在构建视图期间应用这些属性有一个设置的优先级(直到视图准备就绪)。下表说明了在视图构建期间哪些属性具有优先级(被覆盖的属性在构建期间将不起作用)。

属性 覆盖
camera viewpoint , extent , center , scale , zoom
viewpoint extent , center , scale , zoom
extent center , scale , zoom
scale zoom

定义camera 以查看特定位置的数据可能很困难。 goTo 方法提供了一种方便的方法,可以根据您想要查看的数据(几何图形、图形)以及使用航向、倾斜、缩放或缩放从任何角度设置视图的相机。此外,默认情况下,goTo 将平滑过渡到视图的新位置。

// go to a location specified in geographic coordinates,
// from a 45 degree angle.
view.goTo({
  center: [-112, 38],
  heading: 45
});

// go to view all the graphics in view.graphics, while northing the
// the camera and tilting it to 60 degrees
view.goTo({
  target: view.graphics,
  heading: 0,
  tilt: 60
});

// Set the view to show an extent at a -20 degree heading, disabling the
// animated transition
view.goTo({
  target: new Extent(694942, 5596444, 1284090, 6163926, SpatialReference.WebMercator),
  heading: -20
}, {
  animate: false
});

观看模式

global vs local

SceneView 支持两种不同的查看模式,global(上左图)和local(上右图),由viewingMode 属性指定。全局场景将地球渲染为一个球体,而局部场景将表面渲染为平面。本地模式允许在本地化或clipped 区域中进行导航和函数显示。在两种查看模式下,用户可以通过将 Ground.navigationConstraint.type 设置为 none 来导航地表以下的相机。

查看模式(如果用户未明确设置)是根据视图的空间参考确定的。如果空间参考是 Web Mercator、WGS84、CGCS2000、Mars_2000_(Sphere)、GCS_Mars_2000 或 GCS_Moon_2000,则 viewingMode 将默认为 global 。对于任何其他空间参考,viewingMode 将默认为 local

支持的坐标系

SceneView 支持全局场景中的以下坐标系:

  • WGS84WebMercatorCGCS2000
  • 对 Mars_2000_(Sphere)、GCS_Mars_2000 和 GCS_Moon_2000 的支持是实验性的(参见可视化火星上的数据样本)。具有这些坐标系的场景具有以下限制:
    • 不支持动态图层、矢量切片图层和场景图层
    • 日光当前未正确显示
    • 无法保存到门户项目

在局部场景中,支持以下坐标系:

非缓存图层可以添加到具有任何空间参考的场景中,因为它们将被重新投影到场景空间参考中。具有 GCS WGS84 的场景图层也可以添加到具有 Web 墨卡托空间参考的场景中。

请参阅 spatialReference 以了解如何导出 SceneView 的空间参考。

使用高程数据

在渲染地表时,SceneView 将使用Map.ground 中的elevation layers 作为高程源。与 basemap 类似,ground 可以使用众所周知的名称进行初始化,从而使用一组已知的高程图层创建它。

let view = new SceneView({
  map: new Map({
    basemap: "satellite",

    // A ground preset containing a single elevation layer, sourced from
    // https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer
    ground: "world-elevation"
  },

  container: "viewDiv"
});

可以将局部高程图层添加到 ground.layers 以将多个高程源合并到一个表面中。有关示例,请参见3D Map With Elevation Services

处理事件

当用户与 SceneView 交互时,他们的操作会触发您可以监听和响应的事件。例如,您可以在用户将鼠标移动到Map上时进行监听,并在鼠标位置显示坐标。这称为pointer-move 事件。有关所有事件的列表,请参阅SceneView events 部分。

需要注意的是,一些事件相互依赖,用户交互的时间会影响触发事件的类型。例如,单击会触发一系列事件:pointer-down 用户按下鼠标按钮,pointer-up 用户松开鼠标按钮。 immediate-click 事件在 pointer-up 事件之后立即触发。 immediate-click 应该用于无延迟地响应用户交互。 click 事件仅在确保用户没有第二次单击后才会触发(在这种情况下,它将触发 double-click 事件)。

Various events

在双击的情况下,第一次单击后重复相同的事件链。但是,如果用户在关闭的时间范围内再次单击,则不再发出 click 事件,但会再次触发 pointer-downpointer-upimmediate-click 事件。在两个 immediate-click 事件之后,将触发 double-click 事件以及 immediate-double-click 事件。两者之间的区别在于,immediate-double-click 无法通过在immediate-click 事件上使用stopPropagation 来防止,因此可用于独立于immediate-click 事件的使用对double-clicking 作出反应。

这些事件也在内部用于导航、弹出窗口或不同的交互工具,如测量或草图。在某些用例中,添加额外的事件侦听器可能会干扰默认事件侦听器。例如,添加immediate-click 事件来打开一个弹出窗口,将干扰同样打开一个弹出窗口的默认 click 事件。

请参阅Event explorer 示例,以可视化与视图交互时触发的不同事件。

已知限制

  • 可以在 SceneView 中渲染的要素数量取决于视图的 qualityProfile 以及每个要素的几何图形和符号的复杂性。导航场景时会动态加载和显示具有大量特征的图层。为了获得最佳性能,显示的特征数量会根据符号的复杂性和设备函数进行调整。因此,某些要素可能在视图中不可见。

  • SceneView 不支持Multipoint 几何体的渲染。

相关用法


注:本文由纯净天空筛选整理自arcgis.com大神的英文原创作品 esri/views/SceneView。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。