动态边界在'react-leaflet'中没有任何效果。

Question

我在试图使用 react-leaflet 的 bounds 属性时遇到了问题。我的用例是，我的应用程序在状态中定义了一些初始范围（比如回退边界），并在组件的第一次渲染期间传递这些边界。应用程序架构要求我向组件发送请求以设置新的边界，在此时出现了问题。

在下面的示例中（我使用了 setTimeout 模拟 AJAX 请求），我们可以注意到，来自超时后的请求的新边界根本没有设置，我不太确定这是为什么。

我怀疑与动画有关，因为当增加超时延迟时，问题就不会发生，第二个边界也会被正确设置。

我的设置：

"react": "17.0.0"
"leaflet": "1.6.0"
"react-leaflet": "2.7.0"

import React, { useState } from "react";
import { Map, ZoomControl, TileLayer } from "react-leaflet";

import "./styles.css";
import "leaflet/dist/leaflet.css";

export default function App() {
  const [bounds, setBounds] = useState([
    [75, -25],
    [30, 45]
  ]);

  setTimeout(() => {
    setBounds([
      [59.569068610511465, 10.387057922780514],
      [59.565111563593824, 10.397184267640114]
    ]);
  }, 200);

  return (
    <Map
      bounds={bounds}
      maxBounds={bounds}
      zoomControl={false}
      style={{
        height: 400,
        width: 400
      }}
    >
      <TileLayer
        url="//{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}"
        maxZoom={21}
        minZoom={4}
        minZoomIsDrawing={18}
        subdomains={["mt0", "mt1", "mt2", "mt3"]}
      />
      <ZoomControl />
    </Map>
  );
}

实时示例：https://codesandbox.io/s/keen-silence-vnt23

- daniel_s

Answer 1

你需要使用一个效果来让地图实例改变地图边界。

点击这里获取更多信息。

const mapRef = useRef(null);

  useEffect(() => {
    const map = mapRef.current?.leafletElement;
    map.fitBounds([
      [59.569068610511465, 10.387057922780514],
      [59.565111563593824, 10.397184267640114]
    ]);
  }, []);

演示

- kboul

---

我知道我可以使用地图引用并在后台处理它，但是'bounds'属性不应该是动态的吗？如果我需要更改全局边界，该怎么办？我认为Leaflet的地图会改变两次。无论如何，我发现演示根本不起作用。 - daniel_s

你是对的。根据文档，它应该可以工作。在版本3中，提到了除其子代外，MapContainer props是不可变的链接。我想知道它是否适用于2.x版本。顺便说一下，演示应该可以工作。它显示了斯堪的纳维亚地区缩小的例子，但在演示中，同一区域被放大了。 - kboul

谢谢，你说得对。现在这个演示看起来对我很好。唔……我明白，目前没有其他通过属性动态使用它的方法。 - daniel_s

Answer 2

您可以将新边界值中的任意一个作为键传递给MapContainer组件。React会认为您的地图已经发生了变化，并重新渲染它（请注意，组件的状态也将被重置）。

https://beta.reactjs.org/apis/react/useState#resetting-state-with-a-key

<Map key={bounds[0][0]}>

你还可以使用 useMap hook，这个话题有相关内容： https://dev59.com/QMDqa4cB1Zd3GeqPVRPN

- JohnS

---

你的回答可以通过添加更多支持信息来改进。请编辑并添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Prateek Varshney