记录：Openlayers6.5 实现轨迹回放

这篇分享我记录到的一个案例，废话不多说，上代码

import Feature from 'ol/Feature'
import LineString from 'ol/geom/LineString'
import VectorSource from 'ol/source/Vector'
import VectorLayer from 'ol/layer/Vector'
import { Style, Circle as CircleStyle, Icon, Stroke, Fill } from 'ol/style'
import Point from 'ol/geom/Point'
import image from '../../assets/track.png'
import jc from '../../assets/map/gj/jc.png'

 var that = this
      var animating = false
      let positions = this.coord
      if (positions.length <= 0) return
      var styles = {
        'route': new Style({
          stroke: new Stroke({
            width: 6,
            color: [237, 212, 0, 0.8]
          })
        }),
        'icon': new Style({
          image: new Icon({
            anchor: [0.5, 1],
            src: image
          })
        }),
        /*  'geoMarker': new Style({
            image: new CircleStyle({
              radius: 7,
              fill: new Fill({ color: 'black' }),
              stroke: new Stroke({
                color: 'white',
                width: 2
              })
            })
          }),*/
        'geoMarker': new Style({
          image: new Icon({
            anchor: [0.5, 1],
            offset:[0,10],
            src: jc
          })
        })
      }
      var lineMarker = new Feature({
        type: 'route',
        geometry: new LineString(positions),
        population: 4000,
        rainfall: 500
      })
      var geoMarker = new Feature({
        type: 'geoMarker',
        geometry: new Point(positions[0]),
        population: 4000,
        rainfall: 500,
        anchor: [0.5, 0.8]
      })
      var startMarker = new Feature({
        type: 'icon',
        geometry: new Point(positions[0]),
        population: 4000,
        rainfall: 500
      })
      var endMarker = new Feature({
        type: 'icon',
        geometry: new Point(positions[positions.length - 1]),
        population: 4000,
        rainfall: 500
      })
      var source = new VectorSource({
        type: 'LineString',
        features: [lineMarker, geoMarker, startMarker, endMarker]
      })
      var lineLayer = new VectorLayer({
        source: source,
        style: function(feature) {
          return styles[feature.get('type')]
        }
      })
      let properties = {}
      properties.layerType = map_enum.layer.markerLayers
      lineLayer.set('properties', properties)
      this.map.getView().setCenter(positions[0])
      this.map.getView().setZoom(14)
      this.map.addLayer(lineLayer)
      var traversed = 0
      var speed = 10, startTime, currentPoint, currentCount = 0

      function moveFeature(event) {
        if (animating) {
          var frameState = event.frameState
          var elapsedTime = frameState.time - startTime
          var traversed = Math.round(speed * elapsedTime / 1000)
          if (traversed >= positions.length) {
            stopAnimation(true)
            return
          }
          var currentPoint = new Point(positions[traversed])
          geoMarker.setGeometry(currentPoint)
        }
        that.map.render()
      }

      function startAnimation() {
        if (animating) {
          stopAnimation(false)
        } else {
          animating = true
          startTime = new Date().getTime()
          geoMarker.setStyle(null)
          that.map.on('postcompose', moveFeature)
          that.map.render()
        }
      }

      function stopAnimation(ended) {
        traversed = 0//走过的路程
        speed = 2, startTime, currentPoint, currentCount = 0
        animating = false
        var coord = ended ? positions[positions.length - 1] : positions[0]
        geoMarker.getGeometry().setCoordinates(coord)
        that.map.un('postcompose', moveFeature)
      }

      startAnimation()