React Leaflet使用leaflet.offline实现地图初始化自动备份离线瓦片咨询

方案1：复用现有savetiles控件自动触发 #

你不需要修改现有的控件初始化逻辑，只需要在地图初始化完成后主动调用控件的内置保存方法即可，不需要用户手动点击按钮，不需要显示按钮也可以：

// 你已有的图层、控件初始化代码保持不变
const tileLayerOffline = L.tileLayer.offline(
  "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
  {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
    subdomains: "abc",
    crossOrigin: true,
    minZoom: 13,
    maxZoom: 16,
  }
)
const controlSaveTiles = L.control.savetiles(tileLayerOffline, {
  zoomlevels: [13, 16], 
});
controlSaveTiles.addTo(map);

// 新增自动触发逻辑：监听地图加载完成事件
map.on('load', () => {
  // 取当前地图视口的范围，也可以自定义固定范围
  const saveBounds = map.getBounds();
  // 调用保存方法，传入范围和要保存的缩放级别
  controlSaveTiles.saveTiles(saveBounds, controlSaveTiles.options.zoomlevels);
  // 不需要显示保存按钮的话，调用后直接移除控件即可
  controlSaveTiles.remove();
})

方案2：不依赖控件，直接调用底层存储API实现 #

如果你不需要控件的UI交互，可以直接调用库暴露的底层方法实现保存，代码更精简：

const tileLayerOffline = L.tileLayer.offline(
  "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
  {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
    subdomains: "abc",
    crossOrigin: true,
    minZoom: 13,
    maxZoom: 16,
  }
).addTo(map);

map.on('load', () => {
  const saveBounds = map.getBounds();
  // 自定义需要保存的缩放级别
  const saveZoomLevels = [13,14,15,16];
  saveZoomLevels.forEach(zoom => {
    // 获取当前范围指定缩放级别的所有瓦片数据
    const tileList = L.TileLayer.Offline.getTileUrls(tileLayerOffline, saveBounds, zoom);
    // 批量存入indexedDB
    tileList.forEach(tile => {
      L.TileLayer.Offline.saveTile(tile.url, tile.key).catch(err => console.log('瓦片保存失败', err));
    })
  })
})

注意事项 #

• 瓦片保存会占用用户设备存储空间和网络带宽，建议添加保存进度提示，同时可以先判断对应瓦片是否已存在，避免重复请求保存
• 如果需要保存固定范围的瓦片，不需要取当前视口范围，可以自己构造L.LatLngBounds对象传入即可
• 你的瓦片配置已经添加了crossOrigin: true，满足跨域瓦片存储的要求，无需额外调整

内容的提问来源于stack exchange，提问作者Francois T