四十一、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 arcvar 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) {const line = new LineString(geometry.coords);//将 line 对象的坐标系从 WGS84（EPSG:4326）转换为 Web Mercator 投影（EPSG:3857）line.transform("EPSG:4326", "EPSG:3857");features.push(new Feature({geometry: line,finished: false,}));});// 动画延迟：使用i * 50来设置延迟是为了确保每条路径的动画不会同时启动，这样可以产生连续动画的效果。addLater(features, i * 50);}

addLater函数中给每个feature绑定了时间，便于后续的动画效果中使用。 

function addLater(features, timeout) {window.setTimeout(function () {let start = Date.now();features.forEach(function (feature) {feature.set("start", start);flightsSource.addFeature(feature);// 计算每个特征的动画持续时间 duration，根据特征几何图形的坐标长度和 pointsPerMs 来计算const duration =(feature.getGeometry().getCoordinates().length - 1) / pointsPerMs;start += duration;});}, timeout);}

使用postrender事件来做动画效果 

   //tileLayer 图层每次完成渲染之后调用tileLayer.on("postrender", animateFlights);

 animateFlights获取当前帧对象，利用时间差截取数组中的项，来实现线慢慢变长的效果。

const pointsPerMs = 0.05;function animateFlights(event) {const vectorContext = getVectorContext(event);const frameState = event.frameState;vectorContext.setStyle(style);const features = flightsSource.getFeatures();for (let i = 0; i < features.length; i++) {const feature = features[i];if (!feature.get("finished")) {// 只画动画尚未完成的线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));// 在当前和最近相邻的包裹世界中需要动画const worldWidth = getWidth(map.getView().getProjection().getExtent());const offset = Math.floor(map.getView().getCenter()[0] / worldWidth);//直接用矢量上下文绘制线条//在平铺地图上绘制线段时，需要考虑地图的无限水平滚动特性。通过平移和多次绘制线段，确保即使用户滚动地图，线段也能正确显示在地图的两端。这个方法处理了跨越地图边界的线段，避免了图形被截断的问题。currentLine.translate(offset * worldWidth, 0);vectorContext.drawGeometry(currentLine);currentLine.translate(worldWidth, 0);vectorContext.drawGeometry(currentLine);}}}

 代码看着很简单，但为啥要这么写呢，咱们来分析一波。把 flightsData = flightsData.splice(26, 1);截取一下只留一条线，我们来打印下elapsedTime。

可以看到，elapsedTime是当前的时间减去初始时间的时间戳。 

 每一毫秒都会绘制长度不同的线。

 而绘制的线段点需要从coords坐标数组中取，每次都取0到index的坐标。elapsedPoints就是表示了当前需要取的index值，因为elapsedTime是毫秒值，会很快，所以没有直接使用elapsedTime去从数组里取值，而是乘以了一个系数const pointsPerMs = 0.02。

调整pointsPerMs 的值可以控制速度。

当elapsedPoints大于等于了数组长度时给feature添加了finished属性。

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

绘制过程中需要实时设置一下绘制的样式，而绘制结束后，也需要保持线的样式，所以在图层里需要定义一个完成后的样式。

const flightsLayer = new VectorLayer({source: flightsSource,style: function (feature) {// 等动画完毕再现在最终的线样式if (feature.get("finished")) {return style;}return null;},});

 完整代码：

<template><div class="box"><h1>External map</h1><div id="map"></div></div>
</template><script>
import Feature from "ol/Feature.js";
import { LineString, Point, Polygon } from "ol/geom.js";
import Map from "ol/Map.js";
import StadiaMaps from "ol/source/StadiaMaps.js";
import VectorSource from "ol/source/Vector.js";
import View from "ol/View.js";
import { Stroke, Style, Icon, Circle as CircleStyle, Fill } from "ol/style.js";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js";
import { getVectorContext } from "ol/render.js";
import { getWidth } from "ol/extent.js";
var arc = require("arc");
export default {name: "",components: {},data() {return {map: null,extentData: "",};},computed: {},created() {},mounted() {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: 5,}),});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;//flightsData = flightsData.splice(26, 1);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) {const line = new LineString(geometry.coords);//将 line 对象的坐标系从 WGS84（EPSG:4326）转换为 Web Mercator 投影（EPSG:3857）line.transform("EPSG:4326", "EPSG:3857");features.push(new Feature({geometry: line,finished: false,}));});// 动画延迟：使用i * 50来设置延迟是为了确保每条路径的动画不会同时启动，这样可以产生连续动画的效果。console.log("features", features);addLater(features, i * 50);}//tileLayer 图层每次完成渲染之后调用tileLayer.on("postrender", animateFlights);});},});const flightsLayer = new VectorLayer({source: flightsSource,style: function (feature) {// 等动画完毕再现在最终的线样式if (feature.get("finished")) {return style;}return null;},});map.addLayer(flightsLayer);const pointsPerMs = 0.02;function animateFlights(event) {const vectorContext = getVectorContext(event);const frameState = event.frameState;vectorContext.setStyle(style);const features = flightsSource.getFeatures();for (let i = 0; i < features.length; i++) {const feature = features[i];if (!feature.get("finished")) {// 只画动画尚未完成的线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));// 在当前和最近相邻的包裹世界中需要动画const worldWidth = getWidth(map.getView().getProjection().getExtent());const offset = Math.floor(map.getView().getCenter()[0] / worldWidth);//直接用矢量上下文绘制线条//在平铺地图上绘制线段时，需要考虑地图的无限水平滚动特性。通过平移和多次绘制线段，确保即使用户滚动地图，线段也能正确显示在地图的两端。这个方法处理了跨越地图边界的线段，避免了图形被截断的问题。currentLine.translate(offset * worldWidth, 0);vectorContext.drawGeometry(currentLine);currentLine.translate(worldWidth, 0);vectorContext.drawGeometry(currentLine);}}}//告诉OpenLayers继续动画map.render();}function addLater(features, timeout) {window.setTimeout(function () {let start = Date.now();features.forEach(function (feature) {feature.set("start", start);flightsSource.addFeature(feature);// 计算每个特征的动画持续时间 duration，根据特征几何图形的坐标长度和 pointsPerMs 来计算const duration =(feature.getGeometry().getCoordinates().length - 1) / pointsPerMs;start += duration;});}, timeout);}},methods: {},
};
</script><style lang="scss" scoped>
#map {width: 100%;height: 500px;
}
.box {height: 100%;
}</style>