включить использование реакционной листовки в автономном режиме - PullRequest
Новая
       17

включить использование реакционной листовки в автономном режиме

0 голосов
/ 15 октября 2018

Я использовал библиотеку реагировать-листовка , пока она работала хорошо.

Теперь я хотел, чтобы сайт предварительно загружал как можно больше фрагментов, чтобы веб-приложение (также PWA) могло использоваться без интернета.

Я нашел несколько существующих решений (хотя и не предназначенных для реакции)

Это то, что я пробовал до сих пор - использование листовки в автономном режиме 

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.

Есть ли способ заставить одно существующее решение хорошо играть с реактивной листовкой?Или есть лучшие способы добавить автономный режим для PWA?

Любое понимание будет высоко ценится.Заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 04 июля 2019

Вы можете добавить еще один div с некоторым идентификатором выше листовки

и добавить к карте, используя этот идентификатор, т.е.const map = L.map('map-id'); вместо const map = L.map('map'); в componentDidMount

0 голосов
/ 16 октября 2018

Да, вам нужно расширить react-leaflet класс TileLayer.Если вы используете V1, это довольно просто.Вот скрипка: https://jsfiddle.net/q2v7t59h/1965/ В настоящее время она нарушает использование localforage (никогда раньше не использовала), поэтому вам придется это исправить.Но суть определения функции createLeafletElement по-прежнему верна.

Если вы используете react-leaflet V2, тогда расширение TileLayer немного больше боли.Прочитайте https://github.com/PaulLeCam/react-leaflet/issues/506, и вы сможете понять это.Да, и проголосуйте за этот вопрос, если считаете, что он заслуживает внимания.

...