Leaflet / Progressive Web App - 在 tile 404 上快速周转(可能使用 Workbox)?

Leaflet / Progressive Web App - quick turnaround on tile 404 (perhaps using Workbox)?

我有一张带有两套我自己的图块的传单地图(这是一张露营地地图)。瓦片仅限于营地边界,所以我没有很多。我已经构建了一个渐进式 Web 应用程序(使用 Workbox 进行缓存)并开始考虑以下情况:

有大量请求不存在的图块,其中 TileLayer 知道通过 errorTileUrl 提供默认图块,这意味着即使在离线时也有相当多的 404 请求(因为磁贴不会在缓存中)。但是,这对我来说似乎有点傻,因为我 知道 应该提前显示哪些图块,所以我应该能够防止地图外 404(查看大约 20 个失败的请求)在启动时)。

我确实需要能够显示(空白)地图外图块,因为我无法保证 orientation/geometry 设备上的全屏地图。

我的主要问题是:这值得担心吗?该应用程序现在可以正常工作;只是想提高网络效率。

如果是这样,我考虑过的一个选择是创建一个新的 workbox.router 路由来处理检索图块的调用,如果它不在列表中,则快速 return 一个 404,否则转到 cache/network。或者我在已经处理这个问题的传单(或插件)中遗漏了什么?

感谢您的想法。

您应该能够使用以下选项在矩形区域和缩放范围内指定 Leaflet Tile Layer 的可用图块:

  • bounds:如果设置,瓦片只会加载到集合LatLngBounds内。
  • minNativeZoom:瓦片源可用的最小缩放数。如果指定,所有低于 minNativeZoom 的缩放级别的图块将从 minNativeZoom 级别加载并自动缩放。
  • maxNativeZoom:瓦片源可用的最大缩放数。如果指定,所有缩放级别高于 maxNativeZoom 的图块将从 maxNativeZoom 级别加载并自动缩放。

如果您的可用图块没有填充矩形区域,您可以提供虚拟图块来填充未覆盖的区域。使用 Service Worker 路由器确实有助于重定向到缓存中的公共虚拟磁贴。

对于外部区域,您可以只使用容器背景。或者,如果您真的想要与 Tile Layer 类似的效果,请使用指向通用虚拟/"no tile available" 常量 url 模板的虚拟图层。