事件 - Event

鼠标事件

单击事件

mapView.on('click', (result) => {
  console.log(result)
})

双击事件

mapView.on('double-click', (result) => {
  console.log(result)
})

立即点击事件

mapView.on('immediate-click', (result) => {
  console.log(result)
})

立即双击事件

mapView.on('immediate-double-click', (result) => {
  console.log(result)
})

鼠标按下事件

同时适用于手指。

mapView.on('pointer-down', (result) => {
  console.log(result)
})

鼠标进入事件

同时适用于手指。

mapView.on('pointer-enter', (result) => {
  console.log(result)
})

鼠标离开事件

同时适用于手指。

mapView.on('pointer-leave', (result) => {
  console.log(result)
})

鼠标移动事件

同时适用于手指。

mapView.on('pointer-move', (result) => {
  console.log(result)
})

鼠标释放事件

同时适用于手指。

mapView.on('pointer-up', (result) => {
  console.log(result)
})

点击检测 hitTest

返回与指定屏幕坐标相交的每个图层的 Hit Test 结果，结果以包含不同结果类型的数组组织。

以下图层类型将在检测到相交时返回所有特性：FeatureLayer、CSVLayer、GeoJSONLayer、GeoRSSLayer、GraphicsLayer、KMLLayer、MapNotesLayer、OGCFeatureLayer、StreamLayer 和 WFSLayer。

VectorTileLayer 的 Hit Test 结果包含一个具有属性的图形，指示与屏幕点相交的矢量 tile 风格的图层 ID 和名称。对于实际特征的详细属性和空间信息，返回的结果中并没有提供。

MediaLayer 的 Hit Test 结果如果检测到相交的元素，则包含所有媒体元素。RouteLayer 的 Hit Test 结果如果检测到相交的元素，则包含所有路径元素。

常用于捕获覆盖物，精确点击对象。

mapView.on('click', (e) => {
  mapView.hitTest(e).then((e2) => {
    // ...
  })
})

缩放事件

实际上是通过 mouse-wheel 鼠标滚轮事件处理的。

mapView.on('mouse-wheel', (e) => {
  console.log(e)
})

键盘事件

键盘按下

mapView.on('key-down', (e) => {
  console.log(e)
})

键盘松开

mapView.on('key-up', (e) => {
  console.log(e)
})

拖拽事件

mapView.on('drag', (e) => {
  console.log(e) // 通过 e.action 来识别操作方式
})

焦点事件

focus

mapView.on('focus', (e) => {
  console.log(e) // 通过 e.action 来识别操作方式
})

blur

mapView.on('blur', (e) => {
  console.log(e) // 通过 e.action 来识别操作方式
})

生命周期事件

视图加载完成

mapView.when(() => {
  // ...
})

layer创建完成

mapView.on('layerview-create', (e) => {
  // ...
})

layer销毁完成

mapView.on('layerview-destroy', (e) => {
  // ...
})

当图层显示

const graphicLayer = new GraphicsLayer();
map.layers.add(graphicLayer);

mapView.whenLayerView(graphicLayer).then(() => {
  // ...
})

事件监听

监听动画状态

Animation 表示由 goTo() 方法初始化的进行中的视图动画。您可以观察此属性以获得有关动画状态的通知。

mapView.watch("animation", function(response) {
  if(response && response.state === "running") {
    console.log("动画正在进行中")
  }
  else{
    console.log("没有动画")
  }
})

监听范围变动

监听由地图旋转、缩放、平移以及窗口大小引起的地图范围变动。

var extentTimer
mapView.watch("extent", function() {
  if (extentTimer) {
    clearTimeout(extentTimer)
  }
  extentTimer = setTimeout(() => {
    // ...
  }, 1000)
})