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

Question

所以我正在使用 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[] 的长度，但确实如此不行。我还尝试用 .once() 替换 forEachSegment() 但那不起作用。

Answer 1

不要使用 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
        })
      }));

看看这个plunkr link