React-leaflet Polygon图案填充方案咨询：Leaflet.Pattern无渲染效果

• 修正导入逻辑：StripePattern 不属于 Leaflet 核心内置类，不能从 leaflet 包直接导入，该类是 leaflet.pattern 扩展挂载到全局 L 上的能力，调整导入写法：

import L from 'leaflet';
import 'leaflet.pattern';

• 避免直接给 Polygon 组件传 fillPattern 属性：React-Leaflet 官方默认没有适配该第三方扩展的属性，直接传参不会被原生 Leaflet 实例识别。需要通过 ref 获取原生多边形实例，手动设置填充样式，完整可运行示例如下：

import { useRef, useEffect } from 'react';
import { Polygon, useMap } from 'react-leaflet';
import L from 'leaflet';
import 'leaflet.pattern';

const YourPolygonComponent = ({ points, LayerColor }) => {
  const polygonRef = useRef(null);
  const map = useMap(); // 获取当前地图实例

  useEffect(() => {
    if (!polygonRef.current || !map) return;
    // 初始化条纹图案，可自定义参数调整样式可见性
    const stripePattern = new L.StripePattern({
      angle: 45,
      color: LayerColor.Red,
      weight: 3,
      spaceWeight: 3,
      opacity: 1
    });
    // 必须将图案挂载到地图实例才能生效
    stripePattern.addTo(map);
    // 给原生多边形实例更新样式
    polygonRef.current.setStyle({
      fillPattern: stripePattern,
      fillOpacity: 1
    });
  }, [map, points, LayerColor]);

  return (
    <Polygon
      ref={polygonRef}
      positions={points}
      interactive={false}
      color={LayerColor.Red}
      weight={0}
    />
  );
};

• 排查样式冲突：如果以上修改后仍不显示，可在浏览器开发者工具的元素面板搜索 pattern 标签，确认是否有全局 CSS 规则将 SVG pattern 元素设置为不可见，或者图案没有被正确关联到多边形的 fill 属性上。

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