使用 React 为 Leaflet 安装重叠标记 Spiderfier

Question

我是 React 的新手。我尝试在反应项目中使用 npm 模块重叠标记蜘蛛飞叶传单。

我按照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); 但我得到：

未处理的拒绝（类型错误）： WEBPACK_IMPORTED_MODULE_8_overlapping_marker_spiderfier_leaflet .OverlappingMarkerSpiderfier 不是构造函数

你知道我如何解决这个错误。你认为我更愿意使用缩小的 js 来使用这个插件吗？为何如此？

Answer 1

overlapping-marker-spiderfier-leafletlibrary不会以 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到react-leaflet 中。