I want to draw a line with the vertices:
- initial center;
- current center (on each pointer drag).
I have a blue point at the initial center and a red cross at the new center of the map on each drag.
Here is my code:
var getCenter = function() {
return map.getView().getCenter();
};
var center = [-70000, 5500000];
var vector = new ol.layer.Vector({
source: new ol.source.Vector({}),
style: new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: [0, 0, 255, 1]
}),
radius: 4
}),
stroke: new ol.style.Stroke({
color: [0, 0, 0, 1],
width: 2
})
})
});
var p = new ol.Feature(new ol.geom.Point(center));
vector.getSource().addFeature(p);
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
vector
],
view: new ol.View({
center: center,
zoom: 5
})
});
var origin = getCenter();
var target = getCenter();
var coord = [origin, target];
var line = new ol.geom.LineString(coord);
var feature = new ol.Feature(line);
vector.getSource().addFeature(feature);
map.on('pointerdrag', function () {
target = getCenter();
coord = [origin, target];
line.setCoordinates(coord);
});
I have created an example CodePen to illustrate what I want to achieve.
As you can see, when performing a drag, the red cross goes away from the blue point. The black line between those two only gets drawn after finishing the drag.
I want the line to be drawn during the drag.
How could I achieve this?