使图像叠加的地图视图适合容器传单的大小

Question

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

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

容器的大小是严格设置的，我希望地图尽可能填充容器。所有使用 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>）填充初始地图容器/视口。

您将无法（仅）使用 CSS 来执行此操作，而是使用由 React Leaflet 包装器公开的 Leaflet 地图选项和方法：

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

fn地图初始化时运行给定的函数

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

地图初始化时触发

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

设置包含给定地理边界和可能的最大缩放级别的地图视图。

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

强制地图的缩放级别始终是此值的倍数，特别是在缩放fitBounds()或捏缩放之后。默认情况下，缩放级别捕捉到最接近的整数；较低的值（例如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