import Feature from 'ol/Feature'
import LineString from 'ol/geom/LineString'
import VectorSource from 'ol/source/Vector'
import VectorLayer from 'ol/layer/Vector'
import { Style, Circle as CircleStyle, Icon, Stroke, Fill } from 'ol/style'
import Point from 'ol/geom/Point'
import image from '../../assets/track.png'
import jc from '../../assets/map/gj/jc.png'
var that = this
var animating = false
let positions = this.coord
if (positions.length <= 0) return
var styles = {
'route': new Style({
stroke: new Stroke({
width: 6,
color: [237, 212, 0, 0.8]
})
}),
'icon': new Style({
image: new Icon({
anchor: [0.5, 1],
src: image
})
}),
/* 'geoMarker': new Style({
image: new CircleStyle({
radius: 7,
fill: new Fill({ color: 'black' }),
stroke: new Stroke({
color: 'white',
width: 2
})
})
}),*/
'geoMarker': new Style({
image: new Icon({
anchor: [0.5, 1],
offset:[0,10],
src: jc
})
})
}
var lineMarker = new Feature({
type: 'route',
geometry: new LineString(positions),
population: 4000,
rainfall: 500
})
var geoMarker = new Feature({
type: 'geoMarker',
geometry: new Point(positions[0]),
population: 4000,
rainfall: 500,
anchor: [0.5, 0.8]
})
var startMarker = new Feature({
type: 'icon',
geometry: new Point(positions[0]),
population: 4000,
rainfall: 500
})
var endMarker = new Feature({
type: 'icon',
geometry: new Point(positions[positions.length - 1]),
population: 4000,
rainfall: 500
})
var source = new VectorSource({
type: 'LineString',
features: [lineMarker, geoMarker, startMarker, endMarker]
})
var lineLayer = new VectorLayer({
source: source,
style: function(feature) {
return styles[feature.get('type')]
}
})
let properties = {}
properties.layerType = map_enum.layer.markerLayers
lineLayer.set('properties', properties)
this.map.getView().setCenter(positions[0])
this.map.getView().setZoom(14)
this.map.addLayer(lineLayer)
var traversed = 0
var speed = 10, startTime, currentPoint, currentCount = 0
function moveFeature(event) {
if (animating) {
var frameState = event.frameState
var elapsedTime = frameState.time - startTime
var traversed = Math.round(speed * elapsedTime / 1000)
if (traversed >= positions.length) {
stopAnimation(true)
return
}
var currentPoint = new Point(positions[traversed])
geoMarker.setGeometry(currentPoint)
}
that.map.render()
}
function startAnimation() {
if (animating) {
stopAnimation(false)
} else {
animating = true
startTime = new Date().getTime()
geoMarker.setStyle(null)
that.map.on('postcompose', moveFeature)
that.map.render()
}
}
function stopAnimation(ended) {
traversed = 0//走过的路程
speed = 2, startTime, currentPoint, currentCount = 0
animating = false
var coord = ended ? positions[positions.length - 1] : positions[0]
geoMarker.getGeometry().setCoordinates(coord)
that.map.un('postcompose', moveFeature)
}
startAnimation()
Openlayers6.5 实现轨迹回放
最新推荐文章于 2024-08-08 16:17:32 发布