我在 Angular 5 中使用 Node.js 开发了项目。现在在我的项目中，我想要连接飞行动画并使用名为“飞行动画”的 OpenLayers 示例。问题是在示例中使用了一个名为“arc.js”的库，我无法导入它。我使用“npm install --save arc”安装了库，但仍然无法识别“arc”。我的代码是：
import { ElementRef, Injectable, OnInit } from '@angular/core';
import { MatSnackBar } from '@angular/material';
import Map from 'ol/map';
import View from 'ol/view';
import Proj from 'ol/proj';
//Layers
import TileLayer from 'ol/layer/tile';
import LayerVector from 'ol/layer/vector';
import SourceVector from 'ol/source/vector';
import GeoJSON from 'ol/format/GeoJSON';
import Feature from 'ol/feature';
//Image WMS
import Image from 'ol/layer/Image';
import ImageWMS from 'ol/source/ImageWMS';
import WMSGetFeatureInfo from 'ol/format/WMSGetFeatureInfo';
import TileImage from 'ol/source/tileimage';
//Popup
import Overlay from 'ol/Overlay';
import arc from 'arc/arc.js';
//OpenLayers Styles
import Style from 'ol/style/style';
import Stroke from 'ol/style/stroke';
import Fill from 'ol/style/fill';
import Text from 'ol/style/text';
import Circle from 'ol/style/circle';
import Icon from 'ol/style/icon';
//Graphic Types
import Geometry from 'ol/geom/geometry';
import Point from 'ol/geom/point';
import MultiPoint from 'ol/geom/multipoint';
import MultiPolygon from 'ol/geom/multipolygon';
import Extent from 'ol/extent';
//Cluster
import Cluster from 'ol/source/cluster';
//HeatMap
import Heatmap from 'ol/layer/Heatmap';
import KML from 'ol/format/kml';
//BaseMaps
import OSM from 'ol/source/OSM';
import BingMaps from 'ol/source/BingMaps';
//OpenLayers Interaction
import olInteraction from 'ol/interaction';
import InteractionMouseWheelZoom from 'ol/interaction/mousewheelzoom';
//WKT
import Wkt from 'ol/format/wkt';
//Loading Strategy
import loadingstrategy from 'ol/loadingstrategy';
//Animation
import Easing from 'ol/easing';
import LineString from 'ol/geom/linestring';
import Stamen from 'ol/source/stamen';
//Control ?
import Control from 'ol/control';
import { LayersService } from '../layer-service/layers.service';
import { environment } from '../../environments/environment';
import { Http, URLSearchParams, Headers } from '@angular/http';
import { headersToString } from 'selenium-webdriver/http';
import { NavbarService } from '../navbar-service/navbar.service';
import { LayerType } from '../enums/layer-type.enum';
import { UtilService } from '../util-service/util.service';
import { RequestService } from '../request-service/request.service';
import { OverlayComponent } from '../overlay/overlay.component';
lineAnimation(){
var style = new Style({
stroke: new Stroke({
color: '#EAE911',
width: 2
})
});
var flightsSource;
var addLater = function (feature, timeout) {
window.setTimeout(function () {
feature.set('start', new Date().getTime());
flightsSource.addFeature(feature);
}, timeout);
};
var pointsPerMs = 0.1;
var animateFlights = function (event) {
var vectorContext = event.vectorContext;
var frameState = event.frameState;
vectorContext.setStyle(style);
var features = flightsSource.getFeatures();
for (var i = 0; i < features.length; i++) {
var feature = features[i];
if (!feature.get('finished')) {
// only draw the lines for which the animation has not finished yet
var coords = feature.getGeometry().getCoordinates();
var elapsedTime = frameState.time - feature.get('start');
var elapsedPoints = elapsedTime * pointsPerMs;
if (elapsedPoints >= coords.length) {
feature.set('finished', true);
}
var maxIndex = Math.min(elapsedPoints, coords.length);
var currentLine = new LineString(coords.slice(0, maxIndex));
// directly draw the line with the vector context
vectorContext.drawGeometry(currentLine);
}
}
// tell OpenLayers to continue the animation
this.Map.render();
};
flightsSource = new SourceVector({
wrapX: false,
attributions: 'Flight data by ' +
'<a href="http://openflights.org/data.html">OpenFlights</a>,',
loader: function () {
var url =
'https://openlayers.org/en/v4.6.5/examples/data/openflights/flights.json';
fetch(url).then(function (response) {
return response.json();
}).then(function (json) {
var flightsData = json.flights;
for (var i = 0; i < flightsData.length; i++) {
var flight = flightsData[i];
var from = flight[0];
var to = flight[1];
// create an arc circle between the two locations
var arcGenerator = new arc.GreatCircle(
{ x: from[1], y: from[0] },
{ x: to[1], y: to[0] });
var arcLine = arcGenerator.Arc(100, { offset: 10 });
if (arcLine.geometries.length === 1) {
var line = new LineString(arcLine.geometries[0].coords);
line.transform(Proj.get('EPSG:4326'), Proj.get('EPSG:3857'));
var feature = new Feature({
geometry: line,
finished: false
});
// add the feature with a delay so that the animation
// for all features does not start at the same time
addLater(feature, i * 50);
}
}
this.Map.on('postcompose', animateFlights);
});
}
});
var flightsLayer = new LayerVector({
source: flightsSource,
style: function (feature) {
// if the animation is still active for a feature, do not
// render the feature with the layer style
if (feature.get('finished')) {
return style;
} else {
return null;
}
}
});
this.map.addLayer(flightsLayer);
}我在 'var arcGenerator = new arc.GreatCircle('