嘿，这个问题我刚好研究过，完全可以实现的！我给你分两种场景来说明具体怎么做：

一、静态渲染预定义的带内孔多边形 #

React-Leaflet的<Polygon>组件本身就支持带内孔的多边形，核心是给positions属性传入一个多维数组——外层数组包含外环和所有内环的坐标集合，而且有个关键细节：内环的坐标顺序必须和外环相反（比如外环是顺时针，内环就要改成逆时针，反之亦然），这样Leaflet才能正确识别出这是内孔而不是独立的多边形。

用你提供的坐标举例，调整内环顺序后的代码如下：

import { MapContainer, TileLayer, Polygon } from 'react-leaflet';

// 外环：顺时针坐标
const outerSquare = [[0,0], [10,0], [10,10], [0,10], [0,0]];
// 内环1：调整为逆时针（原顺时针反转）
const hole1 = [[2,2], [2,4], [4,4], [4,2], [2,2]];
// 内环2：调整为逆时针
const hole2 = [[6,6], [6,8], [8,8], [8,6], [6,6]];

function MapWithHoleyPolygon() {
  return (
    <MapContainer center={[5, 5]} zoom={10} style={{ height: '100vh', width: '100%' }}>
      <TileLayer 
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      />
      {/* 直接传入包含外环和内环的数组 */}
      <Polygon positions={[outerSquare, hole1, hole2]} fillColor="#ff7800" />
    </MapContainer>
  );
}

export default MapWithHoleyPolygon;

二、用React-Leaflet-Draw绘制带内孔的多边形 #

默认的React-Leaflet-Draw绘制工具不会直接提供“添加内孔”的选项，但可以通过监听绘制事件，手动处理绘制结果来实现：

1. 先让用户绘制第一个多边形作为外环；
2. 当用户绘制后续的多边形时，判断这些多边形是否在外环内部；
3. 调整后续多边形的坐标顺序（和外环相反），然后将它们合并到外环多边形的positions数组中，替换原来的单个多边形。

举个简单的事件处理示例：

import { MapContainer, TileLayer, Polygon } from 'react-leaflet';
import { EditControl } from 'react-leaflet-draw';
import { useState } from 'react';

function DrawWithHoles() {
  const [polygonData, setPolygonData] = useState(null);

  // 监听绘制完成事件
  const handleCreated = (e) => {
    const layer = e.layer;
    const type = e.layerType;

    if (type === 'polygon') {
      const coords = layer.getLatLngs();
      if (!polygonData) {
        // 第一个多边形作为外环
        setPolygonData({ outer: coords[0], holes: [] });
      } else {
        // 后续多边形作为内环，反转坐标顺序
        const reversedHole = coords[0].reverse();
        setPolygonData(prev => ({
          ...prev,
          holes: [...prev.holes, reversedHole]
        }));
      }
    }
  };

  return (
    <MapContainer center={[5,5]} zoom={10} style={{ height: '100vh' }}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      {/* 渲染合并后的带孔多边形 */}
      {polygonData && (
        <Polygon 
          positions={[polygonData.outer, ...polygonData.holes]}
          fillColor="#ff7800"
        />
      )}
      {/* 绘制控件 */}
      <EditControl
        position="topright"
        onCreated={handleCreated}
        draw={{
          polyline: false,
          rectangle: false,
          circle: false,
          marker: false,
          circlemarker: false
        }}
      />
    </MapContainer>
  );
}

export default DrawWithHoles;

关键注意事项 #

• 坐标顺序是核心：内外环方向必须相反，否则Leaflet会把内环当成独立的多边形显示；
• 如果是动态绘制的场景，记得在合并前判断新绘制的多边形是否真的在外环内部（可以用Leaflet的contains方法判断），避免把外部的多边形误当成内孔；
• React-Leaflet的Polygon组件会自动处理多维坐标的渲染，不需要额外的配置。

内容来源于stack exchange