本文例項為大家分享了vue使用openlayers實現移動點動畫的具體程式碼，供大家參考，具體內容如下

做專案時，本來打算仿照官網的Example中動畫製作，引入vue中後，發現它引用的庫函式一直報錯，最後我去vue中安裝的依賴庫中去查詢這個函式，果然沒有。也就是說官方例子使用的庫和我安裝的OL庫存在一定差異。

後來我還是用笨方法去解決了，最終效果如下：

總體思路是將移動目標例項一個Overlay物件，然後將如圖5個經緯度點沒兩點之間分割成多個（200個），之後通過定時器不斷setPositon。

程式碼如下：

<template>
 <div>
 <div id="map"/>
 <div id="geo-marker">
  <img :src="myplanImg" >
 </div>
 </div>
</template>
<script>
// import * as myol from '@/views/openstreetmap/openlayerstools.js'
// import img from '@/assets/images'
import 'ol/ol.css'
import { Map,View,Feature } from 'ol'
import * as layer from 'ol/layer.js'
import * as source from 'ol/source.js'
import * as geom from 'ol/geom.js'
import * as style from 'ol/style.js'
import Overlay from 'ol/Overlay.js'
import TileLayer from 'ol/layer/Tile'
import { deepclone } from '@/utils/index.js'
import myplanImg from '@/../static/images/船載應急通訊系統.png'
// import * as myol from '@/views/openstreetmap/animation.js'
export default {
 data() {
 return {
  // a simulated path
  path: [
  [115.6200,14.82],[112.79,[114.6636,18.2977],[111.6870,18.8970],[110.3014,15.0630]
  ],// 模擬路徑
  pathIndex: 0,// 路徑點索引
  marker: null,//移動點
  splitNumber: 200,// 每兩個經緯度之間的分割點
  setIntervalTime: 30,// 移動點間隔時間
  myplanImg: myplanImg,// 移動點的圖片
  helpTooltipElement: null,// 平臺資訊div
  helpTooltip: null // 平臺資訊overlay
 }
 },created() {
 this.analysisPath(this.splitNumber)
 },mounted() {
 this.initSeamap()
 },methods: {
 initSeamap: function() {
  this.pathIndex = this.path.length - 1
  var sourceFeatures = new source.Vector()
  var layerFeatures = new layer.Vector({// 兩端點Feature
  source: sourceFeatures
  })
  var lineString = new geom.LineString([])
  var layerRoute = new layer.Vector({// 兩點之間的連線
  source: new source.Vector({
   features: [
   new Feature({
    geometry: lineString
   })
   ]
  }),style: [
   new style.Style({
   stroke: new style.Stroke({
    width: 3,color: 'rgba(0,1)',lineDash: [0.1,5]
   }),zIndex: 2
   })
  ],updateWhileAnimating: true
  })

  this.global.map = new Map({
  target: 'map',view: new View({
   projection: 'EPSG:4326',center: [109.8,18.4],zoom: 7,minZoom: 3,// 限制最大顯示
   maxZoom: 14
  }),layers: [
   new TileLayer({
   source: new source.OSM()
   }),layerRoute,layerFeatures
  ]
  })
  var markerEl = document.getElementById('geo-marker')
  markerEl.className = 'css_animation'
  this.marker = new Overlay({
  positioning: 'center-center',offset: [0,0],element: markerEl,stopEvent: false
  })
  this.global.map.addOverlay(this.marker)
  var style1 = [// 開始結束點樣式
  new style.Style({
   image: new style.Icon(({
   src: 'static/images/marker.png'
   }))
  })
  ]
  var feature_start = new Feature({
  geometry: new geom.Point(this.path[0])
  })
  var feature_end = new Feature({
  geometry: new geom.Point(this.path[this.path.length - 1])
  })
  feature_start.setStyle(style1)
  feature_end.setStyle(style1)
  sourceFeatures.addFeatures([feature_start,feature_end])
  lineString.setCoordinates(this.path)
  this.helpTooltipElement = document.createElement('div')
  this.helpTooltipElement.className = 'measuretip'
  this.helpTooltipElement.id = 'speed'
  this.helpTooltip = new Overlay({
  element: this.helpTooltipElement,offset: [15,positioning: 'center-left'
  })
  this.global.map.addOverlay(this.helpTooltip)
  this.global.map.once('postcompose',(event) => {
  setInterval(() => {
   this.animation()
  },this.setIntervalTime)
  })
 // this.global.map.getView().fit(lineString.getExtent())
 },animation: function() {
  if (this.pathIndex === -1) {
  this.pathIndex = this.path.length - 1
  }
  this.marker.setPosition(this.path[this.pathIndex])
  this.helpTooltipElement.innerHTML = '<B>名稱：</B>船載應急通訊系統' + '\<br\>' +
       '<B>子系統：</B>平臺A,平臺B' + '\<br\>' +
       '<B>經緯度：</B>' + (this.path[this.pathIndex][0] + '').substring(0,6) + ',' +
       (this.path[this.pathIndex][1] + '').substring(0,5)
  this.helpTooltip.setPosition(this.path[this.pathIndex])
  this.pathIndex--
 },analysisPath: function(splitNumber) {
  var tempPath = deepclone(this.path)
  var pathResults = []
  var tempPoint = [0,0]
  if (tempPath.length > 1) {
  for (let i = 0; i < tempPath.length - 1; i++) { // 每兩個點之間分割出splitNumber個點
   pathResults.push(tempPath[i])
   for (let j = 0; j < splitNumber; j++) {
   tempPoint[0] = (tempPath[i + 1][0] - tempPath[i ][0]) * (j + 1) / splitNumber + tempPath[i][0]
   tempPoint[1] = (tempPath[i + 1][1] - tempPath[i ][1]) * (j + 1) / splitNumber + tempPath[i][1]
   pathResults.push(deepclone(tempPoint))
   }
  }
  pathResults.push(tempPath[tempPath.length - 1])
  this.path = deepclone(pathResults)
  console.log(this.path)
  }
 }
 }

}
</script>

<style>
#map {
 width: 100%;
 height: 100%;
 overflow: hidden;
}
   .measuretip {
   position: relative;
   background-color: #0D9BF2;
   opacity: 0.7;
   border-radius: 3px;
   padding: 10px;
   font-size: 12px;
   cursor: default;
  }
</style>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。