javascript - 在OpenLayers 3中传递给样式函数的第一行上绘制箭头

因此，我使用的是OpenLayers3示例here，它工作正常，但是我不想在每行上绘制箭头。只有第一个被绘制。这是我目前用于样式功能的内容。

navigationLineStyleFunction: function(feature) {
    var geometry = feature.getGeometry();
    var lineColor = '#c1005d'
    var styles = [
        new ol.style.Style({
            stroke: new ol.style.Stroke({
                //this can accept rgba colors to hide the lines
                color: lineColor,
                width: 6
            })
        })
    ];
    geometry.forEachSegment(function(start, end, sexting) {
        var dx = start[0] - end[0];
        var dy = start[1] - end[1];
        var rotation = Math.atan2(dy, dx);
        // arrows
        styles.push(new ol.style.Style({
            geometry: new ol.geom.Point(start),
            image: new ol.style.Icon({
                src: 'https://openlayers.org/en/v4.0.1/examples/data/arrow.png',
                anchor: [0.75, 0.5],
                rotateWithView: true,
                rotation: -rotation
            })
        }));
    });

    return styles;
}

问题出在forEachSegment()我想，但找不到仅可捕获第一个函数的函数。我试图通过将.push()包裹在if语句中来检查它，以检查styles[]的长度，但是那没有用。我也尝试用forEachSegment()替换.once()，但这没有用。

最佳答案

不用编写forEachSegment方法，而是编写自定义代码从几何图形中获取前2个坐标，然后在这种情况下为该线段应用样式。
由于将为每个段调用forEachSegment方法的回调，同时会导致不必要的循环。

我已经从Openlayers网站上获取了一个样本来演示这一点。

解决：

      var coords = geometry.getCoordinates();// Gets all the coordinates
      var start = coords[0];//First Coordinate
      var end = coords[1];//Second Coordinate

      // Rest of the code
      var dx = end[0] - start[0];
      var dy = end[1] - start[1];
      var rotation = Math.atan2(dy, dx);
      // arrows
      styles.push(new ol.style.Style({
        geometry: new ol.geom.Point(end),
        image: new ol.style.Icon({
          src: 'https://openlayers.org/en/v4.0.1/examples/data/arrow.png',
          anchor: [0.75, 0.5],
          rotateWithView: true,
          rotation: -rotation
        })
      }));

看看这个plunckr link