打开图层动画更改起点

Question

谁能建议我如何将示例上的动画更改为从终点(折线的末端(而不是起点开始？我尝试更改下面的代码：

var i = 0, interval;
var animation = function(){
if(i == path.length){
i = 4;
}
marker.setPosition(path[i]);
i++;
};

这是下面的小提琴： https://jsfiddle.net/31rr5r0v/203/

Answer 1

你可以做这样的事情

var i = path.length - 1,
interval;
var animation = function() {
if (i == -1) {
i = path.length - 1;
}
marker.setPosition(path[i]);
i--;
};

将i设置为path.length - 1和递减

var
sourceFeatures = new ol.source.Vector(),
layerFeatures = new ol.layer.Vector({
source: sourceFeatures
});
var lineString = new ol.geom.LineString([]);
var layerRoute = new ol.layer.Vector({
source: new ol.source.Vector({
features: [
new ol.Feature({
geometry: lineString
})
]
}),
style: [
new ol.style.Style({
stroke: new ol.style.Stroke({
width: 3,
color: 'rgba(0, 0, 0, 1)',
lineDash: [.1, 5]
}),
zIndex: 2
})
],
updateWhileAnimating: true
});
var map = new ol.Map({
target: 'map',
view: new ol.View({
center: [-5483805.05, -1884105.39],
zoom: 16,
minZoom: 2,
maxZoom: 20
}),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
opacity: 0.85
}),
layerRoute, layerFeatures
]
});
var markerEl = document.getElementById('geo-marker');
var marker = new ol.Overlay({
positioning: 'center-center',
offset: [0, 0],
element: markerEl,
stopEvent: false
});
map.addOverlay(marker);
var
fill = new ol.style.Fill({
color: 'rgba(255,255,255,1)'
}),
stroke = new ol.style.Stroke({
color: 'rgba(0,0,0,1)'
}),
style1 = [
new ol.style.Style({
image: new ol.style.Icon(({
scale: .7,
opacity: 1,
rotateWithView: false,
anchor: [0.5, 1],
anchorXUnits: 'fraction',
anchorYUnits: 'fraction',
src: '//cdn.rawgit.com/jonataswalker/map-utils/' + 'master/images/marker.png'
})),
zIndex: 5
}),
new ol.style.Style({
image: new ol.style.Circle({
radius: 6,
fill: fill,
stroke: stroke
}),
zIndex: 4
})
];
//a simulated path
var path = [
[-12660, 6711103],
[-9070, 6713576],
[-9755, 6713276],
[-9755, 6713776],
[-9755, 6714976]
];
var
feature_start = new ol.Feature({
geometry: new ol.geom.Point(path[0])
}),
feature_end = new ol.Feature({
geometry: new ol.geom.Point(path[path.length - 1])
});
feature_start.setStyle(style1);
feature_end.setStyle(style1);
sourceFeatures.addFeatures([feature_start, feature_end]);
lineString.setCoordinates(path);
//fire the animation
map.once('postcompose', function(event) {
interval = setInterval(animation, 750);
});
var i = path.length - 1,
interval;
var animation = function() {
if (i == -1) {
i = path.length - 1;
}
marker.setPosition(path[i]);
i--;
};
map.getView().fit(lineString.getExtent());

html,
body,
#map {
width: 100%;
height: 100%;
overflow: hidden;
}
#geo-marker {
width: 10px;
height: 10px;
border: 1px solid #088;
border-radius: 5px;
background-color: #0b968f;
opacity: 0.8;
}

<div id="map"></div>
<div id="geo-marker"></div>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/css/ol.css" type="text/css">