vue 는 openlayers 를 사용 하여 이동 점 애니메이션 을 실현 합 니 다.
6869 단어 vueopenlayers이동 하 다.
프로젝트 를 할 때 홈 페이지 의 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>
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.