react-leaflet的SVGOverlay如何在选择新边界后更新渲染？

我在使用react-leaflet的SVGOverlay组件时，遇到切换选择事件后，SVG无法跟随新边界更新渲染的问题：

• SVGOverlay内部的蓝色矩形设为100%宽高，但切换边界后，SVG的宽高样式没有变化，蓝色矩形大小保持不变。
• 对比之下，react-leaflet的Rectangle组件（橙色矩形）能正常随新边界更新。
• 选择AL边界时，SVG的样式为style="transform: translate3d(393px, 160px, 0px); width: 56px; height: 43px"；切换到AC边界后，样式完全一致，未发生更新。

注意到今年有一项“Bugfix: bounds update in ImageOverlay”的修复，不确定SVGOverlay的问题是否与之类似。

相关代码如下：

import { useState } from "react";
import "leaflet/dist/leaflet.css"
import {  MapContainer, TileLayer, Circle, Rectangle, SVGOverlay} from 'react-leaflet'

export default function MapsTest() {
const [bounds, setBounds] = useState([[-9.62, -36.82], [-13.29, -41.71]]);
const [UFOrigin, setUFOrigin] = useState('AL');
const handleUFOrigin = (e) => {
  const value = e.target.value;
  setUFOrigin(value);
  if (value === 'AL') {
    setBounds([[-9.62, -36.82], [-13.29, -41.71]]);
  }
  if (value === 'AC') {
    setBounds([[-8.77, -70.55], [-5.2, -39.53]]);
  }
}

return (
    <>
    <section id="maps">
    <h2>Maps</h2>
    <MapContainer className="map-container"
      center={[ -20.7801, -48]} zoom={4}>
      <TileLayer attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      {bounds && <>
            <Circle center={bounds[0]} radius={30000} pathOptions={{ color: 'red' }} />
            <Circle center={bounds[1]} radius={30000} pathOptions={{ color: 'green' }} />
            <Rectangle bounds={[bounds[0], bounds[1]]} pathOptions={{color: 'orange'}} />

            <SVGOverlay id="SVGOverlay" attributes={{ stroke: 'blue' }} bounds={bounds}>
              <svg className={"innerSvg" + UFOrigin} x="0" y="0" viewBox="0 0 100 100" preserveAspectRatio="none">
              <rect x="0" y="0" width="100%" height="100%" fill="blue" opacity={0.5} />
              </svg>
            </SVGOverlay>
      </>}
    </MapContainer>

    <div className="form-field">
    <label className="field-description">Origin</label>
        <select className="input-field"
          id="UFOrigin"
          value={UFOrigin}
          onChange={handleUFOrigin}
          name="UFOrigin">
          <option disabled>--selecione--</option>
          <option>AC</option>
          <option>AL</option>
        </select>
      </div>
    </section>
    </>
  );
}

react-leaflet的SVGOverlay组件目前存在边界更新不触发重渲染的问题（类似之前ImageOverlay的bug），可通过以下方式解决：

方法1：添加key属性强制重渲染 #

给SVGOverlay绑定随bounds变化的key值，让React在边界更新时重新创建组件实例：

<SVGOverlay 
  id="SVGOverlay" 
  attributes={{ stroke: 'blue' }} 
  bounds={bounds}
  key={JSON.stringify(bounds)}
>
  <svg className={"innerSvg" + UFOrigin} x="0" y="0" viewBox="0 0 100 100" preserveAspectRatio="none">
    <rect x="0" y="0" width="100%" height="100%" fill="blue" opacity={0.5} />
  </svg>
</SVGOverlay>

当bounds变化时，key值同步改变，React会卸载旧组件并渲染新组件，从而应用新的边界样式。

方法2：手动调用Leaflet原生方法更新边界 #

通过ref获取SVGOverlay实例，直接调用Leaflet的setBounds方法更新边界，避免组件重渲染：

import { useState, useRef } from "react";
import "leaflet/dist/leaflet.css"
import {  MapContainer, TileLayer, Circle, Rectangle, SVGOverlay} from 'react-leaflet'

export default function MapsTest() {
const [bounds, setBounds] = useState([[-9.62, -36.82], [-13.29, -41.71]]);
const [UFOrigin, setUFOrigin] = useState('AL');
const svgOverlayRef = useRef(null);

const handleUFOrigin = (e) => {
  const value = e.target.value;
  setUFOrigin(value);
  let newBounds;
  if (value === 'AL') {
    newBounds = [[-9.62, -36.82], [-13.29, -41.71]];
  } else if (value === 'AC') {
    newBounds = [[-8.77, -70.55], [-5.2, -39.53]];
  }
  setBounds(newBounds);
  // 手动更新边界
  if (svgOverlayRef.current) {
    svgOverlayRef.current.setBounds(newBounds);
  }
}

return (
    <>
    <section id="maps">
    <h2>Maps</h2>
    <MapContainer className="map-container"
      center={[ -20.7801, -48]} zoom={4}>
      <TileLayer attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      {bounds && <>
            <Circle center={bounds[0]} radius={30000} pathOptions={{ color: 'red' }} />
            <Circle center={bounds[1]} radius={30000} pathOptions={{ color: 'green' }} />
            <Rectangle bounds={[bounds[0], bounds[1]]} pathOptions={{color: 'orange'}} />

            <SVGOverlay 
              ref={svgOverlayRef}
              id="SVGOverlay" 
              attributes={{ stroke: 'blue' }} 
              bounds={bounds}
            >
              <svg className={"innerSvg" + UFOrigin} x="0" y="0" viewBox="0 0 100 100" preserveAspectRatio="none">
              <rect x="0" y="0" width="100%" height="100%" fill="blue" opacity={0.5} />
              </svg>
            </SVGOverlay>
      </>}
    </MapContainer>

    <div className="form-field">
    <label className="field-description">Origin</label>
        <select className="input-field"
          id="UFOrigin"
          value={UFOrigin}
          onChange={handleUFOrigin}
          name="UFOrigin">
          <option disabled>--selecione--</option>
          <option>AC</option>
          <option>AL</option>
        </select>
      </div>
    </section>
    </>
  );
}

这种方式直接操作Leaflet实例，性能更优，适合对渲染性能有要求的场景。

方法3：等待官方修复 #

鉴于ImageOverlay已修复类似的边界更新bug，SVGOverlay的问题大概率会在后续版本中得到修复，可关注react-leaflet官方更新日志，升级到修复后的版本即可解决。

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