reactjs - 使用 React 为 Leaflet 安装 Overlapping Marker Spiderfier

Question

我是 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); 但我得到:

Unhandled Rejection (TypeError): WEBPACK_IMPORTED_MODULE_8_overlapping_marker_spiderfier_leaflet.OverlappingMarkerSpiderfier is not a constructor

你知道我如何解决这个错误吗？你认为我宁愿使用缩小的 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 中.