使用带有传单的本地切片图层

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 的内容。它会帮助...很多。

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

您也可以为此使用leaflet-offline。它是获取所有磁贴 url 的绝佳快速工具，并将精美地布置您需要的磁贴 url。 Leaflet-offline 也可能有一种方法可以在您需要的目录结构中自动下载所有这些图块，但我发现他们的文档很难遵循。

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

/my-offlline-tiles
  /10

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

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

您最终可能会在 /10 目录下得到一些目录，并且每个目录中都有一些 png 文件。正如您希望在那篇文章中所读到的，这就是 tile 服务器如何构造它们的 tile 文件以便于访问。您需要复制该结构，并提供足够的图块来覆盖您所需缩放级别的范围。

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

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

这可能需要根据您的项目结构、构建过程或正在运行的机器的目录结构进行一些调整。基本上，你需要确保你的 react 应用知道在你的机器上哪里可以找到这些文件。但只要这样做，leaflet 就会找到图块并按预期将它们呈现在您的地图中。

希望这足以让您入门。