View

视图提供了查看 Map 组件并与之交互的方法。Map 只是一个容器，存储了底图和业务图层中包含的地理信息。View 渲染 Map 和所属的 layers, 使它们对用户可见。

有两种视图类型： MapView 和 SceneView。MapView 以 2D 形式渲染 Map 及其图层。SceneView 以 3D 形式渲染这些元素。View 是 MapView 和 SceneView 的基类，没有构造函数。要创建视图，您必须直接创建 MapView 或 SceneView 的实例。

MapView (2D)	SceneView (3D)

要将视图与地图相关联，您必须将 map 设置为 Map 的实例。

// 加载 Map 和 Map
require(["geoscene/Map", "geoscene/views/MapView"], function(Map, MapView) {
  // 创建 Map 实例
  let map = new Map({
    basemap: "tianditu-image"
  });

  // 创建一个 MapView 实例（用于 2D 查看）并将其地图属性设置为
  // 我们刚刚创建的地图实例
  let view = new MapView({
    map: map,
    container: "viewDiv"
  });
});

在上面的代码片段中，您会注意到视图上设置了一个 container 属性。container 属性是对包含视图的 DOM 节点的引用。这通常是一个<div> 元素。上面示例中引用的容器可能类似于：

<body>
 <div id="viewDiv"></div>
</body>

您可以在创建 2D 地图教程和任何可用 samples 中观察视图与 HTML 容器的关系。

可以在视图上设置其他 properties ，例如旋转、缩放、弹出和填充。有关在 2D 和 3D 中创建视图的特定属性，请参阅 MapView 和 SceneView 。

Map 可能有多个与之关联的视图，包括 MapViews 和 SceneViews 的组合。请参阅 SceneView 示例中的 Geodesic buffers 和 2D overview map，了解 MapView 和 SceneView 如何在单个应用程序中显示相同的地图。虽然多个视图可以引用同一个地图，但一个视图可能不会将自己与多个 Map 实例相关联。

View 还允许用户与地图的组件进行交互。例如，当用户点击或触摸地图中某个要素的位置时，他们既没有触摸该要素也没有触摸地图；该事件实际上是由引用地图的 View 和引用图层的 LayerView 处理的。因此， click 等事件不在 Map 或 Layer 上处理，而是在 View 上处理。有关其他详细信息，请参阅 MapView 和 SceneView 。

示例:

属性列表

可以设置、检索或监听的属性。参见使用属性。

展示继承属性

隐藏继承属性

类型	描述	类
Collection<LayerView>	更多信息包含与此视图中的底图、业务图层和图层组相关的所有已创建 LayerViews 的平面列表的集合。	更多信息	View
ViewAnimation	更多信息表示由 goTo() 初始化的持续视图动画。	更多信息	View
BasemapView	更多信息表示将单个底图添加到地图后的视图。	更多信息	View
HTMLDivElement	更多信息表示包含视图的 DOM 元素的 `id` 或节点。	更多信息	View
String	更多信息类名。	更多信息	Accessor
Error	更多信息当视图丢失其 WebGL 上下文时返回一个致命错误。	更多信息	View
Boolean	更多信息表示浏览器焦点是否在视图上。	更多信息	View
Collection<Graphic>	更多信息允许将 graphics 直接添加到视图中的默认图形。	更多信息	View
Number	更多信息从视图容器元素读取的视图高度（以像素为单位）。	更多信息	View
Input	更多信息用于配置视图输入处理的选项。	更多信息	View
Boolean	更多信息指示视图是否正在与之交互（例如，在平移或通过交互工具时）。	更多信息	View
Collection<LayerView>	更多信息一个集合，其中包含地图中所有已创建的 LayerViews 的 operational layers 列表。	更多信息	View
Magnifier	更多信息放大镜允许将视图的一部分显示为视图顶部的放大镜图像。	更多信息	View
Map	更多信息要在视图中显示的 Map 对象的实例。	更多信息	View
Boolean	更多信息指示视图是否正在导航（例如在平移时）。	更多信息	View
Navigation	更多信息用于配置视图导航行为的选项。	更多信息	View
Object	更多信息使用 padding 属性使 center 和 extent 等在整个视图的一个子部分中起作用。	更多信息	View
Popup	更多信息显示 map 中 layers 的一般内容或属性的 Popup 对象。	更多信息	View
Boolean	更多信息当为 `true` 时，此属性指示视图是否成功满足所有依赖项，表示满足以下条件。	更多信息	View
Boolean	更多信息指示视图是否正在调整大小。	更多信息	View
Number	更多信息以视图的 spatialReference 为单位表示一个像素的当前值。	更多信息	View
Number []	更多信息包含视图宽度和高度的数组，以像素为单位，例如 `[width, height]`。	更多信息	View
SpatialReference	更多信息视图的空间参考。	更多信息	View
Boolean	更多信息指示视图是动画、导航还是调整大小。	更多信息	View
Boolean	更多信息指示视图是否在页面上可见。	更多信息	View
TimeExtent	更多信息视图的时间范围。	更多信息	View
String	更多信息视图的类型是 `2d` (即 MapView) 或者`3d` (即 SceneView).	更多信息	View
DefaultUI	更多信息公开视图中可用的默认小部件，并允许您打开和关闭它们。	更多信息	View
Boolean	更多信息指示视图是通过对网络的其他数据请求还是通过处理接收到的数据来更新的。	更多信息	View
Collection<View>	更多信息包含页面上活动视图的集合。	更多信息	View
Number	更多信息从视图容器元素读取的视图宽度（以像素为单位）。	更多信息	View

属性详细说明

allLayerViews Collection<LayerView>

包含与此视图中的底图、业务图层和图层组相关的所有已创建 LayerViews 的平面列表的集合。

示例:

LayerView

animation ViewAnimation

表示由 goTo() 初始化的持续视图动画。当视图的范围发生变化时，您可以 watch 该属性以得到通知。

示例:

goTo()

basemapView BasemapView

表示将单个底图添加到地图后的视图。

container HTMLDivElementautocast 自动转换自 String

表示包含视图的 DOM 元素的 id 或节点。这通常在视图的构造函数中设置。

示例代码:

// 将容器设置为 DOM id
let view = new MapView({
  container: "viewDiv"  // 保存视图的 HTML 元素的 ID
});

// 将容器设置为节点
let viewNode = document.getElementById("viewDiv");
let view = new SceneView({
  container: viewNode
});

declaredClass Stringreadonly inherited 起始版本: GeoScene API for JavaScript 4.22

类名。类的名称声明格式为 geoscene.folder.className。

fatalError Error 起始版本: GeoScene API for JavaScript 4.22

当视图丢失其 WebGL 上下文时返回一个致命错误。观察此属性以正确处理错误并尝试恢复 WebGL 上下文。

示例:

tryFatalErrorRecovery()

示例代码:

view.watch("fatalError", function(error) {
  if(error) {
    console.error("Fatal Error! View has lost its WebGL context. Attempting to recover...");
    view.tryFatalErrorRecovery();
  }
});

focused Booleanreadonly 起始版本: GeoScene API for JavaScript 4.22

表示浏览器焦点是否在视图上。

graphics Collection<Graphic>

允许将 graphics 直接添加到视图中的默认图形。

示例:

示例代码:

// 将图形添加到视图
view.graphics.add(pointGraphic);

// 从视图中移除一个图形
view.graphics.remove(pointGraphic);

height Numberreadonly

从视图容器元素读取的视图高度（以像素为单位）。

视图容器的高度需要大于 0 才能显示。

默认值:0

input Inputreadonly 起始版本: GeoScene API for JavaScript 4.22

用于配置视图输入处理的选项。

示例代码:

// 使游戏手柄事件独立于焦点发出。
view.input.gamepad.enabledFocusMode = "none";

interacting Booleanreadonly

指示视图是否正在与之交互（例如，在平移或通过交互工具时）。

默认值:false

layerViews Collection<LayerView>

一个集合，其中包含地图中所有已创建的 LayerViews 的 operational layers 列表。

示例:

LayerView

magnifier Magnifierreadonly 起始版本: GeoScene API for JavaScript 4.22

放大镜允许将视图的一部分显示为视图顶部的放大镜图像。

map Mapautocast

要在视图中显示的 Map 对象的实例。一个视图一次只能显示一张地图。此外，一个 Map 可以同时被多个 MapViews 和/或 SceneViews 查看。

该属性通常在 MapView 或 SceneView 的构造函数中设置。有关演示地图和视图之间关系的示例，请参见类描述。

navigating Booleanreadonly

指示视图是否正在导航（例如在平移时）。

默认值:false

navigation Navigation 起始版本: GeoScene API for JavaScript 4.22

用于配置视图导航行为的选项。

示例代码:

// 禁用游戏手柄使用、单点触控平移、平移动量和鼠标滚轮缩放。
const view = new MapView({
  container: "viewDiv",
  map: new Map({
    basemap: "geoscene-community"
  }),
  center: [176.185, -37.643],
  zoom: 13,
  navigation: {
    gamepad: {
      enabled: false
    },
    browserTouchPanEnabled: false,
    momentumEnabled: false,
    mouseWheelZoomEnabled: false
  }
});

padding Object

使用 padding 属性使 center 和 extent 等在整个视图的一个子部分中起作用。这在将 UI 元素或半透明内容分层放置在视图的部分顶部时特别有用。有关其工作原理的示例，请参见视图填充示例。

属性:

left Number

optional

左边距（以像素为单位）。

top Number

optional

上边距（以像素为单位）。

right Number

optional

右边距（以像素为单位）。

bottom Number

optional

下边距（以像素为单位）。

默认值:{left: 0, top: 0, right: 0, bottom: 0}

示例:

Sample - View padding

popup Popupautocast

显示 map 中 layers 的一般内容或属性的 Popup 对象。

该视图有一个带有预定义样式的默认 Popup 实例和一个用于定义内容的模板。此默认实例中的内容可以直接在 popup 的内容或图层的 PopupTemplate 中进行修改。

您可以创建一个新的 Popup实例并将其设置为该属性以自定义弹出窗口的样式、位置和内容，以支持在视图上使用默认的弹出窗口实例。

示例代码:

// 此语法防止任何弹出窗口打开并将它们从应用程序中删除
view.popup = null;

// 此语法禁用视图上的点击事件
view.popup.autoOpenEnabled = false;

ready Booleanreadonly

当为 true 时，此属性指示视图是否成功满足所有依赖项，表示满足以下条件。

该视图有一个 map。如果 map 是 WebMap 或 WebScene, 则必须 loaded 地图或场景。
视图有一个大小大于 0 的 container。
该视图具有 spatialReference、center 和 scale。这些也可以通过设置 extent 来推断。

当视图准备就绪时，它将自行解析并调用 when() 中定义的回调，代码可以在工作视图上执行。对视图准备情况的后续更改通常会通过查看view.ready 并为 map 或 container 更改的情况提供逻辑来处理。

默认值:false

示例:

when()

resizing Booleanreadonly

指示视图是否正在调整大小。

默认值:false

resolution Numberreadonly 起始版本: GeoScene API for JavaScript 4.22

以视图的 spatialReference 为单位表示一个像素的当前值。分辨率的值是通过将视图的 extent width 除以其 width 来计算的。

size Number []readonly

包含视图宽度和高度的数组，以像素为单位，例如 [width, height]。

spatialReference SpatialReferenceautocast

视图的空间参考。这表示用于在地图中定位地理要素的投影或地理坐标系。

默认值:null

stationary Booleanreadonly

指示视图是动画、导航还是调整大小。

suspended Booleanreadonly

true 时，视图不可见并且停止渲染和更新数据。当满足以下条件之一时设置为 true：

如果视图没有 container,
如果视图的 height 或 width 等于 0,
如果视图容器的 css 样式 display 设置为 none (display:none)。

当视图容器的 css 样式 visibility 设置为 hidden 时，该属性设置为 false，视图被隐藏但仍会渲染和更新数据。

默认值:true

timeExtent TimeExtentautocast 起始版本: GeoScene API for JavaScript 4.22

视图的时间范围。时间感知层显示其在视图时间范围内的时态数据。设置视图的时间范围与设置空间 extent 类似，因为一旦设置了时间范围，视图就会自动更新以适应变化。

默认值:null

示例代码:

// 从在线电子表格创建一个 csv 层。
let csvLayer = new CSVLayer({
  url: "http://test.com/daily-magazines-sold-in-new-york.csv",
  timeInfo: {
    startField: "SaleDate" // csv 字段包含日期信息。
  }
});

// 创建仅显示 2019 年 3 月最后一周销售额的 mapview。
let view = new MapView({
  map: map,
  container: "viewDiv",
  timeExtent: {
    start: new Date("2019, 2, 24"),
    end:   new Date("2019, 2, 31")
  }
});

type Stringreadonly

视图的类型是 2d (即 MapView) 或者3d (即 SceneView).

ui DefaultUIautocast

公开视图中可用的默认微件，并允许您打开和关闭它们。有关更多详细信息，请参阅 DefaultUI。

示例代码:

let toggle = new BasemapToggle({
  view: view,
  nextBasemap: "tianditu-image"
});
// 将 BasemapToggle 小部件的实例
// 添加到视图的右上角。 
view.ui.add(toggle, "top-right");

// 将缩放和 BasemapToggle 小部件
//移动到视图的左下方。 
view.ui.move([ "zoom", toggle ], "bottom-left");

// 移除视图左下角的所有小部件
view.ui.empty("bottom-left");

// 从视图中移除指南针小部件
view.ui.remove("compass");

// 移除除 Attribution 之外的所有默认 UI 组件。
// 传递一个空数组将删除所有组件。 
view.ui.components = [ "attribution" ];

updating Booleanreadonly

指示视图是通过对网络的其他数据请求还是通过处理接收到的数据来更新的。

默认值:false

views Collection<View>static,readonly 起始版本: GeoScene API for JavaScript 4.22

包含页面上活动视图的集合。只有 ready 的视图才会出现在集合中。

width Numberreadonly

从视图容器元素读取的视图宽度（以像素为单位）。

视图容器的宽度需要大于 0 才能显示。

默认值:0

方法列表

返回值类型	描述	类
	更多信息销毁视图和任何相关资源，包括其 map, popup 和 UI 元素。	更多信息	View
Boolean	更多信息在实例上触发事件。	更多信息	View
	更多信息将焦点设置在视图上。	更多信息	View
Boolean	更多信息指示实例上是否存在与提供的事件名称匹配的事件侦听器。	更多信息	View
Boolean	更多信息指示实例上是否存在与提供的事件名称匹配的事件侦听器。	更多信息	View
Boolean	更多信息 `isFulfilled()` 可用于验证创建类的实例是否已完成(无论成功或失败)。	更多信息	View
Boolean	更多信息 `isRejected()` 可用于验证创建类的实例是否失败。	更多信息	View
Boolean	更多信息 `isResolved()` 可用于验证创建类的实例是否成功。	更多信息	View
Object	更多信息在实例上注册事件处理程序。	更多信息	View
Object	更多信息在实例上注册事件处理程序。	更多信息	View
	更多信息调用此方法可清除因丢失 WebGL 上下文而导致的任何致命错误。	更多信息	View
Promise	更多信息 `when()` 创建类的实例后，会被执行一次。	更多信息	View
Promise<LayerView>	更多信息获取在给定图层的视图上创建的 LayerView。	更多信息	View

方法详细说明

destroy() 起始版本: GeoScene API for JavaScript 4.22

销毁视图和任何相关资源，包括其 map, popup 和 UI 元素。一旦视图被破坏，这些就不能再使用了。为了防止这些组件被破坏，请在调用 destroy() 之前将它们从视图中移除。

// 从视图中删除弹出窗口和图例，这样它们就不会被破坏
const popup = view.popup;
view.popup = null;
view.ui.remove(legend);

// 从视图中取消设置地图，使其不被破坏
const map = view.map;
view.map = null;

// 销毁视图和任何剩余的相关资源
view.destroy();

示例:

emit(type, event){Boolean} 起始版本: GeoScene API for JavaScript 4.22

在实例上触发事件。仅当创建此类的子类时才应使用此方法。

参数:

type String

事件名称

event Object

optional

事件负载。

返回值:

类型	描述
Boolean	如果侦听器收到通知，则为 `true` 。

focus() 起始版本: GeoScene API for JavaScript 4.22

将焦点设置在视图上。

hasEventListener(type){Boolean}

指示实例上是否存在与提供的事件名称匹配的事件侦听器。

参数:

type String

事件名称

返回值:

类型	描述
Boolean	如果类支持输入事件，则返回 true。

hasEventListener(type){Boolean}

指示实例上是否存在与提供的事件名称匹配的事件侦听器。

参数:

type String

事件名称

返回值:

类型	描述
Boolean	如果类支持输入事件，则返回 true。

isFulfilled(){Boolean}

isFulfilled() 可用于验证创建类的实例是否已完成(无论成功或失败)。如果已完成，将会返回true。

返回值:

类型	描述
Boolean	指示创建类的实例是否已完成（无论成功或失败）。

isRejected(){Boolean}

isRejected() 可用于验证创建类的实例是否失败。如果失败, 将会返回 true 。

返回值:

类型	描述
Boolean	指示是否已拒绝创建类的实例。

isResolved(){Boolean}

isResolved() 可用于验证创建类的实例是否成功。如果成功, 将会返回 true 。

返回值:

类型	描述
Boolean	指示是否已解析创建类的实例。

on(type, modifiersOrHandler, handler){Object}

在实例上注册事件处理程序。调用此方法以将事件与侦听器挂钩。有关已侦听事件的列表，请参阅事件摘要表。

参数:

type String|String []

要监听的一个或多个事件的名称。

modifiersOrHandler String []|Function

用于过滤事件的附加修饰键。请参阅 Key Values 以获取可能的值。支持所有标准键值。或者，如果不需要修饰符，则该函数将在事件触发时调用。

以下事件不支持修饰键： blur, focus, layerview-create, layerview-destroy, resize.

handler Function

optional

触发事件时调用的函数（如果指定了修饰符）。

返回值:

类型描述

Object

返回带有 remove() 方法的事件处理程序，可以调用该方法来停止监听事件。

属性	类型	描述
remove	Function	当被调用时，从事件中移除监听器。

示例代码:

view.on("click", function(event){
  // event是事件触发后返回的事件句柄。
  console.log(event.mapPoint);
});

// 当用户点击“Shift”键并在视图上移动
// 指针时触发 `pointer-move` 事件。
view.on('pointer-move', ["Shift"], function(event){
  let point = view2d.toMap({x: event.x, y: event.y});
  bufferPoint(point);
});

on(type, listener){Object}

在实例上注册事件处理程序。调用此方法将事件与侦听器挂钩

参数:

type String|String []

要监听的event 或者事件数组

listener Function

事件触发时要调用的函数

返回值:

类型描述

Object

返回一个remove() 方法的事件处理程序，该方法用以停止侦听事件。

属性	类型	描述
remove	Function	当被调用时，从事件中移除监听器。

示例代码:

view.on("click", function(event){
  // event是事件触发后返回的事件句柄。
  console.log(event.mapPoint);
});

tryFatalErrorRecovery() 起始版本: GeoScene API for JavaScript 4.22

调用此方法可清除因丢失 WebGL 上下文而导致的任何致命错误。

示例:

fatalError

示例代码:

view.watch("fatalError", function(error) {
  if(error) {
    view.tryFatalErrorRecovery();
  }
});

when(callback, errback){Promise} 起始版本: GeoScene API for JavaScript 4.22

when() 创建类的实例后，会被执行一次。该方法接受两个参数： callback 函数和 errback 函数。 callback 在类的实例加载时执行。如果类的实例无法加载，则执行 errback。

参数:

callback Function

optional

当 Promise 成功时，该函数将被调用。

errback Function

optional

当 Promise 失败时，该函数将被调用。

返回值:

类型	描述
Promise	返回回调结果的新promise，可用于链接其他函数。

示例代码:

// 尽管此示例使用 MapView，但任何作为 Promise 的类实例都可以以相同的方式使用 when()
let view = new MapView();
view.when(function(){
  // 当 Promise resolved 时，函数将被执行
}, function(error){
  // 当 Promise 通过 rejected 抛错时，这个函数将被执行
});

whenLayerView(layer){Promise<LayerView>}

获取在给定图层的视图上创建的 LayerView。返回 promise，在给定图层的图层视图已创建时 resolve，错误时 reject（例如，如果图层不是视图的一部分，或者此视图不支持图层类型）。

参数:

layer Layer

要获取其LayerView的层。

返回值:

类型	描述
Promise<LayerView>	解析为指定层的 LayerView 实例。

示例:

Sample - StreamLayer

示例代码:

// 从指向要素服务的 url 创建要素层
let layer = new FeatureLayer(url);

map.add(layer);

view.whenLayerView(layer)
    .then(function(layerView) {
      // 图层的图层视图
    })
    .catch(function(error) {
      // 创建layerview时出错
    });

Event Overview

类型	描述	类
{target: View,native: Object}	更多信息当浏览器焦点从视图移开时触发。	更多信息	View
{mapPoint: Point,x: Number,y: Number,button: Number,buttons: 0,1,2,type: "click",stopPropagation: Function,timestamp: Number,native: Object}	更多信息在用户点击视图后触发。	更多信息	View
{mapPoint: Point,x: Number,y: Number,button: Number,buttons: 0,1,2,type: "double-click",stopPropagation: Function,timestamp: Number,native: Object}	更多信息双击视图后触发。	更多信息	View
{action: "start","added","update","removed","end",x: Number,y: Number,origin: Object,origin.x: Number,origin.y: Number,button: 0,1,2,buttons: Number,type: "drag",radius: Number,angle: Number,stopPropagation: Function,timestamp: Number,native: Object}	更多信息在视图上拖动指针时触发。	更多信息	View
{target: View,native: Object}	更多信息当浏览器焦点在视图上时触发。	更多信息	View
{mapPoint: Point,x: Number,y: Number,button: 0,1,2,buttons: Number,type: "hold",stopPropagation: Function,timestamp: Number,native: Object}	更多信息在视图上按住鼠标按钮或单指短时间后触发。	更多信息	View
{mapPoint: Point,x: Number,y: Number,button: 0,1,2,buttons: Number,type: "immediate-click",stopPropagation: Function,timestamp: Number,native: Object}	更多信息在用户点击视图后立即触发。	更多信息	View
{mapPoint: Point,x: Number,y: Number,button: 0,1,2,buttons: Number,type: "immediate-double-click",stopPropagation: Function,timestamp: Number,native: Object}	更多信息在两个连续的 immediate-click 事件之后发出。	更多信息	View
{repeat: Boolean,key: String,type: "key-down",stopPropagation: Function,timestamp: Number,native: Object}	更多信息按下键盘键后触发。	更多信息	View
{type: "key-up",key: String,stopPropagation: Function,timestamp: Number,native: Object}	更多信息释放键盘按键后触发。	更多信息	View
{layer: Layer,layerView: LayerView}	更多信息在地图中的每个图层都在视图中创建并呈现相应的 LayerView 后触发。	更多信息	View
{layer: Layer,error: Error}	更多信息将图层添加到地图后，在创建 LayerView 期间发出错误时触发。	更多信息	View
{layer: Layer,layerView: LayerView}	更多信息在 LayerView 被销毁并且不再在视图中呈现后触发。	更多信息	View
{x: Number,y: Number,deltaY: Number,type: "mouse-wheel",stopPropagation: Function,timestamp: Number,native: Object}	更多信息当指针设备（通常是鼠标）的滚轮按钮在视图上滚动时触发。	更多信息	View
{pointerId: Number,pointerType: "mouse","touch",x: Number,y: Number,button: Number,buttons: Number,type: "pointer-down",stopPropagation: Function,timestamp: Number,native: Object}	更多信息在按下鼠标按钮或手指触摸显示屏后触发。	更多信息	View
{pointerId: Number,pointerType: "mouse","touch",x: Number,y: Number,button: Number,buttons: Number,type: "pointer-enter",stopPropagation: Function,timestamp: Number,native: Object}	更多信息在鼠标光标进入视图或显示触摸开始后触发。	更多信息	View
{pointerId: Number,pointerType: "mouse","touch",x: Number,y: Number,button: Number,buttons: Number,type: "pointer-leave",stopPropagation: Function,timestamp: Number,native: Object}	更多信息在鼠标光标离开视图或显示触摸结束后触发。	更多信息	View
{pointerId: Number,pointerType: "mouse","touch",x: Number,y: Number,button: Number,buttons: Number,type: "pointer-move",stopPropagation: Function,timestamp: Number,native: Object}	更多信息鼠标或手指在显示屏上移动后触发。	更多信息	View
{pointerId: Number,pointerType: "mouse","touch",x: Number,y: Number,button: Number,buttons: Number,type: "pointer-up",stopPropagation: Function,timestamp: Number,native: Object}	更多信息在释放鼠标按钮或显示触摸结束后触发。	更多信息	View
{oldWidth: Number,oldHeight: Number,width: Number,height: Number}	更多信息当视图大小改变时触发。	更多信息	View

Event Details

blur 起始版本: GeoScene API for JavaScript 4.22

当浏览器焦点从视图移开时触发。

属性:

target View

浏览器焦点移离的视图。

native Object

标准的 DOM 键盘事件。

click

在用户单击视图后触发。此事件发出的速度比 immediate-click 事件稍慢，以确保不会触发 double-click 事件。immediate-click 可用于无延迟地响应点击事件。

属性:

mapPoint Point

在地图的空间参考中点击视图的点位置。

x Number

点击视图的横屏坐标。

y Number

点击视图的屏幕纵坐标。

button Number

指示单击了哪个鼠标按钮。

buttons Number

表示当前鼠标按键状态。

值	描述
0	左键单击（或触摸）
1	中键单击
2	右键单击

可选值:0|1|2

type String

事件类型

该值通常是 "click".

stopPropagation Function

防止事件在事件链中冒泡。

timestamp Number

发出事件的时间戳（以毫秒为单位）。

native Object

一个标准的 DOM PointerEvent.

示例:

Sample: Access features with click events

示例代码:

// 设置点击事件处理程序并检索屏幕点
view.on("click", function(event) {
 // hotTest() 检查视图中是否有任何图形
 // 与给定的屏幕 x、y 坐标相交
 view.hitTest(event)
  .then(getGraphics);
});

view.on("click", function(event) {
 // 您必须覆盖默认的点击弹出行为
 // 以显示您自己的弹出窗口 
 view.popup.autoOpenEnabled = false;

 // 获取点击视图的坐标
 let lat = Math.round(event.mapPoint.latitude * 1000) / 1000;
 let lon = Math.round(event.mapPoint.longitude * 1000) / 1000;

 view.popup.open({
   // 将弹出窗口的标题设置为位置坐标
   title: "Reverse geocode: [" + lon + ", " + lat + "]",
   location: event.mapPoint // 设置弹窗位置为点击位置
   content: "This is a point of interest"  // 弹出窗口中显示的内容
 });
});

double-click

双击视图后触发。

属性:

mapPoint Point

在地图的空间参考中点击视图的点位置。

x Number

点击视图的横屏坐标。

y Number

点击视图的屏幕纵坐标。

button Number

指示单击了哪个鼠标按钮。

buttons Number

表示当前鼠标按键状态。

值	描述
0	左键单击（或触摸）
1	中键单击
2	右键单击

可选值:0|1|2

type String

事件类型

该值通常是 "double-click".

stopPropagation Function

防止事件在事件链中冒泡。

timestamp Number

发出事件的时间戳（以毫秒为单位）。

native Object

一个标准的 DOM PointerEvent.

示例代码:

view.on("double-click", function(event) {
  // 事件对象包含被点击位置的
  // mapPoint 和屏幕坐标。
  console.log("screen point", event.x, event.y);
  console.log("map point", event.mapPoint);
});

drag

在视图上拖动指针时触发。

属性:

action String

指示拖动的状态。added 和removed 的两个值表明所涉及的指针数量发生了变化。

可选值:"start"|"added"|"update"|"removed"|"end"

x Number

视图上指针的屏幕横坐标。

y Number

视图上指针的屏幕纵坐标。

origin Object

拖动开始的屏幕坐标。

规范:

x Number

视图上指针的屏幕横坐标。

y Number

视图上指针的屏幕纵坐标。

button Number

指示在拖动开始时单击了哪个鼠标按钮。请参阅 MouseEvent.button。

值	描述
0	鼠标左键（或触摸）
1	鼠标中键
2	鼠标右键

可选值:0|1|2

buttons Number

指示触发事件时按下了哪些鼠标按钮。请参阅 MouseEvent.buttons。

type String

事件类型

该值通常是 "drag".

radius Number

这个拖动涉及的多个指针周围的球体半径。为 0 时，只使用一个指针。

angle Number

自上次 start 类型事件以来的旋转量（以度为单位）。

stopPropagation Function

防止事件在事件链中冒泡。

timestamp Number

发出事件的时间戳（以毫秒为单位）。

native Object

一个标准的 DOM MouseEvent.

示例代码:

view.on("drag", function(event){
 //打印出拖动事件的
 // 当前状态。
 console.log("drag state", event.action);
});

focus 起始版本: GeoScene API for JavaScript 4.22

当浏览器焦点在视图上时触发。

属性:

target View

浏览器当前焦点所在的视图。

native Object

标准的 DOM 键盘事件。

hold

在视图上按住鼠标按钮或单指短时间后触发。

属性:

mapPoint Point

在地图的空间参考中点击视图的点位置。

x Number

在视图上触发 hold 的屏幕水平坐标。

y Number

在视图上触发 hold 的屏幕纵坐标。

button Number

指示按下了哪个鼠标按钮。请参阅 MouseEvent.button.

值	描述
0	鼠标左键（或触摸）
1	鼠标中键
2	鼠标右键

可选值:0|1|2

buttons Number

指示触发事件时按下了哪些鼠标按钮。请参阅 MouseEvent.buttons。

type String

事件类型

该值通常是 "hold".

stopPropagation Function

防止事件在事件链中冒泡。

timestamp Number

发出事件的时间戳（以毫秒为单位）。

native Object

一个标准的 DOM PointerEvent.

示例代码:

view.on("hold", function(event) {
  // 事件对象包含被点击位置的
  // mapPoint 和屏幕坐标。
  console.log("hold at screen point", event.x, event.y);
  console.log("hold at map point", event.mapPoint);
});

immediate-click 起始版本: GeoScene API for JavaScript 4.22

在用户单击视图后立即触发。与 click 事件相反，immediate-click 事件在用户单击视图时立即发出，并且不受 double-click 的抑制。此事件对于需要及时反馈的交互式体验很有用。

属性:

mapPoint Point

在地图的空间参考中点击视图的点位置。

x Number

点击视图的横屏坐标。

y Number

点击视图的屏幕纵坐标。

button Number

指示单击了哪个鼠标按钮。请参阅 MouseEvent.button。

值	描述
0	左键单击（或触摸）
1	中键单击
2	右键单击

可选值:0|1|2

buttons Number

指示触发事件时按下了哪些按钮。请参阅 MouseEvent.buttons。

type String

事件类型

该值通常是 "immediate-click".

stopPropagation Function

防止事件在事件链中冒泡。禁止关联的 click 和 double-click 事件。

timestamp Number

发出事件的时间戳（以毫秒为单位）。

native Object

一个标准的 DOM PointerEvent.

示例代码:

// 设置立即点击事件处理程序并检索屏幕点
view.on("immediate-click", function(event) {
 // hotTest() 检查视图中是否有任何图形
 // 与给定的屏幕 x、y 坐标相交
 view.hitTest(event)
  .then(getGraphics);
});

immediate-double-click 起始版本: GeoScene API for JavaScript 4.22

在两个连续的 immediate-click 事件之后发出。与 double-click相比， immediate-double-click 不能通过对 immediate-click 事件使用 stopPropagation 因此可以用于对双击做出反应，而与 immediate-click 事件的使用无关。

属性:

mapPoint Point

在地图的空间参考中点击视图的点位置。

x Number

点击视图的横屏坐标。

y Number

点击视图的屏幕纵坐标。

button Number

指示单击了哪个鼠标按钮。请参阅 MouseEvent.button。

值	描述
0	左键单击（或触摸）
1	中键单击
2	右键单击

可选值:0|1|2

buttons Number

指示触发事件时按下了哪些按钮。请参阅 MouseEvent.buttons。

type String

事件类型

该值通常是 "immediate-double-click".

stopPropagation Function

防止事件在事件链中冒泡。

timestamp Number

发出事件的时间戳（以毫秒为单位）。

native Object

一个标准的 DOM PointerEvent.

key-down

按下键盘键后触发。

属性:

repeat Boolean

指示按键是否重复触发了事件。

key String

按下的键值，根据 MDN 完整键值列表。

type String

事件类型

该值通常是 "key-down".

stopPropagation Function

防止事件在事件链中冒泡。

timestamp Number

发出事件的时间戳（以毫秒为单位）。

native Object

标准的 DOM 键盘事件。

示例代码:

// 当用户点击“a”时放大
// 当用户点击“s”时缩小
view.on("key-down", function(event){
 console.log("key-down", event);

 if (event.key === "a"){
   let zm = view.zoom + 1;

   view.goTo({
     target: view.center,
     zoom: zm
   });
 }
 else if(event.key == "s"){
   let zm = view.zoom - 1;

   view.goTo({
     target: view.center,
     zoom: zm
   });
 }
});

key-up

释放键盘按键后触发。

属性:

type String

事件类型

该值通常是 "key-up".

key String

按下后释放的键值，根据 MDN 完整键值列表。

stopPropagation Function

防止事件在事件链中冒泡。

timestamp Number

发出事件的时间戳（以毫秒为单位）。

native Object

标准的 DOM 键盘事件。

layerview-create

在地图中的每个图层都在视图中创建并呈现相应的 LayerView 后触发。

属性:

layer Layer

地图中为其创建 layerView 的图层。

layerView LayerView

视图中渲染的 LayerView 。

示例:

View.whenLayerView()

示例代码:

// 每次为视图地图中的图层创建图层视图时，
// 都会触发此函数。
view.on("layerview-create", function(event) {
  // 该事件包含刚刚创建的图层及其图层视图。
  // 在这里，我们检查是否为具有特定 id 的图层创建了图层视图，
  //并记录图层视图 
  if (event.layer.id === "geoscene-community") {
    // 所需层的 LayerView
    console.log(event.layerView);
  }
});

layerview-create-error

将图层添加到地图后，在创建 LayerView 期间发出错误时触发。

属性:

layer Layer

触发此事件的视图无法为其创建图层视图的地图图层。

error Error

描述层视图创建失败原因的错误对象。

示例:

View.whenLayerView()

示例代码:

// 在创建 layerview 的过程中每次发生错误都会触发这个函数
view.on("layerview-create-error", function(event) {
  console.error("LayerView failed to create for layer with the id: ", event.layer.id);
});

layerview-destroy

在 LayerView 被销毁并且不再在视图中呈现后触发。例如，当从视图的地图中删除图层时，就会发生这种情况。

属性:

layer Layer

地图中 layerView 被销毁的图层。

layerView LayerView

视图中被销毁的LayerView。

mouse-wheel

当指针设备（通常是鼠标）的滚轮按钮在视图上滚动时触发。

属性:

x Number

点击视图的横屏坐标。

y Number

点击视图的屏幕纵坐标。

deltaY Number

代表垂直滚动量的数字。

type String

事件类型

该值通常是 "mouse-wheel".

stopPropagation Function

防止事件在事件链中冒泡。

timestamp Number

发出事件的时间戳（以毫秒为单位）。

native Object

一个标准的 DOM WheelEvent.

示例代码:

view.on("mouse-wheel", function(event){
 // deltaY 值在滚轮向上滚动时为正
 // 在滚轮向下滚动时为负。
 console.log(event.deltaY);
});

pointer-down

在按下鼠标按钮或手指触摸显示屏后触发。

属性:

pointerId Number

唯一标识多个向下、移动和向上事件之间的指针。在指针向上事件之后，ID 可能会被重用。

pointerType String

表示指针类型。

可选值:"mouse"|"touch"

x Number

视图上指针的屏幕横坐标。

y Number

视图上指针的屏幕纵坐标。

button Number

指示单击了哪个鼠标按钮。

buttons Number

指示触发事件时按下了哪些鼠标按钮。请参阅 MouseEvent.buttons。

type String

事件类型

该值通常是 "pointer-down".

stopPropagation Function

防止事件在事件链中冒泡。

timestamp Number

发出事件的时间戳（以毫秒为单位）。

native Object

一个标准的 DOM PointerEvent.

pointer-enter

在鼠标光标进入视图或显示触摸开始后触发。

属性:

pointerId Number

在多个事件之间唯一标识一个指针。在 pointer-up 事件后，Id 可能会被重用。

pointerType String

表示指针类型。

可选值:"mouse"|"touch"

x Number

视图上指针的屏幕横坐标。

y Number

视图上指针的屏幕纵坐标。

button Number

指示单击了哪个鼠标按钮。

buttons Number

指示触发事件时按下了哪些鼠标按钮。请参阅 MouseEvent.buttons。

type String

事件类型

该值通常是 "pointer-enter".

stopPropagation Function

防止事件在事件链中冒泡。

timestamp Number

创建事件的时间戳（以毫秒为单位）。

native Object

一个标准的 DOM PointerEvent.

pointer-leave

在鼠标光标离开视图或显示触摸结束后触发。

属性:

pointerId Number

在多个事件之间唯一标识一个指针。在 pointer-up 事件后，Id 可能会被重用。

pointerType String

表示指针类型。

可选值:"mouse"|"touch"

x Number

视图上指针的屏幕横坐标。

y Number

视图上指针的屏幕纵坐标。

button Number

指示单击了哪个鼠标按钮。

buttons Number

指示触发事件时按下了哪些鼠标按钮。请参阅 MouseEvent.buttons。

type String

事件类型

该值通常是 "pointer-leave".

stopPropagation Function

防止事件在事件链中冒泡。

timestamp Number

创建事件的时间戳（以毫秒为单位）。

native Object

一个标准的 DOM PointerEvent.

pointer-move

鼠标或手指在显示屏上移动后触发。

属性:

pointerId Number

唯一标识多个向下、移动和向上事件之间的指针。在指针向上事件之后，ID 可能会被重用。

pointerType String

表示指针类型。

可选值:"mouse"|"touch"

x Number

视图上指针的屏幕横坐标。

y Number

视图上指针的屏幕纵坐标。

button Number

指示单击了哪个鼠标按钮。

buttons Number

指示触发事件时按下了哪些鼠标按钮。请参阅 MouseEvent.buttons。

type String

事件类型

该值通常是 "pointer-move".

stopPropagation Function

防止事件在事件链中冒泡。

timestamp Number

创建事件的时间戳（以毫秒为单位）。

native Object

一个标准的 DOM PointerEvent.

示例代码:

// 当用户点击“Shift”键并在视图上移动
// 指针时触发 `pointer-move` 事件。
view.on('pointer-move', ["Shift"], function(event){
  let point = view.toMap({x: event.x, y: event.y});
  bufferPoint(point);
});

pointer-up

在释放鼠标按钮或显示触摸结束后触发。

属性:

pointerId Number

唯一标识多个向下、移动和向上事件之间的指针。在指针向上事件之后，ID 可能会被重用。

pointerType String

表示指针类型。

可选值:"mouse"|"touch"

x Number

视图上指针的屏幕横坐标。

y Number

视图上指针的屏幕纵坐标。

button Number

指示单击了哪个鼠标按钮。

buttons Number

指示触发事件时按下了哪些鼠标按钮。请参阅 MouseEvent.buttons。

type String

事件类型

该值通常是 "pointer-up".

stopPropagation Function

防止事件在事件链中冒泡。禁止关联的 immediate-click、click 和 double-click 事件。

timestamp Number

创建事件的时间戳（以毫秒为单位）。

native Object

一个标准的 DOM PointerEvent.

resize

当视图大小改变时触发。

属性:

oldWidth Number

以前的视图宽度（以像素为单位）

oldHeight Number

以前的视图高度（以像素为单位）

width Number

新测量的视图宽度（以像素为单位）

height Number

新测量的视图高度（以像素为单位）

示例:

GeoScene API for JavaScript参考手册

属性列表

属性详细说明

方法列表

方法详细说明

Event Overview

Event Details