text,view,rotation,openlayers,openlayers-3 , How to rotate text with view using OpenLayers 3


How to rotate text with view using OpenLayers 3

Question:

Tag: text,view,rotation,openlayers,openlayers-3

I am developing a navigation application, which draws planned route on a map. Planned route consists of points connected with a line. Each point is labelled with distance and direction. When I initially draw the route on the map, I calculate text position in a way, where it doesn't interfere with the line - I use offsetX, offsetY and rotation style attributes. Unfortunately, when the map view is rotated, not of the mentioned attributes is changed - text is not rotated. Is there a way, how to rotate the text with the view, so it will remain on it's position relative to the point? I have already tried rotateWithView: true with both image and text parts.

My style is defined like:

return [new ol.style.Style({
        image: new ol.style.Circle({
            radius: 20,
            fill: new ol.style.Fill({color: 'black'}),
            stroke: new ol.style.Stroke({color: 'black', width: 1})
        }),
        text: new ol.style.Text({
            textAlign: "center",
            textBaseline: "middle",
            font: 'normal 1.5rem Arial',
            text: "This is my text",
            fill: new ol.style.Fill({color: 'black'}),
            stroke: new ol.style.Stroke({color: 'black', width: 1}),
            offsetX: 10,
            offsetY: 15,
            rotation: 0.3
        })
    })];

Answer:

Update feature rotation on map view property change event.

map.getView().on('propertychange', function(event) {
    textStyle.setRotation(this.getRotation());
    mySource.changed();
});

var textStyle = new ol.style.Text({
    // ...
});

var layer = new ol.layer.Vector({
    source: mySource,
    style: new ol.style.Style({
        text: textStyle,
        // ...
    })
});

Related:


HTML make your own