Vue+Openlayers实现自定义轨迹动画

<template>
 <div class="map-warp">
 <h4>
  <a
  href="https://openlayers.org/en/latest/examples/feature-move-animation.html&#63;q=polyline"
  target="_bank"
  >OpenlayersTrack</a>

  <!--js 轨迹回放 https://blog.csdn.net/Himire/article/details/80296738 -->
 </h4>
 <div class="progress-bar">
  <div class="bar-box">
  <div class="bar" :>
   <span>{{progress}}%</span>
  </div>
  </div>
 </div>
 <div id="map" class="map"></div>
 <el-row :gutter="20">
  <el-col :span="5">
  <label for="speed">
   运动速度:&nbsp;
   <input id="speed" type="range" step="10" value="5" />
  </label>
  </el-col>
  <el-col :span="5">
  <button @click="handlerPlay">{{textContent}}</button>
  </el-col>
 </el-row>
 </div>
</template>

<script>
import "ol/ol.css";
import Feature from "ol/Feature";
import Map from "ol/Map";
import View from "ol/View";
import Polyline from "ol/format/Polyline";
import { Projection } from "ol/proj";
import { Point, LineString } from "ol/geom";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import XYZ from "ol/source/XYZ";
import VectorSource from "ol/source/Vector";
import {
 Circle as CircleStyle,
 Fill,
 Icon,
 Stroke,
 Style,
 Text
} from "ol/style";
import { getVectorContext } from "ol/render";

export default {
 data() {
 return {
  map: null,
  progress: 0, // 进度
  animating: false, // 动画是否开始
  speed: null, // 速度
  now: null, // 当前时间
  textContent: "开始",
  routeCoords: null, // 数组点集合
  routeLength: null, // 数组长度
  route: null, // 线
  routeFeature: null, // 画线
  geoMarker: null, // 标记
  startMarker: null, // 开始标记
  endMarker: null, // 结束标记
  styles: {
  route: new Style({
   // 线的样式
   stroke: new Stroke({
   width: 6,
   color: [237, 212, 0, 0.8]
   })
  }),
  icon: new Style({
   // 默认icon样式
   image: new CircleStyle({
   radius: 7,
   fill: new Fill({ color: "red" }),
   stroke: new Stroke({
    color: "white",
    width: 2
   })
   })
  }),
  geoMarker: new Style({
   // 设置标记样式
   image: new Icon({
   anchor: [0.5, 1], // 偏移位置
   // rotation: 0, // 旋转
   // size: [52, 26], // 图标大小
   src: require("@/assets/tx-icon-1.png")
   })
  }),
  start: new Style({
   // 设置开始标记样式
   image: new Icon({
   anchor: [0.5, 1],
   src: require("@/assets/rise.png")
   })
  }),
  end: new Style({
   // 设置结束标记样式
   image: new Icon({
   anchor: [0.5, 1],
   src: require("@/assets/end.png")
   })
  })
  },
  vectorLayer: null, // 矢量图层
  center: [118.835014569433, 32.08414190192472] // 中心点
 };
 },
 methods: {
 // 初始化地图
 initMap() {
  let that = this;
  that.routeCoords = [
   [118.83476768752418, 32.08385299388422],
   [118.83491813875425, 32.08394894013734],
   [118.83504349233812, 32.08408332210981],
   [118.83504349233812, 32.08408332210981],
   [118.83512889261571, 32.083918456790876],
   [118.83517286002402, 32.083733744293006],
   [118.83496824937895, 32.084077663081935],
   [118.83490797978696, 32.08412326115879],
   [118.83489815812887, 32.08414025948315],
   [118.83488806541473, 32.084153465524956],
   [118.83488315718186, 32.08415572622981],
   [118.8348782482698, 32.0841596143537],
   [118.83485807031045, 32.08416812475921],
   [118.83484798473395, 32.08416424284437],
   [118.83483789451235, 32.08417148163059],
   [118.83483789122208, 32.08417934749756],
   [118.83489794089253, 32.084006273376524],
   [118.83490803262733, 32.08399523720106],
   [118.83491321591835, 32.08398700421235],
   [118.83491812613363, 32.083979861216235],
   [118.83491812890527, 32.08397308027895],
   [118.83492822118053, 32.0839606878946],
   [118.83493831179283, 32.08395236406387],
   [118.8349443113023, 32.08394818448314],
   [118.83494840317711, 32.0839421415609],
   [118.8349582198328, 32.08393707761024],
   [118.83495822192893, 32.08393192409512],
   [118.83495822314188, 32.083928940480945],
   [118.83495822600715, 32.08392188830153],
   [118.83496831727095, 32.08391193701643],
   [118.83496832133952, 32.083901901220244],
   [118.83497432325855, 32.083891754391544],
   [118.83497841676457, 32.083881642888024],
   [118.83498850812316, 32.083871420344074],
   [118.8349985986039, 32.08386336769408],
   [118.83499860472438, 32.08384817837085],
   [118.83500869639813, 32.08383714209293],
   [118.83500870130179, 32.083824936382825],
   [118.83501279510463, 32.08381401114558],
   [118.83501852555108, 32.08380088571361],
   [118.83502861687877, 32.08379066312818]
  ];
  that.routeLength = that.routeCoords.length;
  that.route = new LineString(that.routeCoords);

  that.routeFeature = new Feature({
  type: "route",
  geometry: that.route
  });
  that.geoMarker = new Feature({
  type: "geoMarker",
  geometry: new Point(that.routeCoords[0])
  });
  that.startMarker = new Feature({
  type: "start",
  geometry: new Point(that.routeCoords[0])
  });
  that.endMarker = new Feature({
  type: "end",
  geometry: new Point(that.routeCoords[that.routeLength - 1])
  });
  // that.endMarker.setStyle(

  // new Style({
  //  // image: new CircleStyle({
  //  // radius: 7,
  //  // fill: new Fill({ color: "red" }),
  //  // stroke: new Stroke({
  //  //  color: "white",
  //  //  width: 2
  //  // })
  //  // }),
  //  // image: new Icon({
  //  // src: require("@/assets/tx-icon-1.png")
  //  // }),
  //  // text: new Text({
  //  // text: '11133333333333333333333333333333333311',
  //  // scale: 1.3,
  //  // fill: new Fill({
  //  //  color: '#000000'
  //  //  }),
  //  // Stroke:new Stroke({
  //  //  color: '#FFFF99',
  //  //  width: 3.5
  //  // })
  //  // })
  // })
  // );

  that.vectorLayer = new VectorLayer({
  source: new VectorSource({
   features: [
   that.routeFeature,
   that.geoMarker,
   that.startMarker,
   that.endMarker
   ]
   // 线、标记、开始标记、结束标记
  }),
  style: function(feature) {
   // 如果动画处于活动状态，则隐藏标记
   if (that.animating && feature.get("type") === "geoMarker") {
   return null;
   }
   return that.styles[feature.get("type")];
  }
  });
  this.map = new Map({
  target: "map",
  layers: [
   new TileLayer({
   source: new XYZ({
    url:
    "http://www.google.cn/maps/vt&#63;lyrs=m@189&gl=cn&x={x}&y={y}&z={z}"
   }),
   projection: "EPSG:3857"
   }),
   that.vectorLayer
  ],
  view: new View({
   projection: new Projection({ code: "EPSG:4326", units: "degrees" }),
   center: this.center,
   zoom: 19,
   minZoom: 2,
   maxZoom: 19
  })
  });
  this.mapClick();
 },

 // 地图绑定事件
 mapClick() {
  let that = this;
  this.map.on("click", function(event) {
  let feature = that.map.getFeaturesAtPixel(event.pixel);
  let pixel = that.map.getEventPixel(event.originalEvent);
  let coodinate = event.coordinate;
  // let temp = feature[0].geometryChangeKey_.target
  // Point
  if (feature.length > 0) {
   console.warn(feature[0].values_.type, 111);
   // console.warn(feature[0].get('geometryChangeKey'),9999999999)
  }
  });
 },

 // 运动轨迹开关
 handlerPlay() {
  if (this.textContent === "暂停") {
  this.stop(false);
  } else {
  this.start();
  }
 },

 // 轨迹移动
 moveFeature(event) {
  let vectorContext = getVectorContext(event);
  let frameState = event.frameState;
  if (this.animating) {
  let elapsedTime = frameState.time - this.now;
  let index = Math.round((this.speed * elapsedTime) / 1000);
  // 进度条
  this.progress = Math.floor(
   ((100 / this.routeLength) * (this.speed * elapsedTime)) / 1000
  );
  if (index >= this.routeLength) {
   this.progress = "100";
   this.stop(true);
   return;
  }

  let currentPoint = new Point(this.routeCoords[index]);
  let feature = new Feature(currentPoint);
  vectorContext.drawFeature(feature, this.styles.geoMarker);
  }
  // tell OpenLayers to continue the postrender animation
  this.map.render(); // 开始移动动画
 },

 // 开始动画
 start() {
  if (this.animating) {
  this.stop(false);
  } else {
  this.animating = true;
  this.textContent = "暂停";
  this.now = new Date().getTime();
  let speedInput = document.getElementById("speed");
  this.speed = speedInput.value;
  this.geoMarker.setStyle(null); // hide geoMarker 隐藏标记
  // just in case you pan somewhere else
  this.map.getView().setCenter(this.center); // 设置下中心点
  this.vectorLayer.on("postrender", this.moveFeature);
  this.map.render();
  }
 },

 // 停止
 stop(ended) {
  this.progress = 0;
  this.animating = false;
  this.textContent = "开始";
  let coord = ended
  &#63; this.routeCoords[this.routeLength - 1]
  : this.routeCoords[0];
  let geometry = this.geoMarker.getGeometry().setCoordinates(coord);
  //remove listener
  this.vectorLayer.un("postrender", this.moveFeature); // 删除侦听器
 }
 },
 mounted() {
 this.initMap();
 }
};
</script>

<style lang="scss">
#map {
 height: 500px;
 margin-top: 20px;
}
/*隐藏ol的一些自带元素*/
.ol-attribution,
.ol-zoom {
 display: none;
}
.progress-bar {
 width: 100%;
 height: 30px;
 margin: 30px 0;
 background: url("~@/assets/bg-5.png") center bottom no-repeat;
 background-size: 100% 30px;
 position: relative;
 box-sizing: border-box;
 .bar-box {
  position: absolute;
  top: 10px;
  left: 30px;
  right: 30px;
  height: 10px;
  border-radius: 5px;
  background: #034c77;
 }
 .bar {
  height: 10px;
  border-radius: 5px;
  background: url("~@/assets/bg-6.png") 0 bottom repeat #ecc520;
  position: relative;
  span {
  width: 50px;
  height: 50px;
  line-height: 18px;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  position: absolute;
  color: #fe0000;
  top: -30px;
  right: -25px;
  background: url("~@/assets/bg-7.png") center 0 no-repeat;
  background-size: 100% 30px;
  }
 }
 }
</style>