React Map GL集成MapboxDraw：侧边栏触发多边形编辑遇阻求助

核心问题分析 #

问题根源在于两点：

• MapboxDraw实例随组件重复渲染被反复创建，导致与地图的绑定关系失效
• draw.add需要在地图完全加载后调用，侧边栏按钮触发时可能存在地图未初始化、Draw实例未正确绑定的情况

具体解决步骤 #

1. 用useRef持久化Draw实例
   避免组件重绘时重复创建实例，保证实例始终与当前地图绑定。

2. 获取地图实例并初始化Draw
   通过React Map GL的useMap钩子获取地图实例，在地图加载完成后初始化Draw并添加到地图。

3. 优化编辑触发逻辑
   触发编辑时先清除Draw中已有要素，再添加目标多边形，最后切换到编辑模式。

4. 组件卸载时清理实例
   移除地图上的Draw控件，避免内存泄漏。

修改后的完整代码 #

import { useMap, MapRef } from 'react-map-gl';
import { useRef, useEffect, useCallback, useState } from 'react';
import MapboxDraw from '@mapbox/mapbox-gl-draw';

export const DrawPolygon = ({ mapMode, handleMapMode }: any) => {
  const [features, setFeatures] = useState({});
  const [plotToEdit, setPlotToEdit] = useState<Plot>();
  const drawRef = useRef<MapboxDraw | null>(null);
  const map = useMap<MapRef>(); // 获取当前地图实例

  // 初始化MapboxDraw并绑定到地图
  useEffect(() => {
    if (!map) return;

    if (!drawRef.current) {
      const draw = new MapboxDraw({
        displayControlsDefault: false,
        defaultMode: mapMode,
      });
      map.addControl(draw);
      drawRef.current = draw;
    }

    // 组件卸载时清理Draw实例
    return () => {
      if (drawRef.current && map) {
        map.removeControl(drawRef.current);
        drawRef.current = null;
      }
    };
  }, [map, mapMode]);

  const onDrawPlot = useCallback((e: any) => {
    setFeatures(e.features[0]);
  }, []);

  const onDeletePlot = useCallback(() => {
    setFeatures({});
    handleMapMode('draw_polygon');
    drawRef.current?.trash();
  }, [handleMapMode]);

  const handlePlotToEdit = useCallback((plot: Plot) => {
    const draw = drawRef.current;
    if (!draw || !map) return;

    // 清空已有绘制内容
    draw.trash();
    // 添加待编辑的多边形（替换硬编码，直接用API返回的几何数据）
    draw.add({
      id: plot.id,
      type: 'Feature',
      properties: {},
      geometry: plot.geometry,
    });
    // 切换到直接编辑模式（可编辑顶点）
    handleMapMode('direct_select');
    setFeatures(plot.geometry);
    setPlotToEdit(plot);
  }, [handleMapMode, map]);

  return (
    <GenericErrorMessage>
      <UIOverlay
        features={features}
        onDeletePlot={onDeletePlot}
        plotToEdit={plotToEdit}
        handlePlotToEdit={handlePlotToEdit}
        resetMapMode={() => {
          handleMapMode('simple_select');
        }}
      />
      <DrawControl
        draw={drawRef.current}
        features={features}
        plotToEdit={plotToEdit}
        displayControlsDefault={false}
        defaultMode={mapMode}
        onCreate={onDrawPlot}
        onUpdate={onDrawPlot}
        onDelete={onDeletePlot}
      />
    </GenericErrorMessage>
  );
};

关键说明 #

• useRef确保Draw实例在组件生命周期内唯一，避免重复初始化
• useMap保证Draw仅在地图加载完成后绑定，解决draw.add的调用时机问题
• 切换到direct_select模式可直接编辑多边形顶点，若需整体移动可改用simple_select模式

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