四十一、openlayers官网示例Flight Animation解析——在地图上绘制飞机航线、牵引线效果、动态动画

官网demo地址：

Flight Animation 

这篇介绍了如何实现飞机航线动画。 

 首先加载一张底图，定义一个样式。

 const tileLayer = new TileLayer({
      source: new StadiaMaps({
        layer: "outdoors",
      }),
    });

    const map = new Map({
      layers: [tileLayer],
      target: "map",
      view: new View({
        center: [-11000000, 4600000],
        zoom: 2,
      }),
    });

    const style = new Style({
      stroke: new Stroke({
        color: "#EAE911",
        width: 2,
      }),
    });

使用fetch请求一组航线数据，并将数据源加到图层上

const flightsSource = new VectorSource({
      attributions:
        "Flight data by " +
        '<a href="https://openflights.org/data.html">OpenFlights</a>,',
      loader: function () {
        const url =
          "https://openlayers.org/en/latest/examples/data/openflights/flights.json";
        fetch(url)
          .then(function (response) {
            return response.json();
          })
          .then(function (json) {
            let flightsData = json.flights;
          
          });
      },
    });

const flightsLayer = new VectorLayer({
      source: flightsSource,
    });
    map.addLayer(flightsLayer);

每个数组里装的是航线的起点和终点。

接下来需要使用arc库，在起点和终点连接成圆弧线。

npm i arc

var arc = require("arc");

for (let i = 0; i < flightsData.length; i++) {
              const flight = flightsData[i];
              const from = flight[0];
              const to = flight[1];

              // 在两个位置之间创建一个圆弧
              const arcGenerator = new arc.GreatCircle(
                { x: from[1], y: from[0] },
                { x: to[1], y: to[0] }
              );
              //生成100个点 offset是偏移量
              const arcLine = arcGenerator.Arc(100, { offset: 10 });

              //穿过-180°/+180°子午线的路径是分开的
              //分成两个部分，按顺序设置动画
              const features = [];

              arcLine.geometries.forEach(function (geometry