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

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

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

Multiple text labels along a linestring feature

javascript

gis

openlayers-3