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

Question

我是 React 新手。我尝试在 react 项目中使用 npm 模块overlay-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 library 不会以 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);
    //...
  }

  //...
}

This demo 演示了如何将overlapping-marker-spiderfier-leaflet 集成到react-leaflet 中。