ArcGIS JS中如何有效处理和响应事件？

ArcGIS JS API事件详解

ArcGIS JavaScript API是用于构建交互式Web地图和应用程序的强大工具，本文将详细介绍ArcGIS JS API中的事件处理机制，包括如何添加和移除事件监听器，以及常见的事件类型和处理方法。

一、事件驱动的API

1. ArcGIS JS API为什么是事件驱动的？

异步操作：JavaScript API是异步的，对象上的每个操作都不是立即返回结果，在对象使用之前，可能需要到服务器获取附加信息。

多事件处理程序：事件模型允许对每个事件执行多个事件处理程序，可以根据对象触发的单个事件执行多个操作。

添加和删除事件监听器

2.1 使用on方法

on方法是推荐的监听事件的方法，自3.6版本开始，所有模块都支持这种形式的事件监听器。

示例代码：

var mapExtentChange = map.on("extent-change", changeHandler);
function changeHandler(evt){
  var extent = evt.extent,
      zoomed = evt.levelChange;
  // Do something ...
  // In some cases, you may want to disconnect the event listener
  mapExtentChange.remove();
}

2.2 使用dojo/_base/connect模块

旧版本的ArcGIS API使用dojo/_base/connect模块来监听或响应事件。

示例代码：

require(["dojo/_base/connect", "esri/map"],function(connect, Map) {
  ...
  var mapExtentChange_connect = connect.connect(map, "onExtentChange", changeHandler_connect);
  function changeHandler_connect(extent, delta, levelChange, lod){
    // Do something ...
    // In some cases, you may want to disconnect the event listener
    connect.disconnect(mapExtentChange_connect);
  }
});

2.3 on方法和connect方法的比较

on方法更简洁，并且与AMD风格更兼容。

connect方法将在Dojo 2.0中删除，因此建议使用on方法。

on方法的事件名称是小写的且没有“on”前缀。

二、常见事件及其处理

地图加载事件（load）

地图加载完成后触发的事件，可以用来初始化地图图层和其他设置。

示例代码：

map.on("load", function() {
  console.log("Map loaded");
});

图形点击事件（click）

当用户点击地图上的图形时触发的事件，可以用来实现专题GIS数据查询等功能。

示例代码：

map.graphics.on("click", function(e){
  alert("Graphic clicked");
  e.stopPropagation();
});

3. 鼠标悬停事件（mouse-over）

当鼠标悬停在图形上时触发的事件，可以用来改变图形的显示样式。

示例代码：

map.graphics.on("mouse-over", function(e){
  var graphic = e.graphic;
  var bigSymbol = new esri.symbol.PictureMarkerSymbol("imgUrl", 25, 20);
  graphic.setSymbol(bigSymbol);
});

鼠标移出事件（mouse-out）

当鼠标从图形上移开时触发的事件，可以用来恢复图形的原始样式。

示例代码：

map.graphics.on("mouse-out", function(e){
  var graphic = e.graphic;
  var smallSymbol = new esri.symbol.PictureMarkerSymbol("imgUrl", 20, 20);
  graphic.setSymbol(smallSymbol);
});

三、事件移除

为了避免内存泄漏，应该在关闭应用程序时删除事件监听器，可以通过添加另一个监听器来完成此操作。

使用on方法移除事件监听器

var myUnload = map.on("unload", unloadHandler);
function unloadHandler(evt){
  changeHandler.remove();
  myUnload.remove();
}

2. 使用connect方法移除事件监听器

var myUnload_connect = connect.connect(map, "onUnload", unloadHandler_connect);
function unloadHandler_connect(map){
  connect.disconnect(changeHandler_connect);
  connect.disconnect(myUnload_connect);
}

四、自定义图标和事件绑定

项目中需要使用ArcGIS来实现地图功能，并绘制自定义图标和绑定点击事件，以下是具体实现步骤：

创建图形点

const pointGraphic = new Graphic({
  geometry: {
    type: 'point',
    longitude: 117.129359,
    latitude: 31.839979
  },
  symbol: {
    type: 'picture-marker',
    url: require('@/assets/img/view-start.png'),
    width: '32px',
    height: '48px'
  },
  attributes: {
    Foo: 'Hello world!'
  }
});

将图形添加到视图的图形层

this.view.graphics.addMany([pointGraphic]);

绑定点击事件

this.view.on('click', e => {
  this.view.hitTest(e).then(res => {
    if (res.results.length) {
      console.log(res.results[0].graphic.attributes);
    }
  });
});

五、归纳与常见问题解答

1. 如何在ArcGIS JS API中取消默认的双击放大地图事件？

可以在地图加载完成后，禁用默认的双击放大功能。

map.on("load", function() {
  map.disableDoubleClickZoom();
});

2. 如何在ArcGIS JS API中给图形添加点击事件？

可以使用on方法给图形添加点击事件，并在事件处理函数中实现所需的逻辑。

map.graphics.on("click", function(e){
  alert("Graphic clicked");
  e.stopPropagation();
});

以上内容就是解答有关“arcgis js 事件”的详细内容了，我相信这篇文章可以为您解决一些疑惑，有任何问题欢迎留言反馈，谢谢阅读。