Leaflet 未捕获的TypeError:_arc2.default.GreatCircle不是构造函数

正在尝试为react传单创建插件。我在工作时遇到了这个错误 我回来了

L.Polyline.Arc（位置.from，位置.to，选项）

这是我的组件

import React, { PropTypes } from 'react';
import { Path } from 'react-leaflet';
import L from 'leaflet'
import { Arc } from './leaflet.arc';


export default class ArcLine extends Path {
  static propTypes = {
    children: PropTypes.oneOfType([
      PropTypes.arrayOf(PropTypes.node),
      PropTypes.node,
    ]),
    option:PropTypes.object,
    position: PropTypes.object.isRequired
  };

  createLeafletElement (props) {
    const { position, option, ...options } = props
    return L.Polyline.Arc(position.from, position.to, option)
  }

  updateLeafletElement (fromProps, toProps) {
    if (toProps.position !== fromProps.position) {
      this.leafletElement._createLatLngs(line, toProps.position.from)
    }
    this.setStyleIfChanged(fromProps, toProps)
  }
}

/传单.arc是

import arc from 'arc';
/**
 * Transform L.LatLng to {x, y} object
 * @param {L.LatLng} latlng
 * @returns {{x: {number}, y: {number}}}
 * @private
 */
const _latLngToXY = latlng => ({
    x: latlng.lng,
    y: latlng.lat
});

/**
 * Create array of L.LatLng objects from line produced by arc.js
 * @param {object} line
 * @param {L.LatLng} from
 * @private
 * @returns {Array}
 */
function _createLatLngs(line, from) {
    if (line.geometries[0] && line.geometries[0].coords[0]) {
        /**
         * stores how many times arc is broken over 180 longitude
         * @type {number}
         */
        let wrap = from.lng - line.geometries[0].coords[0][0] - 360;

        return line.geometries
            .map(subLine => {
                wrap += 360;
                return subLine.coords.map(point => L.latLng([point[1], point[0] + wrap]));
            })
            .reduce((all, latlngs) => all.concat(latlngs));
    } else {
        return [];
    }
}

if (!L) {
    throw "Leaflet.js not included";
}  else if (!arc && !arc.GreatCircle) {
    throw "arc.js not included";
} else {
    L.Polyline.Arc = function (from, to, options) {
        from = L.latLng(from);
        to = L.latLng(to);
debugger

        var vertices = 10;
        var arcOptions = {};
        if (options) {
            if (options.offset) {
                arcOptions.offset = options.offset;
                delete options.offset;
            }
            if (options.vertices) {
                vertices = options.vertices;
                delete options.vertices;
            }
        }

        var generator = new arc.GreatCircle({x: from.lng, y: from.lat}, {x: to.lng, y: to.lat});

        var line = generator.Arc(vertices, arcOptions);
        var latLngs = [];

        var wrap = 0; // counts how many times arc is broken over 180 degree
        if (line.geometries[0] && line.geometries[0].coords[0])
            wrap = from.lng - line.geometries[0].coords[0][0];

        line.geometries.forEach(function(line) {
            line.coords.forEach(function (point) {
                latLngs.push(L.latLng(
                    [point[1], point[0] + wrap]
                ));
            });
            wrap += 360;
        });
        line.geometries[0].coords
        return L.polyline(latLngs, options);
    };
}

为什么我会遇到这个错误，有什么建议吗？

在这行：

import { Arc } from './leaflet.arc'

…您正试图从

传单.Arc

文件导入Arc变量。但是，在

传单.arc

文件中，看起来您并没有导出任何内容，只需将arc函数附加到传单的多段线对象。此外，在组件中的代码中，您甚至没有使用要导入的

Arc

变量。因此，代码失败，因为试图从

spoolet.arc

的未定义导出读取属性。似乎您应该只导入文件而不尝试导入任何对象

TLDR：

替换此行：

import { Arc } from './leaflet.arc'

为此：

import './leaflet.arc'

---

我也试过了，但同样的错误。使用调试器时，我的代码正在工作，数据会按我看到的那样传递，但当var generator=new arc.GreatCircle（{x:from.lng，y:from.lat}，{x:to.lng，y:to.lat}）时，数据会停止传递；如果（！arc&&！arc.GreatCircle）{尝试将这一行更改为：

}如果（！arc | |！arc.GreatCircle）{

在您的传单.arc文件中。它表示未包含Uncaught arc.js，并且带有console.log（arc）我得到一个空对象。但我已经包含了arc。您是否在package.json中包含了arc并安装了它？是的，我使用了npm安装--save arc，在packge json中我得到了依赖项“arc”：“^0.1.0”