vue利用openlayers实现移动点动画效果
vue利用openlayers实现移动点动画效果?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
总体思路是将移动目标实例一个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>
关于vue利用openlayers实现移动点动画效果问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注行业资讯频道了解更多相关知识。