JSFiddle - React, Tailwind, and code Playground
HTML
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<style>
.map {
height: 500px;
width: 100%;
}
</style>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
</body>
</html>
JavaScript
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([21.048246,52.225421]),
zoom: 12
})
});
var marker = new ol.Feature({
geometry: new ol.geom.Point(
ol.proj.fromLonLat([21.048246,52.225421])
),
});
marker.setStyle(new ol.style.Style({
image: new ol.style.Icon(({
crossOrigin: 'anonymous',
color: '#ffcd46',
scale: 0.05,
//size: [250,250],
//imgSize: [250,250],
rotation: 1.5, //Radians!!
src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/76/White_Arrow_Up.svg/560px-White_Arrow_Up.svg.png'
}))
}));
var vectorSource = new ol.source.Vector({
features: [marker]
});
var markerVectorLayer = new ol.layer.Vector({
source: vectorSource,
});
map.addLayer(markerVectorLayer);
var path = [];
var start = [21.016679,52.192536];
var stop = [21.032032,52.211148];
for(var j =0; j <= 100; j++)
{
var dt = j/100;
//=(A5^3-2*A5^2+A5)*1+(-2*A5^3+3*A5^2)+(A5^3-A5^2)*1
dt = (Math.pow(dt,3)-2*Math.pow(dt,2)+dt)+(-2*Math.pow(dt,3)+3*Math.pow(dt,2))+(Math.pow(dt,3)-Math.pow(dt,2));
console.log(dt);
path.push([
//p.x = p0.x + ( dt * (p1.x - p0.x) )
start[0]+(dt * (stop[0]-start[0])),
//p.y = p0.y + ( dt * (p1.y - p0.y) )
start[1]+(dt*(stop[1]-start[1]))
]);
}
map.once('postcompose', function(event) {
console.info('postcompose');
interval = setInterval(animation, 1);
});
var i = 0, interval;
var animation = function(){
if(i == path.length){
//i = 0;
clearInterval(interval);
}
//marker.setPosition(path[i]);
marker.setGeometry(new ol.geom.Point(
ol.proj.fromLonLat(path[i])));
i++;
};