javascript - "arrow"图像仅在 OpenLayers 3 的 map 中显示一半

Question

我在使用 OpenLayers 3 进行 Web 开发时遇到问题。我想通过绘制 lineString 添加箭头图像。 ，图像可以绘制并指向沿 lineString 的方向方向，但图像只显示一半，不能越过线。代码摘录:

var start = e.feature.getGeometry().getFirstCoordinate();
var end = e.feature.getGeometry().getLastCoordinate();

var dx = end[0] - start[0];
var dy = end[1] - start[1];
var rotation = Math.atan2(dy, dx);

var a = new ol.Feature({
  geometry: new ol.geom.Point(end)
});

var b = new ol.style.Style({
  image: new ol.style.Icon(({
    anchor: [0.5, 0.5],
    anchorOrigin: 'top-left',
    offset: [0, 0],
    scale: 1,
    opacity: 1,
    rotateWithView: false,
    rotation: -rotation,
    src: '//openlayers.org/en/v3.8.2/examples/data/arrow.png',
  }))
});

var m = a.setStyle(b);
source.addFeature(a);

复制问题的完整示例可以在 jsFiddle 中看到。 .

Answer 1

仅显示部分图像的直接问题是由您指定 offset 值引起的；根据the documentation :

define the sub-rectangle to use from the original icon image. Default value is [0, 0].

将其设置为 [0, 0] 可以解决该问题。

另一个问题是图像的 anchor 不在“左上角”，它大致位于图标的中间。 anchor 的值应设置为 [0.5, 0.5]。最后一个问题是箭头附着在箭头的起点，而不是终点。

var a = new ol.Feature({
  geometry: new ol.geom.Point(end)
});

var b = new ol.style.Style({
  image: new ol.style.Icon(({
    anchor: [0.5, 0.5],
    anchorOrigin: 'top-left',
    offset: [0, 0],
    scale: 1,
    opacity: 1,
    rotateWithView: false,
    rotation: -rotation,
    src: '//openlayers.org/en/v3.8.2/examples/data/arrow.png',
  }))
});

我修复了你的 JSFiddle and posted here .