ArcGIS JS 悬停效果：终极实现指南

2023-05-26 03:26:37

ArcGIS JS 悬停效果：实现终极指南

启用图层查询

要实现悬停效果，首先必须启用图层查询，这允许你从图层中检索要素的信息。在 ArcGIS JS 中，可以通过在图层构造函数中设置 enableQuery 属性为 true 来启用查询。

var layer = new esri.layers.FeatureLayer({
  url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/Restaurants/FeatureServer/0",
  enableQuery: true
});

添加事件监听器

接下来，需要添加一个事件监听器来监听鼠标悬停事件。这可以通过在图层上调用 on 方法并传入 mouse-over 事件类型来实现。

layer.on("mouse-over", function(evt) {
  // 在此处添加悬停时的处理逻辑
});

获取要素信息

在鼠标悬停事件处理程序中，可以使用 esri.Graphic 对象的 attributes 属性来获取要素的信息。

var attributes = evt.graphic.attributes;

显示要素信息

最后，你可以使用这些信息来显示要素的详细信息。你可以创建一个信息窗口或将信息直接添加到地图中。

var infoWindow = new esri.InfoWindow({
  title: attributes.name,
  content: attributes.description
});

infoWindow.show(evt.mapPoint);

避免小坑

在实现 ArcGIS JS 中的悬停效果时，需要注意以下几个小坑：

确保图层具有查询功能。 如果你忘记启用查询，将无法检索要素信息。
确保图层上的要素具有属性信息。 如果没有属性信息，将无法显示要素的详细信息。
在鼠标悬停事件处理程序中使用 evt.mapPoint 而不是 evt.graphic.geometry 来获取要素的位置。 这将确保你获得要素在地图上的正确位置。
使用 esri.InfoWindow 对象来显示要素信息，而不是直接将信息添加到地图。 这将提供一个更美观的显示选项，并允许你控制信息窗口的位置和外观。

常见问题解答

1. 我启用了查询，但仍然无法检索要素信息。

确保你正在使用正确的图层 URL。此外，检查图层是否可见，因为不可见的图层不会响应查询。

2. 我的悬停处理程序无法获取要素的属性。

确保 evt.graphic 对象存在并且具有 attributes 属性。如果 evt.graphic 为 null，则说明鼠标悬停在图层之外。

3. 我想自定义信息窗口的外观。

你可以通过设置 esri.InfoWindow 对象的样式属性来自定义信息窗口的外观。有关详细信息，请参阅 ArcGIS JS 文档。

4. 我想将信息添加到地图中，而不是使用信息窗口。

你可以使用 esri.graphic.SimpleMarkerSymbol 对象和 esri.Graphic 对象将文本或图像添加到地图中。有关详细信息，请参阅 ArcGIS JS 文档。

5. 我在实现悬停效果时遇到了其他问题。

请在 ArcGIS JS 论坛或 GitHub 上寻求帮助。还有许多资源可以帮助你解决问题。

结论