沿线串要素的多个文本标签

Question

是否可以OpenLayers 3创建一个文本标签，根据比例，沿着线串特征多次克隆？就像是：

在这里您可以看到，当我们更改比例标签时，“IX Corps Blvd”出现两次。我们如何实现这一点？

Answer 1

您可以使用 style 函数来实现这一点。我的代码示例是关于制作指向行字符串的箭头（情况略有不同），但我已经注释了需要更改的部分（至少）：

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