【收藏】arcgis api4.x实现悬停高亮效果

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] 表示只检测 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);
    }
  });

3.完整代码

https://mbd.pub/o/bread/ZpmZmpxs