【收藏】Arcgis api4.x 悬停高亮且打开popup弹窗

1.效果

---

2.思路

 2.1 学习高亮

  2.1.1 图层的"layerView"

layerView是用于渲染和显示地图图层的视图，它允许你控制图层的渲染方式，并且可以监听与该图层相关的事件等。

view.whenLayerView(currentLayer).then(function(layerView) {
  // layerView 是currentLayer图层的 LayerView 实例
  // currentLayer是某个图层
  console.log(layerView)
});

  2.1.2 实现高亮

实现高亮特定图层上的某个要素。highlight方法用于在图层中高亮显示特定的要素，它接受一个要素的标识符（例如 OBJECTID）或多个标识符的数组，并返回一个 Highlight 对象。

highlightSelect = LayerView.highlight(_OBJECTID);

  2.1.3 取消高亮

highlightSelect.remove();

 2.2 监听鼠标移动

事件监听器，监听地图视图 view 上的 pointer-move 事件。只有当用户移动鼠标时，这个事件会触发。e 是事件对象，包含了鼠标的位置信息等。

view.on("pointer-move", (e) => {
 console.log(e);
});

 2.3 查询图形并高亮

hitTest 是用于检测用户鼠标指向地图时，与哪些图层或要素相交的功能。include表示只检测 includeLayer 图层中的要素。

  view.hitTest(e, { include: [includeLayer] }).then((response) => {
    if (response.results.length) {
      // 查询结果
      let lastResults = response.results[response.results.length - 1];
      if (highlightSelect) {
        highlightSelect.remove();
      }
      let thisOBJECTID = lastResults.graphic.attributes.__OBJECTID;
      highlightSelect = LayerView.highlight(thisOBJECTID);
    }
  });

  2.4 打开弹窗

 view.popup.open地图上打开一个弹出窗口，location为弹窗的位置，使用hitTest检测鼠标与哪些要素相交时，当有查询结果时，在查询结果中可以取到mapPoint，可用于确定弹窗的位置。

view.popup.open({
    location: response.results[0].mapPoint,
    title: `悬停选中第${graphicID + 1}个元素`,
    content: `</br><div style="color: pink;">这是第${graphicID + 1}个元素</div>`
});

   2.5 取消所有效果

 当鼠标没有在目的图层中悬停时，取消高亮效果和关闭弹窗。

// 关闭弹窗
view.popup.visible = false;

// 取消高亮
highlightSelect.remove();

---

3.完整代码

https://mbd.pub/o/bread/ZpqWl5trhttps://mbd.pub/o/bread/ZpqWl5tr

(如果文章对你有帮助，可以点个赞鼓励下博主噢)