如何在Rails Stimulus中实现地理地图线条的鼠标悬停检测与信息展示？

我有一张绘制了不同地点间连接线的地理地图，希望鼠标悬停在线条上时显示端点相关信息。目前已在Rails Stimulus控制器的connect方法中完成地图与线条绘制，想要实现该悬停展示功能。以下是JavaScript中使用pointermove事件实现的示例代码：

const popoverTextElement = document.getElementById('popover-text'); // an empty div on people>show
const popoverTextLayer = new Overlay({ // an OpenLayers function
  element : popoverTextElement,
})
map.addOverlay(popoverTextLayer); // empty at start, but establishes the layer

map.on('pointermove', function(evt){
  let featureInfo = '';
  let isFeatureAtPixel = map.hasFeatureAtPixel(evt.pixel); // OpenLayers function. ie, is a feature where we are
  if (isFeatureAtPixel) {
    let featureAtPixel = map.getFeaturesAtPixel(evt.pixel);
     for (var i = 0; i <= featureAtPixel.length - 1; i++) {
      featureInfo = featureInfo + featureAtPixel[i].get('popover_people');
    }
    popoverTextLayer.setPosition(evt.coordinate);
    popoverTextElement.innerHTML = featureInfo; // all
    map.getViewport().style.cursor = 'pointer' // the hand
  } else {
    popoverTextLayer.setPosition(undefined); // otherwise text remains after leaving
    map.getViewport().style.cursor = ''; // change back to arrow which is default
  }
});

首先想确认：能否在Stimulus中检测到这些线条？

完全可以在Stimulus中检测到这些线条。Stimulus本质是增强DOM交互的JavaScript框架，而你用OpenLayers绘制的线条属于地图的Feature对象，只要在Stimulus控制器中能拿到OpenLayers的map实例，就能通过OpenLayers的API检测并交互这些线条。

下面是适配Stimulus规范的实现方案：

1. Stimulus控制器代码 #

// app/javascript/controllers/map_hover_controller.js
import { Controller } from "@hotwired/stimulus"
import Overlay from 'ol/Overlay'

export default class extends Controller {
  // 定义目标元素，对应页面中的弹出层容器
  static targets = ["popoverText"]

  connect() {
    // 这里假设你已经在connect方法中初始化了map实例
    // 如果map是全局变量或者通过其他方式获取，按需调整
    this.map = window.map

    // 初始化OpenLayers弹出层
    this.popoverLayer = new Overlay({
      element: this.popoverTextTarget
    })
    this.map.addOverlay(this.popoverLayer)

    // 绑定pointermove事件处理逻辑
    this.map.on('pointermove', (evt) => {
      let featureInfo = ''
      const hasFeature = this.map.hasFeatureAtPixel(evt.pixel)
      
      if (hasFeature) {
        const features = this.map.getFeaturesAtPixel(evt.pixel)
        // 遍历获取所有线条的popover信息
        features.forEach(feature => {
          featureInfo += feature.get('popover_people')
        })
        // 设置弹出层位置与内容
        this.popoverLayer.setPosition(evt.coordinate)
        this.popoverTextTarget.innerHTML = featureInfo
        // 切换鼠标样式
        this.map.getViewport().style.cursor = 'pointer'
      } else {
        // 离开线条时隐藏弹出层并恢复鼠标样式
        this.popoverLayer.setPosition(undefined)
        this.map.getViewport().style.cursor = ''
      }
    })
  }

  // 控制器销毁时清理资源，避免内存泄漏
  disconnect() {
    this.map.un('pointermove')
    this.map.removeOverlay(this.popoverLayer)
  }
}

2. 页面HTML结构 #

<!-- 在你的地图页面中添加以下结构 -->
<div data-controller="map-hover">
  <!-- 弹出层容器，通过data-target绑定到控制器 -->
  <div data-target="map-hover.popoverText" class="absolute bg-white p-2 rounded shadow"></div>
  <!-- 你的地图容器 -->
  <div id="map" class="w-full h-[600px]"></div>
</div>

关键说明 #

• 核心逻辑和你提供的示例一致，只是适配了Stimulus的语法规范，比如用targets获取DOM元素，替代原生的getElementById
• 确保在Stimulus控制器中能访问到OpenLayers的map实例，可根据你的实际初始化方式调整（比如通过全局变量、DOM元素属性或其他Stimulus控制器传递）
• 在disconnect方法中清理事件监听和Overlay，避免页面卸载后残留内存占用

内容的提问来源于stack exchange，提问作者Greg