import { Scene, LineLayer } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';

const scene = new Scene({
  id: 'map',
  map: new Mapbox({
    pitch: 0,
    style: 'dark',
    center: [ 0, 23.107329 ],
    zoom: 0
  })
});

fetch(
  'https://gw.alipayobjects.com/os/basement_prod/b83699f9-a96d-49b8-b2ea-f99299faebaf.json'
)
  .then(res => res.json())
  .then(data => {
    function getAirportCoord(idx) {
      return [ data.airports[idx][3], data.airports[idx][4] ];
    }
    const routes = data.routes.map(function(airline) {
      return {
        coord: [ getAirportCoord(airline[1]), getAirportCoord(airline[2]) ]
      };
    });
    const layer = new LineLayer({})
      .source(routes, {
        parser: {
          type: 'json',
          coordinates: 'coord'
        }
      })
      .size(0.6)
      .shape('arc')
      .color('rgb(5, 5, 50)')
      .style({
        opacity: 0.05
      });
    scene.addLayer(layer);
  });