I'm able draw the linestring on the map based on the data but I want to draw the animated linestring as shown in attached image. Could anyone help me out for this from #openlayers community?
Inside myLayerFeature I have list of feature with its coordinates and looping through each feature to draw line and adding the gif image on that with taking reference of the following link: https://openlayers.org/en/latest/examples/feature-move-animation.html
$(myLayerFeature).each((index, mapitem1) => {
moveArrowOnLine(mapitem1.geometry);
});
function moveArrowOnLine(geometry) {
debugger
var startCoordinates = geometry.coordinates[0];
var endCoordinates = geometry.coordinates[1];
const startMarker = new ol.Feature({
type: 'icon',
geometry: new ol.geom.Point(startCoordinates),
});
const endMarker = new ol.Feature({
type: 'icon',
geometry: new ol.geom.Point(endCoordinates),
});
const position = startMarker.getGeometry().clone();
const geoMarker = new ol.Feature({
type: 'geoMarker',
geometry: position,
});
const styles = {
'route': new ol.style.Style({
stroke: new ol.style.Stroke({
width: 6,
color: [237, 212, 0, 0.8],
}),
}),
'geoMarker': new ol.style.Style({
image: new ol.style.Icon({
scale: -0.04,
anchor: [0, 0.8],
anchorXUnits: 'fraction',
anchorYUnits: 'fraction',
opacity: 1,
projection: '3857',
src: './images/left-arrow.png',
}),
image: new ol.style.Circle({
radius: 20,
fill: new ol.style.Fill({ color: 'red' }),
stroke: new ol.style.Stroke({
color: 'black',
width: 2,
}),
}),
}),
};
const vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [geoMarker, startMarker, endMarker],
}),
style: function (feature) {
return styles[feature.get('type')];
},
});
map.addLayer(vectorLayer);
startAnimation();
}