使 react-leaflet 可以离线使用

Question

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

现在我希望网站预加载尽可能多的图块，以便可以使用网络应用程序（也是 PWA）w/o 互联网。

我找到了一些现有的解决方案（虽然不是专门用于 React 的）

这是我迄今为止尝试过的 - 使用 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>
    );
  }
}

这个例子中有错误说，地图已经初始化

Map container is already initialized.

有没有一种方法可以使现有的解决方案与 react-leaflet 兼容？或者有没有更好的方法为 PWA 添加离线模式？

如有任何见解，我们将不胜感激。提前致谢！

Answer 1

是的，您需要扩展 react-leaflet 的 TileLayer class。如果您使用的是 V1，那将非常简单。这是 fiddle：https://jsfiddle.net/q2v7t59h/1965/ 目前它打破了 localforage 用法（以前从未使用过）所以你必须修复它。但是定义一个createLeafletElement函数的症结还是正确的。

如果您使用的是 react-leaflet V2，那么扩展 TileLayer 会比较麻烦。通读 https://github.com/PaulLeCam/react-leaflet/issues/506 ，你应该能够弄明白。哦，如果您认为值得关注，请为该问题投票。

Answer 2

您可以在传单

上方添加另一个带有一些 ID 的 div

并使用该 ID 添加到地图 IE。 const map = L.map('map-id'); 而不是 const map = L.map('map'); 在 componentDidMount

Answer 3

在offlineLayer.addTo(map)

之前添加map.remove()

使 react-leaflet 可以离线使用

enable react-leaflet to use be usable offline

javascript

reactjs

leaflet

offline

react-leaflet