使react-leaflet可以离线使用 [英] enable react-leaflet to use be usable offline

问题描述

我一直在使用 react-leaflet 库，到目前为止，它运行良好.

I have been using the react-leaflet library, so far it worked well.

现在，我希望网站尽可能多地预加载图块，以便可以在不使用互联网的情况下使用Web应用程序(也是PWA).

Now I wanted the site to pre-load as much of the tiles as possible so that the web-app(also a PWA) could be used w/o internet.

我找到了一些现有的解决方案(尽管不专门用于反应)

I found some existing solutions(although not dedicated for react)

• 传单-离线
• leaflet.offline

这是我到目前为止尝试过的-使用传单离线

This is what i've tried so far - using leaflet-offline

import React from 'react';
import 'leaflet-offline';

import {
  Map as LeafletMap,
  TileLayer,
  CircleMarker,
  Marker,
  Popup,
} from 'react-leaflet';

import 'leaflet/dist/leaflet.css';
import L from 'leaflet';
import localforage from 'localforage';

const defaultCoords = {
  latitude: 0,
  longitude: 0,
};

export class MapPage extends React.Component {
  constructor(props) {
    super(props);
    this.map = React.createRef();
  }
  componentDidMount() {
    const map = L.map('map');
    const offlineLayer = L.tileLayer.offline(
      'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      localforage,
      {
        attribution:
          '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        minZoom: 5,
        maxZoom: 20,
        crossOrigin: true,
      },
    );
    // offlineLayer.addTo(this.map); // tried to add to the reference, didn't work
    offlineLayer.addTo(map);
  }
  render() {
    const { latitude, longitude } = this.props.coords || defaultCoords;
    return (
      <LeafletMap
        center={this.props.initialLocation}
        zoom={16}
        // ref={this.map} // tried referencing it also, didn't work
        id="map"
      >
        <TileLayer
          attribution="&copy; <a href=&quot;https://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
          url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
        />
        <CircleMarker center={[latitude, longitude]}>
          <Popup>You are here!</Popup>
        </CircleMarker>
        <Marker
          icon={markerIcon}
          position={newPerson.location || this.props.initialLocation}
          draggable
          onDragEnd={this.props.handleNewPersonPositionChange}
        />
      </LeafletMap>
    );
  }
}

此示例中的错误表明，地图已经初始化

There error on this example says that, map is already initialized

地图容器已经初始化.

是否有一种方法可以使现有解决方案与react-leaflet完美配合?还是有更好的方法为PWA添加脱机模式?

Is there a way to make one existing solution play well with react-leaflet? Or are there better ways to add offline mode for the PWA?

任何见识都将受到高度赞赏.预先感谢！

Any insight would be highly appreciated. Thanks in advance!

推荐答案

是的，您需要扩展 react-leaflet 的 TileLayer 类.如果您使用的是V1，则非常简单.这是一个小提琴: https://jsfiddle.net/q2v7t59h/1965/目前，它正在破坏 localforage 的用法(以前从未使用过)，因此您必须对其进行修复.但是定义 createLeafletElement 函数的关键仍然是正确的.

Yeah you'll need to extend react-leaflet's TileLayer class. If you're using V1 that's pretty straightforward. Here's a fiddle: https://jsfiddle.net/q2v7t59h/1965/ Currently it's breaking on the localforage usage (never used that before) so you'll have to fix that. But the crux of defining a createLeafletElement function is still correct.

如果您使用的是 react-leaflet V2，那么扩展 TileLayer 会比较麻烦.阅读 https://github.com/PaulLeCam/react-leaflet/issues/506 ，您应该可以弄清楚.哦，如果您认为值得关注，请对该问题进行投票.

If you're using react-leaflet V2 then extending TileLayer is a bit more of a pain. Read through https://github.com/PaulLeCam/react-leaflet/issues/506 and you should be able to figure it out. Oh and vote for that issue if you think it deserves attention.

这篇关于使react-leaflet可以离线使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！