React与Leaflet项目如何在纯离线环境下使用本地瓦片层

本地直接存储瓦片的可行性 #

完全支持把完整瓦片层直接存在客户端本地，根本不需要额外搭建独立瓦片服务器。
Leaflet的TileLayer组件不限制瓦片的来源位置，只要访问路径能被当前运行环境正常解析，且瓦片文件遵循{z}/{x}/{y}.png的目录规则，就能正常加载。
你只要把下载好的离线瓦片存到项目可访问的静态资源目录（比如React项目的public文件夹），把原代码里的远程瓦片地址换成本地相对路径就行，修改完成可直接运行的代码如下：

<MapContainer center={[lat,lng]} zoom={z}>
    <TileLayer
      attribution='&copy; OpenStreetMap contributors'
      url="./offline-tiles/{z}/{x}/{y}.png"
    />
</MapContainer>

注意：只要本地磁盘的瓦片目录结构和url路径完全匹配——也就是把瓦片存在public/offline-tiles文件夹下，文件夹内按「缩放级别/横向坐标/纵向坐标.png」的规则存放文件，离线状态下完全不需要发送任何网络请求就能正常加载地图。哪怕是把瓦片存在离线电脑的本地磁盘固定分区，只要项目启动时把这个路径映射成静态可访问的目录，一样能正常使用。

低学习成本的免费瓦片获取方式 #

适配你“仅操作一次、覆盖范围小、缩放层级固定、整体数据量不大”的场景，优先选择不需要复杂部署、操作全可视化的免费工具，完全不需要专业GIS基础就能完成操作：

• 可视化框选式瓦片下载工具：本地运行的开源工具，打开后直接在在线地图界面框选需要覆盖的国家范围，选好要用的固定缩放层级，工具会自动按Leaflet能识别的目录结构导出瓦片包，直接拷贝到项目静态目录就能用，全程不需要写代码。
• 轻量瓦片裁剪工具：如果不想从零开始全量下载瓦片，这类工具支持接入公开的开源瓦片源，框选指定范围、筛掉用不上的缩放层级，直接导出小体积的专属瓦片包，避免浪费存储空间存无用的全量地图数据。
• 本地零散文件整理方案：如果已经在有网环境下通过浏览器缓存攒了少量测试用瓦片，根本不需要做格式转换，直接把零散的瓦片文件按层级规则整理到对应文件夹，就能被Leaflet正常识别，连额外工具都不用安装。

内容的提问来源于stack exchange，提问作者Oz Heymann