Установите перекрывающий маркер Spiderfier для Leaflet с React

Question

Я новичок в React. Я пытаюсь использовать модуль npm overlapping-marker-spiderfier-leaflet в реактивном проекте.

Я следую инструкции на https://www.npmjs.com/package/overlapping-marker-spiderfier-leaflet, поэтому я делаю npm install -S overlapping-marker-spiderfier-leaflet, а затем import OverlappingMarkerSpiderfier from 'overlapping-marker-spiderfier-leaflet'; в моем проекте.

Я тогда делаю var oms = new OverlappingMarkerSpiderfier(this.map);, но я получаю:

Необработанный отказ (TypeError): WEBPACK_IMPORTED_MODULE_8_overlapping_marker_spiderfier_leaflet .OverlappingMarkerSpiderfier не является конструктором

Вы знаете, как я мог решить эту ошибку. Как вы думаете, я мог бы использовать мини-JS, чтобы использовать этот плагин? Как же так?

Answer 1

overlapping-marker-spiderfier-leaflet библиотека ничего не экспортирует в ES6-совместимый способ. Но он может быть напрямую импортирован как файл из папки библиотеки dist:

import "overlapping-marker-spiderfier-leaflet/dist/oms";
const OverlappingMarkerSpiderfier = window.OverlappingMarkerSpiderfier;

Пример

import React from "react";
import {
  withLeaflet,
  MapLayer
} from "react-leaflet";
import L from "leaflet";
import "overlapping-marker-spiderfier-leaflet/dist/oms";
const OverlappingMarkerSpiderfier = window.OverlappingMarkerSpiderfier;

class Spiderfy extends Component {

  componentDidMount(props) {
    const { map } = props.leaflet;
    const oms = new OverlappingMarkerSpiderfier(map);
    //...
  }

  //...
}

Эта демонстрация демонстрирует, как интегрировать overlapping-marker-spiderfier-leaflet в реагирующую листовку .