传单地图意外缩小到世界观

Question

我正在尝试将传单集成到我的反应库中，但我面临的问题是，即使我已经为 MapContainer 设置了初始边界和缩放设置，有时在页面重新加载时，地图会缩小并设置，而不是遵循边界我已经提供给它了。

下面是代码

const LeafletMap = () => {
  const [map, setMap] = useState(null)

  useEffect(() => {
    if (map) {
      map.on('moveend', moveEnd)
      map.on('zoomend', zoomEnd)
      setTimeout(() => {
        map?.invalidateSize(true)
      }, 100)
    }
  }, [map])

  function handleMapLoad(s) {
    setMap(s.target)
  }

  function moveEnd() {

    console.log(map.getBounds())

  }

  const zoomEnd = () => {
    console.log(map.getZoom())
  }

  return (
    <div>
      <MapContainer
        bounds={[
          [
            42.2243013614939,
            -121.2243013614939
          ],
          [
            22.2243013614939,
            -81.2243013614939
          ]
        ]}
        maxBounds={[
          [85, -180],
          [-85, 180]
        ]}
        zoom={3}
        minZoom={1}
        whenReady={handleMapLoad}
        worldCopyJump={false}
      >
        <TileLayer url={url} attribution={attribution} />
      </MapContainer>
    </div>
  )
}

边界是从我的数据库中获取的，并且没有重置缩放级别和边界，但不知何故有时它会正确设置边界，有时则不会

Answer 1

在Leaflet中，MapContainer组件中指定的参数不会发生变化。这意味着最初为组件设置的参数保持不变，即使这些参数稍后在收到新数据后更新。

要修改初始边界参数，您可以使用 useEffect 并将从 API 接收到的数据包含在依赖项中。

例如：

  useEffect(() => {
    if (!map) return;

    map.fitBounds(data.bounds);
    map.setView(data.centerMapCoordinates, data.zoom);
}, [data]);

或者，您可以延迟渲染地图，直到加载数据。这应该可以解决初始页面加载的问题。但是，如果您正在使用动态数据和过滤器，建议使用 useEffect 动态重新分配地图设置。

您还可以向 MapContainer 组件添加 center 属性并提供坐标以使地图居中。此外，请考虑添加属性 maxBoundsViscosity={1.0} 以限制滚动超出地图边界，防止用户滚动超出其限制。