reactjs - React-Leaflet - 等待 WMSLayer 完成加载以重绘

Question

我有一个 WMSLayer，它接受一串以逗号分隔的图层名称来调用获取图块。

import React, { Component } from "react";
import { WMSTileLayer } from "react-leaflet";

class WMSLayers extends Component {
  render = () => (
    <WMSTileLayer
      format="image/png"
      layers={this.props.layers}
      url="https://ws.topogrids.de/geoserver/ows"
    />
  );
}

该组件在layersprop 更改时开始网络请求。这意味着一旦layers传递了一个新的道具，当前的 WMSLayer 就会被擦除，并在收到新的瓷砖时开始绘制它们。这当然是完全有道理的。

我想做的是以某种方式保留旧组件，直到获取新图块，然后一次渲染所有新图块。这样，如果我只是再打开一层，当前层就不会消失。

我意识到我可以通过为每个图层创建一个单独的 WMSTileLayer 来实现这一点，但是如果打开多个图层，这会导致每次缩放/平移都会调用许多 API。

该图层确实提供了一个onLoad事件，该事件在瓷砖完成加载时被触发，但我不知道如何在完成之前保持旧图层的绘制，如果它甚至可能的话。

建议将不胜感激！

此外，这不是在 Leaflet 中重绘图层时如何保留旧瓷砖直到加载每个新瓷砖？- 这个问题是关于在一张地图上使用多个图层，但这个问题是关于在一张地图上使用一层（我意识到 WMSTileLayerlayers道具名称可能会让这看起来很混乱）

标签： reactjsleafletwmsreact-leaflet