React+Leaflet项目使用Leaflet.wms点击地图触发多次相同URL请求如何解决

你遇到的重复请求问题核心是React组件重渲染逻辑和Leaflet图层实例管理不匹配导致的：

• GetFeatureInfoWms 组件没有做生命周期管理，每次组件重渲染时都会重复添加OSM底图、WMS图层，每多一个图层实例，点击时就会多触发一次GetFeatureInfo请求
• 你给GetFeatureInfoWms传的options是内联对象，每次父组件渲染时都会生成新的引用，触发GetFeatureInfoWms重渲染，进一步加剧图层重复添加的问题
• WMS.Source.extend 定义放在组件内部，每次渲染都会重新生成构造类，也会导致不必要的实例重建

1. 重构GetFeatureInfoWms组件，增加生命周期管理 #

将图层初始化逻辑放到useEffect中，添加依赖项判断，同时补充卸载时的图层清理逻辑，把固定的类定义提到组件外部：

// 类定义提到组件外部，避免每次渲染重复生成
const MySource = WMS.Source.extend({
  ajax: function (url, callback) {
    $.ajax(url, {
      context: this,
      success: function (result) {
        callback.call(this, result);
      },
    });
  },
  showFeatureInfo: function (latlng, info) {
    setGetInfo(JSON.parse(info));
    map.openPopup(latlng);
  },
});

function GetFeatureInfoWms(props) {
  const { url, options, layers } = props;
  const map = useMap();

  useEffect(() => {
    // 添加OSM底图
    const osmLayer = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
    }).addTo(map);

    // 初始化WMS图层
    const wmsSource = new MySource(url, options);
    const wmsLayer = wmsSource.getLayer(layers).addTo(map);

    // 组件卸载/依赖更新时清理图层，避免残留
    return () => {
      map.removeLayer(osmLayer);
      map.removeLayer(wmsLayer);
    };
    // 只在url、layers、options引用变化时才重新初始化图层
  }, [url, layers, options, map]);

  return null;
}

2. 优化父组件传参，避免options引用频繁变化 #

把内联的options用useMemo包裹，只有依赖项变化时才生成新的options对象：

// 父组件中定义options
const wmsOptions = useMemo(() => ({
  version: 2.0,
  format: "image/png",
  opacity: "1.0",
  crossOrigin: "application/json",
  transparent: true,
  isBaseLayer: false,
  visibility: true,
  tiled: true,
  buffer: 0,
  info_format: "application/json",
}), []); // 存在动态参数时可放到依赖数组中

// 渲染MapContainer时传入处理后的options
<MapContainer
  className="map-container"
  center={newPosition}
  zoom={16}
  scrollWheelZoom={true}
>
  <GetFeatureInfoWms
    url={urlBase}
    layers={layerName}
    options={wmsOptions}
  />
  <LocationMarker position={newPosition}></LocationMarker>
</MapContainer>

3. 可选优化：增加请求防抖/缓存 #

如果仍有少量重复请求，可以给GetFeatureInfo请求加防抖，或者缓存最近若干次的请求结果，同一个坐标、缩放层级的请求直接返回缓存结果，避免重复调用接口。

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