Mapbox-gl-draw单个要素点击事件咨询：替代draw.selectionchange方案

要实现点击单个绘制的多边形获取详情，完全可以绕过mapbox-gl-draw的selectionchange事件，直接监听地图原生点击事件来精准处理，以下是具体方案：

核心思路 #

通过地图的onClick事件捕获点击位置，利用地图实例的queryRenderedFeatures方法筛选出mapbox-gl-draw绘制的多边形要素，仅取第一个匹配结果（确保单个要素），再通过draw实例获取完整的要素信息。

代码示例 #

import React from 'react';
import Map from 'react-map-gl';
import MapboxDraw from '@mapbox/mapbox-gl-draw';

const MapWithPolygonDraw = () => {
  const mapRef = React.useRef(null);
  const drawRef = React.useRef(null);

  // 初始化mapbox-gl-draw控件
  React.useEffect(() => {
    if (mapRef.current) {
      drawRef.current = new MapboxDraw({
        displayControlsDefault: false,
        controls: {
          polygon: true,
          trash: true
        }
      });
      mapRef.current.addControl(drawRef.current);
    }
    // 清理控件
    return () => {
      if (mapRef.current && drawRef.current) {
        mapRef.current.removeControl(drawRef.current);
      }
    };
  }, []);

  const handleMapClick = (e) => {
    // 筛选mapbox-gl-draw的多边形图层
    const clickedFeatures = e.map.queryRenderedFeatures(e.point, {
      layers: ['gl-draw-polygon-fill', 'gl-draw-polygon-stroke']
    });

    if (clickedFeatures.length > 0) {
      // 仅取第一个要素，确保单个点击处理
      const targetFeature = clickedFeatures[0];
      const featureId = targetFeature.properties.id;
      
      // 获取draw存储的完整要素信息（含所有属性、几何数据）
      const fullFeature = drawRef.current.get(featureId);
      console.log('单个点击要素详情:', fullFeature);

      // 可选：设置要素选中状态，提供视觉反馈
      drawRef.current.setSelected([featureId]);
    } else {
      // 点击空白区域时清空选中状态（按需选择）
      drawRef.current.setSelected([]);
    }
  };

  return (
    <Map
      ref={mapRef}
      mapboxAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
      initialViewState={{
        longitude: -122.4,
        latitude: 37.7,
        zoom: 12
      }}
      onClick={handleMapClick}
      mapStyle="mapbox://styles/mapbox/streets-v11"
    />
  );
};

export default MapWithPolygonDraw;

关键细节说明 #

• 图层名称gl-draw-polygon-fill和gl-draw-polygon-stroke是mapbox-gl-draw默认的多边形图层标识，确保精准筛选目标要素
• queryRenderedFeatures仅返回点击位置的渲染要素，取第一个结果可完全避免多选场景的干扰
• 使用draw.get(featureId)能获取draw内部存储的完整GeoJSON要素，比渲染层面的要素信息更全面
• 若需完全禁止多选，可在初始化draw时添加clickBuffer: 0配置，进一步缩小点击检测范围

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