Drawing/updating feature “during” drag on OpenLayers 3?

Question

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?

Answer 1

The problem is in your vector layer. You have to use updateWhileInteracting:

var vector = new ol.layer.Vector({
    updateWhileInteracting: true,
    ...
});

As written in the API this might cause performance impact for large amounts of vector data.