javascript - 使图像叠加的 map View 适合容器传单的大小

Question

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

当前正在渲染卡片(图像叠加)，但它不会填充放置卡片的容器。

容器的大小被严格设置，我希望 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

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

您将无法使用(仅)CSS 来执行此操作，而是使用由 React Leaflet 包装器公开的 Leaflet map 选项和方法:

1. 使用传单 map whenReady 选项(作为 <MapContainer> 的 prop 公开)附加一个回调，该回调在 map 初始化后执行

Runs the given function fn when the map gets initialized

虽然没有明确记录，但该回调会收到 load事件参数，其中 target 属性是新实例化的Leaflet map

Fired when the map is initialized

调用 fitBounds() 该实例上的 map 方法，与图像叠加具有相同的边界，以使 map View 相应调整

Sets a map view that contains the given geographical bounds with the maximum zoom level possible.

重要提示:确保设置 map zoomSnap 值(value)选项0 ，否则 fitBounds 将被修改，以便最终缩放为 zoomSnap 的倍数(默认为 1，即整数缩放级别)

Forces the map's zoom level to always be a multiple of this, particularly right after a fitBounds() or a pinch-zoom. By default, the zoom level snaps to the nearest integer; lower values (e.g. 0.5 or 0.1) allow for greater granularity. A value of 0 means the zoom level will not be snapped after fitBounds or a pinch-zoom.

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