0

I have project developed in Angular 5 with Node.js . Now in my project I want to have flight animation connections and used the example of OpenLayers called 'Flight Animation'. The problem is that there is a library called 'arc.js' used in example which I could not import it. I installed the library using 'npm install --save arc' but still 'arc' is not recognized. My code is :

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);

}

I get the error in 'var arcGenerator = new arc.GreatCircle('

1

arc.js has been saved but not called on your map. The documentation says

Usage
Require the library in node.js like:

var arc = require('arc');
Use in the browser like:

<script src="./arc.js"></script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.