React-Leaflet磁贴离线存储

Question

我已经看到了一种常见的解决方案，通过使用localforage等来使用Leaflet离线存储tiles，如下所示：

const map = L.map("map-id");
const offlineLayer = L.tileLayer.offline('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', localforage, {

minZoom: 13,
maxZoom: 19,
crossOrigin: true
});
offlineLayer.addTo(map);

我正在尝试使用React-Leaflet来做这件事。我读到过，您必须扩展TileLayer类。然而，扩展似乎不适用于React-Leaflet v2。enable react-leaflet to use be usable offline

有没有人想出解决这个问题的办法。除了不使用react-leaflet和直接使用leaflet之外？

Answer 1

我也在做同样的事情。我没有考虑过v2，但在v3中，我认为需要这样的东西：

import { LayerProps, createTileLayerComponent, updateGridLayer, withPane } from '@react-leaflet/core';
import { TileLayer as LeafletTileLayer, TileLayerOptions } from 'leaflet';
import TileLayerOffline from 'leaflet.offline';
import 'leaflet';
import L from 'leaflet'
import '@react-leaflet/core';
export interface TileLayerProps extends TileLayerOptions, LayerProps {
  url: string;
}
export const TileLayerOfflineExtended = createTileLayerComponent<LeafletTileLayer, TileLayerProps>(
  function createTileLayer({ url, ...options }, context) {
    return {
      instance: (L.tileLayer as any).offline(url, withPane(options, context)),
      context
    };
  },
  updateGridLayer
);

我还没有弄清楚的是如何让控件工作。如果有人把它张贴在这里，我们可以把它放到一个react-leaflet插件npm中，那就很有用了。