沿着線串功能的多個文本標簽

Question

在OpenLayers 3是否可以創建一個文本標簽，該文本標簽可以根據比例沿着線串功能多次克隆？ 就像是：

在這里您可以看到，當我們更改比例標簽“ IX Corps Blvd”時，它會出現兩次。 我們如何實現呢？

Answer 1

您可以使用樣式功能來實現。 我的代碼示例是關於使箭頭指向字符串（大小寫略有不同） ，但是我已經注釋了需要更改的部分（至少）：

var raster = new ol.layer.Tile({
    source: new ol.source.OSM()
  });

var source = new ol.source.Vector();


var styleFunction = function(feature) {
    var geometry = feature.getGeometry();
    var styles = [
      // linestring
      new ol.style.Style({
        stroke: new ol.style.Stroke({   // apply street style here
          color: '#ffcc33',
          width: 2
        })
      })
    ];

    geometry.forEachSegment(function(start, end) {
      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({    // Use here label, not icon.
          src: 'http://openlayers.org/en/v3.17.1/examples/data/arrow.png',
          anchor: [0.75, 0.5],
          rotateWithView: false,
          rotation: -rotation
        })
      }));
    });

    return styles;
  };

var vector = new ol.layer.Vector({
     source: source,
     style: styleFunction
});


  map.addInteraction(new ol.interaction.Draw({
    source: source,
    type: /** @type {ol.geom.GeometryType} */ ('LineString')
  }));

需要付出更多努力才能將標題放置在正確的位置。 我這樣留下了這個答案，為構建功能提供了堅實的起點。

我的來源：

[1] http://openlayers.org/en/master/examples/line-arrows.html