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的值引起的;根据{{3}}：

从原始图标图像中定义要使用的子矩形。默认值为[0,0]。

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

另一个问题是图像的锚点在“左上角”中不，它大致位于图标的中间。 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 the documentation。

＆＃34;箭头＆＃34;图片仅在OpenLayers 3中显示地图的一半

1 个答案: