React-Leaflet 大型非地理地图绘制难题：如何优雅解决？

javascript

2024-06-10 08:37:22

React-Leaflet：绘制大型非地理地图的解决方案

背景

在使用 React-Leaflet 绘制大型非地理地图时，当地图的宽度和高度超过 1000 万像素时，会遇到图像消失或地图消失的问题。这是因为 Leaflet 渲染图像叠加的限制，超过 600 万像素的图像将无法正确显示。

解决方案

为了解决此问题，我们需要将大型图像分成较小的块，然后将每个块作为单独的图像叠加层添加到地图中。以下步骤可帮助您实现此解决方案：

计算图像的块大小。我们建议使用 100 万像素作为块大小，即 chunkSize = 1000000。
根据块大小和图像的总宽度和高度，计算块的总数。
使用 Array.map() 方法为每个块创建图像叠加层。
将所有图像叠加层添加到 React-Leaflet 地图容器中。

代码示例

以下代码展示了如何将大型图像分成块并将其添加到 React-Leaflet 地图中：

import React from "react";
import L from "leaflet";
import { MapContainer, ImageOverlay, ZoomControl, Marker, Popup } from "react-leaflet";

const chunkSize = 1000000;
const bounds = L.bounds([[0, 0], [width, height]]);

const MapComponent = () => {
  const [chunks, setChunks] = React.useState([]);

  React.useEffect(() => {
    const newChunks = [];
    for (let x = 0; x < width; x += chunkSize) {
      for (let y = 0; y < height; y += chunkSize) {
        newChunks.push([[x, y], [x + chunkSize, y + chunkSize]]);
      }
    }
    setChunks(newChunks);
  }, [width, height]);

  return (
    <MapContainer
      center={[0, 0]}
      zoom={0}
      bounds={bounds}
      zoomControl={false}
      minZoom={-1000}
      maxZoom={7}
      crs={L.CRS.Simple}
    >
      {chunks.map((chunk) => (
        <ImageOverlay
          url="path/to/image.png"
          bounds={chunk}
          className="border box-border border-black"
        />
      ))}
      <ZoomControl position="bottomleft" />
    </MapContainer>
  );
};

export default MapComponent;