在Leaflet中使用本地切片图层

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>

- Oz Heymann

---

我知道这是一个老问题，但对于现在碰巧遇到的人来说，这可能是一个不错的选择 :) https://dev59.com/3VcP5IYBdhLWcg3w8eS5#43608920 - undefined

Answer 1

这已经是一个已知的问题，但我认为那个答案可能比你需要的更加复杂。这是我的伪答案/建议：

在开始之前，我建议您阅读关于slippymap tilenames的这篇文章，它会帮助很多。

考虑到您有固定的缩放级别和似乎具有有限的地图范围（边界），获取您的瓦片不应该太难。我建议打开一个浏览器，使用一个设置了该缩放级别和边界的leaflet地图，并查看网络选项卡。您将看到所有需要的瓦片的网络请求，以及这些瓦片的url。然后，您可以直接下载这些瓦片。

您也可以使用leaflet-offline来完成这个操作。它是一个非常好用的快速工具，可以获取您所需的所有瓦片的URL，并将其美观地展示出来。leaflet-offline还可能有一种自动下载所有这些瓦片到您需要的目录结构的方法，但我发现他们的文档很难理解。

在您的计算机上创建一个目录，并给它起一个有用的名称，例如“我的离线瓦片”。在该目录中，创建一个子目录，并将其命名为您预期地图所在的缩放级别（假设它是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

你的 /10 目录下可能会有几个子目录，每个子目录下可能还有几个 png 文件。这是瓦片服务器结构化其瓦片文件以方便访问的方式，正如你在那篇文章中所了解到的。你需要复制这个结构，并提供足够的瓦片覆盖你所需的缩放级别和范围。

现在，在你的地图中，你只需要将 L.tileLayer 的 url 设为你的瓦片位置即可。假设 /my-offlline-tiles 在你的项目（包括 index.html）的 public 目录下。

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

根据您的项目结构、构建流程或机器目录结构，可能需要稍微调整一下。基本上，您需要确保您的React应用程序知道如何在您的机器上找到这些文件。但只要它做到了，Leaflet将会找到这些瓦片并按预期在地图上呈现它们。

希望这已经足够让您开始了。

- Seth Lutske

---

非常感谢你提供的出色而详尽的回答 :-) - undefined