"arrow" 图像在 OpenLayers 3 的地图中只显示一半

Question

我在使用OpenLayers 3进行网页开发时遇到问题。我想通过绘制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] 可解决问题。

还有一个问题就是图片的锚点在"top-left"中不是，大致在图标中间。 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。

"arrow" 图像在 OpenLayers 3 的地图中只显示一半

"arrow" image only show half in map in OpenLayers 3

javascript

openlayers-3