使用带有传单的本地图块层

Question

我正在使用 React 和 Leaflet 创建一个项目。

这个项目将运行在没有连接的计算机上离线，所以我需要将切片图层存储在同一台计算机上（没有切片服务器）。

由于我需要一个非常简单的地图，只有几个国家的固定缩放比例，我想它不会太重。

是否可以将整个切片图层存储在客户端？
在哪里可以下载或如何创建这样的地图供离线使用（必须免费）？我只会做一次，所以我更喜欢使用学习曲线低的工具。

<MapContainer center={[lat,lng]} zoom={z}>
    <TileLayer
      attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" <-- this needs to be stored locally
    />
</MapContainer>

Answer 1

这已经是 known problem，但我发现这个答案比您需要的要复杂一些。这是我的伪答案/建议：

我建议您在开始使用之前先阅读 this article 有关 slippymap tilenames 的内容。它会帮助...很多。

考虑到您有固定的缩放比例，并且听起来像是有限的地图范围（边界），获取您的图块应该不会太难。我会打开一个浏览器，其中的传单地图设置为该缩放和边界，然后查看您的网络选项卡。您将看到您需要的所有磁贴的网络请求，并且您将看到这些磁贴的 urls。然后您可以直接下载这些图块。

您也可以为此使用 leaflet-offline。它是一个很棒的快速工具，可以获取您所有的拼贴 url，并且可以精美地布置您需要的拼贴 url。 leaflet-offline 也有办法在你需要的目录结构中自动下载所有这些图块，但我发现他们的文档很难理解。

在您机器上的某个位置创建一个目录，并将其命名为有用的名称，例如“my-offline-tiles”。在该目录中，创建一个子目录并将其命名为您希望地图达到的缩放级别（假设为 10）。所以你会有这样的东西：

/my-offlline-tiles
  /10

当您一次下载一个图块时，请记住，一旦您下载了它们，它们将被命名为类似“32.png”之类的名称，基本上是“[=41=” ]”。对于给定的缩放和 x 列，该数字（如我链接的文章中所述）是图块的 y 位置。因此，您必须注意那些 url 中的 z 和 x 值是什么，并将图块下载到“my-offline-tiles”目录中的相应子目录中。例如，任何以 10/245/something.png 结尾的图块都将放在这个目录中：

/my-offlline-tiles
  /10
    /245
      something.png

您最终可能会在 /10 目录下找到一些目录，每个目录中都有一些 png 文件。正如您希望在那篇文章中读到的那样，这就是切片服务器构建其切片文件以便于访问的方式。您需要复制该结构，并提供足够的图块来覆盖您所需缩放级别的边界。

现在在您的地图中，您只需将 L.tileLayer 的 url 设置为您的图块位置。假设 /my-offlline-tiles 在项目的 public 目录中（与 index.html）

<TileLayer url="/my-offline-tiles/{z}/{x}/{y}.png" />

这可能需要根据您的项目结构、构建过程或运行所在机器的目录结构进行一些调整。基本上，您需要确保您的 React 应用程序知道在您的计算机上的何处可以找到这些文件。但只要这样做，传单就会找到这些图块并按预期在您的地图中呈现它们。

希望这足以让您入门。

使用带有传单的本地图块层

Use a local tile layer with leaflet

openstreetmap

leaflet

reactjs

react-leaflet