openlayer的飞行动画

飞行动画官方例子：https://openlayers.org/en/latest/examples/flight-animation.html

<template>
  <div class="con-box">
    <div id="map" class="map" />
  </div>
</template>

<script>
import "ol/ol.css";
import olMap from "ol/Map";
import olView from "ol/View";
import ollayerTile from "ol/layer/Tile";
// import olsourceOSM from "ol/source/OSM";
import { get as getProjection, Projection, fromLonLat } from "ol/proj";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import { Point, LineString, MultiLineString, Polygon } from "ol/geom";
import XYZ from "ol/source/XYZ";
import { Map, View, Feature, ol } from "ol";
import {
  Circle,
  Fill,
  Stroke,
  Style,
  Text,
  Icon,
  Circle as CircleStyle,
} from "ol/style.js";
import Overlay from "ol/Overlay.js";
import { Image } from "ol/layer.js";
import { OSM, Vector, ImageStatic } from "ol/source";
import { defaults as defaultControls } from "ol/control";
import GeoJSON from "ol/format/GeoJSON.js";
import { Tile as TileLayer } from "ol/layer.js";
import Draw, { createBox, createRegularPolygon } from "ol/interaction/Draw";
import { unByKey } from "ol/Observable";
import { getVectorContext } from "ol/render";
import { easeIn, easeOut } from "ol/easing";
import Stamen from "ol/source/Stamen.js";
import {getWidth} from 'ol/extent.js';
const pointsPerMs = 0.02;
export default {
  data() {
    return {
      value: "",
      dataURL1: "https://scpic.chinaz.net/files/pic/pic9/202012/bpic22030.jpg",
      map: null,
      view: null,
      positionLayer: null,
      featuresArr: [],

      opt: {
        img: "",
        imgsize: "",
      },
      geo: null,
      vlayer: null,
      draw: null,
      source: null,
      multiSource: null,
      feature: null,
      duration: 3000,
      tileLayer: null,
      testArr: [],
      simplyArr: [
        [0, 0],
        [-600, 600],
        [600, 0],
        [0, -600],
      ],
      multiArr: [
        [
          [0, 0],
          [600, 600],
          [-600, 0],
          [0, -600],
        ],
        [
          [300, 0],
          [800, 200],
          [0, 0],
          [0, -100],
        ],
      ],
      trackPoint: null,
      simpLine: null,
      multiLine: null,
      traceCroods: null,
      sliderPos: 0,
      styleOl: new Style({
        stroke: new Stroke({
          color: "#EAE911",
          width: 2,
        }),
      }),
      flightsSource: null,
      flightsLayer: null,
    };
  },
  mounted() {
    this.initmap();
  },

  methods: {
    initmap() {
      this.tileLayer = new TileLayer({
        source: new Stamen({
          layer: "toner",
        }),
      });
      this.map = new Map({
        layers: [this.tileLayer],
        target: "map",
        view: new View({
          center: [-11000000, 4600000],
          zoom: 2,
        }),
      });
      this.initFlightMap()
    },
    initFlightMap() {
      let self = this;
      this.flightsSource = new VectorSource({
        attributions:
          "Flight data by " +
          '<a href="https://openflights.org/data.html">OpenFlights</a>,',
        loader: function () {
          const url = "data/geojson/flight.json";
          fetch(url)
            .then((response) => {
              return response.json();
            })
            .then((json) => {
              const flightsData = json.flights;
              for (let i = 0; i < flightsData.length; i++) {
                const flight = flightsData[i];
                const from = flight[0];
                const to = flight[1];

                // create an arc circle between the two locations
                const arcGenerator = new arc.GreatCircle(
                  { x: from[1], y: from[0] },
                  { x: to[1], y: to[0] }
                );

                const arcLine = arcGenerator.Arc(100, { offset: 10 });
                // paths which cross the -180°/+180° meridian are split
                // into two sections which will be animated sequentially
                const features = [];
                arcLine.geometries.forEach(function (geometry) {
                  
                  const line = new LineString(geometry.coords);
                  line.transform("EPSG:4326", "EPSG:3857");
                  features.push(
                    new Feature({
                      geometry: line,
                      finished: false,
                    })
                  );
                });
                self.addLater(features, i * 50);
              }
              self.tileLayer.on("postrender", self.animateFlights);
            });
        },
      });
this.flightsLayer = new VectorLayer({
  source: this.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 self.styleOl;
    }
    return null;
  },
});
this.map.addLayer(this.flightsLayer)

    },
    addLater(features, timeout) {
      
      let self=this;
      window.setTimeout(function () {
        let start = Date.now();
        features.forEach(function (feature) {
          feature.set("start", start);
          self.flightsSource.addFeature(feature);
          const duration =
            (feature.getGeometry().getCoordinates().length - 1) / pointsPerMs;
       
          start += duration;
             
        });
      }, timeout);
    },

    animateFlights(event) {
      console.log('渲染事件',event)
      const vectorContext = getVectorContext(event);
      const frameState = event.frameState;
      vectorContext.setStyle(this.styleOl);

      const features = this.flightsSource.getFeatures();
      for (let i = 0; i < features.length; i++) {
        const feature = features[i];
        if (!feature.get("finished")) {
          // only draw the lines for which the animation has not finished yet
          const coords = feature.getGeometry().getCoordinates();
          const elapsedTime = frameState.time - feature.get("start");
          if (elapsedTime >= 0) {
            const elapsedPoints = elapsedTime * pointsPerMs;

            if (elapsedPoints >= coords.length) {
              feature.set("finished", true);
            }

            const maxIndex = Math.min(elapsedPoints, coords.length);
            const currentLine = new LineString(coords.slice(0, maxIndex));

            // animation is needed in the current and nearest adjacent wrapped world
            const worldWidth = getWidth(
              this.map.getView().getProjection().getExtent()
            );
            const offset = Math.floor(
              this.map.getView().getCenter()[0] / worldWidth
            );

            // directly draw the lines with the vector context
            currentLine.translate(offset * worldWidth, 0);
            vectorContext.drawGeometry(currentLine);
            currentLine.translate(worldWidth, 0);
            vectorContext.drawGeometry(currentLine);
          }
        }
      }
      // tell OpenLayers to continue the animation
      this.map.render();
    },


  },
};
</script>

<style scoped>
#map {
  width: 97%;
  margin: 0 auto;
  /* background: rgb(238, 238, 238); */
}

.con-box {
  width: 100%;
  height: 100%;
  border: 1px solid #999999;
}

.map {
  height: 700px;
  border: 1px solid;
}

.icon_but {
  margin: 0 10px;
  padding: 10px;
  border: 1px solid red;
}

.toolbar {
  margin: 10px;
}

.toolbar span {
  display: inline-block;
}

.ol-popup {
  border: 1px solid red;
  font-size: 20px;
  font-weight: bolder;
}

.con-box {
  width: 100%;
  height: calc(100% - 84px);
  border: 1px solid #999999;
}
</style>