Javascript React传单瓷砖离线储存

我已经看到了一种通过使用LocalFower等将瓷砖与传单脱机存储的常见解决方案，如下所示：

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传单来做这件事。我读到你必须延长期限 Tillelayer类。但是，扩展似乎不适用于React传单v2

---

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

我正在做同样的事情。没有看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
);

import{LayerProps，createTileLayerComponent，updateGridLayer，withPane}来自'@react-palicate/core'；
从“传单”导入{TileLayer作为传单TileLayer，TileLayerOptions}；
从“传单.脱机”导入TileLayerOffline；
进口"单张";；
从“传单”中导入L
导入“@react传单/核心”；
导出接口TileLayerProps扩展TileLayerOptions、LayerOps{
url:string；
}
导出常量TileLayerOfflineExtended=createTileLayerComponent(
函数createTileLayer（{url，…options}，上下文）{
返回{
实例：（L.tileLayer，如有）。脱机（url，withPane（选项，上下文）），
上下文
};
},
updateGridLayer
);

---

我还没有弄明白的是如何让控件正常工作。如果有人把它贴在这里，我们可以把它放到react传单插件npm中，这会很有用。我也在做同样的事情。没有看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
);

import{LayerProps，createTileLayerComponent，updateGridLayer，withPane}来自'@react-palicate/core'；
从“传单”导入{TileLayer作为传单TileLayer，TileLayerOptions}；
从“传单.脱机”导入TileLayerOffline；
进口"单张";；
从“传单”中导入L
导入“@react传单/核心”；
导出接口TileLayerProps扩展TileLayerOptions、LayerOps{
url:string；
}
导出常量TileLayerOfflineExtended=createTileLayerComponent(
函数createTileLayer（{url，…options}，上下文）{
返回{
实例：（L.tileLayer，如有）。脱机（url，withPane（选项，上下文）），
上下文
};
},
updateGridLayer
);

我还没有弄明白的是如何让控件正常工作。如果有人把它贴在这里，我们就可以把它放到react传单插件npm中