沿线串特征的多个文本标签

Question

是否可以在OpenLayers 3中创建一个文本标签，该标签可以沿着线串特征多次克隆，具体取决于比例？类似的东西：

在这里你可以看到，当我们改变规模标签＆＃34; IX Corps Blvd＆＃34;出现两次。我们怎样才能实现这个目标？

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