如何为react-map-gl-draw的Editor渲染的要素添加提示框？

可以通过直接监听mapbox-gl的底层鼠标事件来实现需求，因为react-map-gl-draw基于mapbox-gl-draw，底层可直接访问map实例的事件系统，绕开Editor组件缺少hover回调的限制。

实现思路 #

• 通过useRef获取map实例，或使用react-map-gl提供的useMap hook
• 监听map的mousemove事件，实时检测鼠标位置覆盖的绘制要素
• 维护状态存储当前悬停的要素及提示框坐标
• 结合react-map-gl的Popup组件，根据状态控制提示框的显示/隐藏

代码示例 #

import React, { useState, useEffect, useRef } from 'react';
import Map from 'react-map-gl';
import { Popup } from 'react-map-gl';
import { Editor } from 'react-map-gl-draw';

const MapWithDrawHover = () => {
  const mapRef = useRef(null);
  const editorRef = useRef(null);
  const [hoveredFeature, setHoveredFeature] = useState(null);
  const [hoveredIndex, setHoveredIndex] = useState(null);
  const [popupCoords, setPopupCoords] = useState(null);

  useEffect(() => {
    const map = mapRef.current?.getMap();
    if (!map) return;

    const handleMouseMove = (e) => {
      // 查询鼠标位置的所有渲染要素，筛选draw组件的图层
      const features = map.queryRenderedFeatures(e.point, {
        layers: ['gl-draw-polygon-fill', 'gl-draw-line-string', 'gl-draw-point']
      });

      if (features.length > 0) {
        const targetFeature = features[0];
        setHoveredFeature(targetFeature);
        setPopupCoords(e.lngLat);
        
        // 获取当前悬停要素在Editor中的索引
        const allFeatures = editorRef.current?.getAll();
        if (allFeatures) {
          const index = allFeatures.findIndex(f => f.id === targetFeature.properties.id);
          setHoveredIndex(index);
        }
      } else {
        setHoveredFeature(null);
        setHoveredIndex(null);
        setPopupCoords(null);
      }
    };

    map.on('mousemove', handleMouseMove);

    // 组件卸载时清理事件监听
    return () => {
      map.off('mousemove', handleMouseMove);
    };
  }, []);

  return (
    <Map
      ref={mapRef}
      initialViewState={{
        longitude: -122.4,
        latitude: 37.7,
        zoom: 14
      }}
      mapStyle="mapbox://styles/mapbox/streets-v12"
      mapboxAccessToken="YOUR_MAPBOX_TOKEN"
    >
      <Editor ref={editorRef} />
      {hoveredFeature && popupCoords && (
        <Popup
          longitude={popupCoords.longitude}
          latitude={popupCoords.latitude}
          closeButton={false}
          closeOnClick={false}
          anchor="top"
        >
          <div>
            <p>要素索引: {hoveredIndex}</p>
            <p>要素类型: {hoveredFeature.geometry.type}</p>
            <p>要素ID: {hoveredFeature.properties.id}</p>
          </div>
        </Popup>
      )}
    </Map>
  );
};

export default MapWithDrawHover;

注意事项 #

• 图层名称需与react-map-gl-draw实际渲染的图层对应，默认前缀为gl-draw-，可根据你使用的绘制工具类型（点/线/面）调整
• 替换代码中的YOUR_MAPBOX_TOKEN为你自己的Mapbox访问令牌
• 如果需要自定义提示框位置，可将popupCoords替换为要素的中心坐标（通过计算要素几何坐标得到）

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