如何使用 OpenLayers 3 旋转带有视图的文本

Question

我正在开发一个导航应用程序，它在地图上绘制规划路线。计划路线由用线连接的点组成。每个点都标有距离和方向。当我最初在地图上绘制路线时，我以一种不干扰路线的方式计算文本位置 - 我使用 offsetX、offsetY 和旋转样式属性。不幸的是，当地图视图被旋转时，没有提到的属性被改变——文本没有被旋转。有没有办法，如何使用视图旋转文本，使其保持在相对于该点的位置？我已经尝试过 rotateWithView: true 图像和文本部分。

我的风格定义如下：

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 1

更新地图视图上的要素旋转属性更改事件。

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,
        // ...
    })
});

如何使用 OpenLayers 3 旋转带有视图的文本

How to rotate text with view using OpenLayers 3

text

view

rotation

openlayers-3