vue使用openlayers实现移动点动画
编程学习 2021-07-04 14:06www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了vue使用openlayers实现移动点动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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, 14.82],
[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, 0, 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, 0],
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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。