使图像叠加层的 map 视图适合容器的大小 Leaflet

Question

我正在使用 React Leaflet 创建自定义 map。

卡片（Image Overlay）当前正在渲染，但它没有填充放置卡片的容器。

容器的大小设置严格，我希望 map 尽可能填满容器。 使用 CSS 调整大小的所有尝试均失败。

实例： https://codesandbox.io/s/dark-worker-8qbzfr

我的代码：

import "./styles.css";
import { MapContainer, ImageOverlay } from "react-leaflet";
import "leaflet/dist/leaflet.css";

const M = ({ width, height, zoom, center }) => {
  const wh = [width, 500];
  const origin = [0, 0];
  const bounds = [origin, wh];

  return (
    <div style={{ width: "1100px", height: "600px" }}>
      <MapContainer
        style={{ height: "100%", minHeight: "100%" }}
        bounds={zoom ? undefined : bounds}
        boundsOptions={{
          padding: [0, 0]
        }}
        maxBounds={bounds}
        zoom={center ? zoom : undefined}
        center={zoom ? center : undefined}
      >
        <ImageOverlay
          url="../ptichnikDraw.png"
          bounds={bounds}
          className="map_main"
        />
      </MapContainer>
    </div>
  );
};

const App = () => {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center"
      }}
    >
      <M width={1500} height={500} center={[0, 0]} />
    </div>
  );
};

export default App;

Answer 1

使用默认的 Leaflet JavaScript 库，您可以使用 map.invalidateSize()。 不知道这在 React 中是如何工作的，但也许你可以使用文档来解决这个问题。

Answer 2

您希望您的“卡片”（ <ImageOverlay> ）填充初始 map 容器/视口。

您将无法使用（仅）CSS，但使用 Leaflet map 选项和方法，这些选项和方法由 React Leaflet 包装器公开：

1. 使用 Leaflet map whenReady选项（作为<MapContainer>的道具公开）附加一个回调，该回调在 map 初始化后执行

当 map 初始化时运行给定的 function fn

2. 虽然没有明确记录，但该回调接收一个加载事件参数，其target属性是新实例化的 Leaflet map

初始化 map 时触发

3. 在该实例上调用fitBounds() map 方法，使用与图像叠加层相同的边界，以相应地调整 map 视图

设置一个 map 视图，其中包含具有可能的最大缩放级别的给定地理边界。

4. 重要提示：确保将 map zoomSnap选项设置为值0 ，否则 fitBounds 将被修改，以便最终缩放是zoomSnap的倍数（默认为 1，即 integer 缩放级别）

强制地图的缩放级别始终是此值的倍数，尤其是在fitBounds()或捏合缩放之后。 默认情况下，缩放级别会捕捉到最近的 integer； 较低的值（例如0.5或0.1 ）允许更大的粒度。 值为0意味着在fitBounds或双指缩放后缩放级别不会被捕捉。

const M = ({ width, height, zoom, center }) => {
  const wh = [width, 500];
  const origin = [0, 0];
  const bounds = [origin, wh];

  return (
    <div style={{ width: "1100px", height: "600px" }}>
      <MapContainer
        style={{ height: "100%", minHeight: "100%" }}
        bounds={zoom ? undefined : bounds}
        boundsOptions={{
          padding: [0, 0]
        }}
        maxBounds={bounds}
        zoom={center ? zoom : undefined}
        center={zoom ? center : undefined}
        zoomSnap={0} // Important to disable snap after fitBounds
        whenReady={(e) => e.target.fitBounds(bounds)} // Have the map adjust its view to the same bounds as the Image Overlay
      >
        <ImageOverlay
          url="../ptichnikDraw.png"
          bounds={bounds}
          className="map_main"
        />
      </MapContainer>
    </div>
  );
};

更新的 CodeSandbox： https://codesandbox.io/s/pedantic-tree-lz1o9q