时间戳

首页 > 解决方案 > React Leaflet - 让 Tiles 离线

javascript - React Leaflet - 让 Tiles 离线

问题描述

我使用leaflet.offline，它允许将图块保存在indexedDB 中。通过单击“L.control”按钮完成备份。我希望每次启动地图时自动备份（没有按钮）。如何使用leaflet.offline 或您知道另一种方式吗？

图层创建 - 工作正常

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], // optional zoomlevels to save, default current zoomlevel
});
controlSaveTiles.addTo(map);

标签： javascriptleafletreact-leaflet

解决方案

看源码，savetiles控制按钮触发_saveTiles()方法。controlSaveTiles您可以直接在包含对savetiles控件的引用的变量上调用此方法。

const controlSaveTiles = L.control.savetiles(tileLayerOffline, {
  zoomlevels: [13, 16]
});
controlSaveTiles._saveTiles(); // no need to addTo(map), just save

创建控制按钮的代码： https ://github.com/allartk/leaflet.offline/blob/master/src/ControlSaveTiles.js#L123

保存瓦片的方法： https ://github.com/allartk/leaflet.offline/blob/master/src/ControlSaveTiles.js#L144

推荐阅读