更改 react-leaflet 中的图层参数后，WMSTileLayer 未更新

Question

我正在尝试更新 react-leaflet v2.x.x 上的 WMS 图层。 WMSTileLayer 仅适用于第一层，当我更改其上的 layers 参数时，它会显示之前添加的层。我写了下面的代码，

<MapContainer
              whenCreated={(mapInstance) => {
                mapRef.current = mapInstance;
              }}
              center={[38.861, 71.2761]}
              zoom={5}
              zoomControl={false}
              style={{ width: "100%", height: "70vh" }}
            >
              <ZoomControl position="topright" />
              <TileLayer
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                attribution="&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors"
              />

              <WMSTileLayer
                  layers={this.props.wmsLayer}
                  url={`${process.env.REACT_APP_GEOSERVER_URL}/wms`}
                  transparent={true}
                  format={"image/png"}
              />

            </MapContainer>

所以我的问题是，当我的 this.props.wmsLayer 更新时如何更新 WMSTileLayer？

Answer 1

您正在使用 MapContainer 组件，这让我怀疑您实际上使用的是 react-leaflet 版本 3。在 react-leaflet 版本 3 中，许多 props are immutable，意味着一旦它们被设置，从反应道具的角度改变它们将无济于事。您需要获取底层 L.TileLayer.WMS 的引用并调用其上的方法来更改图层。不幸的是，传单文档似乎没有显示任何方法来做到这一点（即像 setLayers 函数或类似的东西）。您可以在 tilelayer 上调用 setUrl，但我不确定那是您想要的。

最简单的做法是向您的 WMSTileLayer 添加一个 key 道具，并将其设置为某个唯一 ID，当 this.props.wmsLayer 发生变化时，该 ID 将强制重新呈现。我不确定 this.props.wmsLayer 是什么，但如果它有一些唯一的 url 或与之关联的 id，请设置 key={this.props.wmsLayer.id} 或任何你可以设置的内容，并且 React 将强制重新渲染该组件。这有点矫枉过正，但是传单 api 中没有某种 setLayers 功能，我不确定是否有更合适的方法来做到这一点。

更改 react-leaflet 中的图层参数后，WMSTileLayer 未更新

WMSTileLayer is not updating after changing the layers parameter in react-leaflet

javascript

leaflet

reactjs

react-leaflet