带有功能组件和 ImageOverlay 的 react-leaflet

Question

这是我第一次使用 Leaflet，所以在尝试理解文档时我有点困惑。我正在尝试使用 ImageOverlay 组件创建带有 react-leaflet 的自定义地图。我正在努力使 Map 组件大小与我的图像大小相同。恐怕我不太了解bounds，但我认为这就是我应该在这里使用的。我尝试使用getBounds() 来查看是否可以获得我需要的界限，但我不认为我使用refs 的实现是正确的。到目前为止，这是我的代码：

import React, { useState, useRef, useEffect } from "react";
import { Map, ImageOverlay } from "react-leaflet";
import { CRS, getBounds } from "leaflet";

export default () => {
    const [bounds, setBounds] = useState([]);
    const mapRef = useRef(null);

    useEffect(() => {
        setBounds(mapRef.current.leafElement.getBounds());
    }, []);

    return (
        <Map
            center={initialPos}
            zoom={0}
            ref={mapRef}
            minZoom={0}
            crs={CRS.Simple}
        >
            <ImageOverlay url="https://i.imgur.com/Ion6X7C.jpg" />
        </Map>
    );
};

在useEffect 中记录新的bounds，我得到一个如下所示的对象：

LatLngBounds {
  _southWest: LatLng {lat: -110, lng: -95},
  _northEast: LatLng {lat: 290, lng: 565}
}

但我仍然收到以下错误：

Cannot read property 'lat' of undefined

我参考了 this question 和 this question 来帮助我弄清楚如何设置边界以使地图适合我的图像大小，但一直在努力将它们转换为功能组件

Answer 1

您正在寻找可以从mapRef.current.leafletElement 而不是mapRef.current 获取的地图实例。

您可以通过更简单的方式实现这一点，而无需多次传递边界作为道具。此外，您无法在安装组件之前提取地图边界，因为它尚未初始化，因此在您尝试获取其边界时它没有center 和zoom。如果您尝试获取它，您将收到相关错误：

错误 先设置地图中心和缩放。

所以你需要像这样使用功能组件创建imageOverlay 实例：

const mapRef = useRef(null);

  useEffect(() => {
    const map = mapRef.current.leafletElement;
    const bounds = [[-26.5, -25], [1021.5, 1023]];
    const image = L.imageOverlay("https://i.imgur.com/Ion6X7C.jpg", bounds).addTo(
      map
    );
    // this is what you were looking for
    map.fitBounds(image.getBounds());
  }, []);

Demo