使用带有传单的局部瓷砖层

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

这已经是一个已知问题，但我发现答案比您可能需要的要复杂一些。这是我的伪答案/建议：

我建议您在开始使用之前阅读这篇有关 slippymap 图块名称的文章。这会很有帮助。

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

您还可以使用leaflet-offline来实现此目的。它是一个很棒的快速工具，可以获取您所有的图块网址，并且可以精美地布置您需要的图块网址。leaflet-offline 也可能有一种方法可以自动下载您需要的目录结构中的所有这些图块，但我发现他们的文档很难遵循。

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

/my-offlline-tiles
  /10

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

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

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

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

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

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

希望这足以让您开始。