带有功能组件和 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

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

Answer 1

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

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

Error Set map center and zoom first.

因此您需要使用功能组件创建 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

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

react-leaflet with functional components and ImageOverlay

javascript

leaflet

reactjs

react-leaflet