如何解决React-Leaflet磁贴的离线存储
我已经看到了一种通用的解决方案,可以通过使用诸如以下这样的localforage等通过Leaflet离线存储图块:
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和直接使用传单以外?
解决方法
我正在做同样的事情。没看过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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。