您好,登錄后才能下訂單哦!
vue利用openlayers實(shí)現(xiàn)移動(dòng)點(diǎn)動(dòng)畫效果?針對(duì)這個(gè)問題,這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答,希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(jiǎn)單易行的方法。
總體思路是將移動(dòng)目標(biāo)實(shí)例一個(gè)Overlay對(duì)象,然后將如圖5個(gè)經(jīng)緯度點(diǎn)沒兩點(diǎn)之間分割成多個(gè)(200個(gè)),之后通過定時(shí)器不斷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/船載應(yīng)急通信系統(tǒng).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, // 路徑點(diǎn)索引 marker: null,//移動(dòng)點(diǎn) splitNumber: 200, // 每?jī)蓚€(gè)經(jīng)緯度之間的分割點(diǎn) setIntervalTime: 30, // 移動(dòng)點(diǎn)間隔時(shí)間 myplanImg: myplanImg, // 移動(dòng)點(diǎn)的圖片 helpTooltipElement: null, // 平臺(tái)信息div helpTooltip: null // 平臺(tái)信息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({// 兩端點(diǎn)Feature source: sourceFeatures }) var lineString = new geom.LineString([]) var layerRoute = new layer.Vector({// 兩點(diǎn)之間的連線 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 = [// 開始結(jié)束點(diǎn)樣式 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>船載應(yīng)急通信系統(tǒng)' + '\<br\>' + '<B>子系統(tǒng):</B>平臺(tái)A,平臺(tái)B' + '\<br\>' + '<B>經(jīng)緯度:</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++) { // 每?jī)蓚€(gè)點(diǎn)之間分割出splitNumber個(gè)點(diǎn) 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>
關(guān)于vue利用openlayers實(shí)現(xiàn)移動(dòng)點(diǎn)動(dòng)畫效果問題的解答就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。