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

2024-06-08 04:16:03
开发
9

官网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) {
                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>

原文地址:https://blog.csdn.net/aaa_div/article/details/139502737 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1799173497512136704.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部

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

相关推荐

最近更新

热门阅读