Question

JSFiddle补充道：https://jsfiddle.net/AJR80/phwq2v1k/

这是我用于箭头的代码...... Rest可以在JSFiddle中看到。

var style2 = new ol.style.Style({
        image: new ol.style.Icon(({
            anchor: [0, 0],
            anchorXUnits: "pixels",
            anchorYUnits: "pixels",
            offset: [0,0],
            offsetOrigin: 'bottom-left',
            src: 'https://i.imgur.com/YKy2qfG.png',
            rotation: 0
        }))
    });

在图片中箭头是一个ol.Style.Icon，带有白色圆圈的“背景图片”是另一个ol.Style.Icon，文本是ol.Style.Text。所有都具有相同的坐标，我可以使用锚点设置将文本和背景移动到屏幕上的正确位置。箭头让我哭泣......

我不能使用箭头的锚点，因为我想在背景的白色圆圈内旋转箭头。如果我尝试更改箭头的偏移量，它只会剪切图像。

我只想将“中间”移动到背景白色圆圈的中间。可以吗？到目前为止，我还没有找到解决方案......有人可以帮我找到它吗？

非常感谢！

的Antti

Answer 1

答案在这里：https://jsfiddle.net/phwq2v1k/4/

var vectorLayer = new ol.layer.Vector({
  updateWhileAnimating: true,
  updateWhileInteracting: true,
  source: vectorSource,
  style: function(feature, resolution) {
    var coords = feature.getGeometry().getCoordinates();
    coords[0] += 2 * resolution;
    coords[1] += 17 * resolution;
    style2.setGeometry(new ol.geom.Point(coords));
    style2.getImage().setRotation(feature.get('rotation'));
    return styleArray;
  }
});

openlayers 3图标偏移和旋转

1 个答案: