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[]的长度，但这不起作用。我还尝试将forEachSegment()替换为.once()，但这不起作用。

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
        })
      }));

看看这个plunckr link

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

1 个答案: