Установите Overlapping Marker Spiderfier для Leaflet с React

Я новичок в 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 для использования этого плагина? Как так?


reactjs leaflet react-leaflet markerspiderfier
person Martin J    schedule 04.07.2018    source источник

Ответы (1)


arrow_upward
6
arrow_downward

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 в листовка с реакцией.

person Vadim Gremyachev    schedule 08.04.2019
comment
На самом деле вы проделали отличную работу, спасибо вам большое, у меня это сработало, я использую response-листовку. - person edgar mlowe; 27.11.2020