Openlayers3-如何将文本标签锚定到一个点？

Question

我正在使用Openlayers3开发应用程序。 在地图上有几个线段和文本标签。 每行都有一个颜色和一个关联的标签。

对于地图，我想将文本标签锚定在地图上绘制的线段的一点上。 因此，如果我移动地图或放大或缩小，则标签会粘在该点上。 但是，如果我放大或缩小，标签会移动（很多）。 拖动地图没有此效果。 我希望他们以某种方式停留在线上的某个点，而不是四处走动。

有人在哪里可以找到一些聪明的建议或链接吗？ 谷歌搜索诸如“锚点”或“定点”之类的术语并尝试一些建议对我而言并没有解决问题。 任何帮助将不胜感激！

Answer 1

也许您会为“箭头”示例感到恼火，但可以使用使用几何段的样式函数：

http://jsfiddle.net/davidhequet/7asg74Lc/

var styleFunction = function(feature, resolution) {
  var geometry = feature.getGeometry();
  var styles = [
    // linestring
    new ol.style.Style({
      stroke: new ol.style.Stroke({
        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),
      text: new ol.style.Text({
            textAlign: 'left',
            textBaseline: 'bottom',
            font: 'Arial',
            text: 'test text',
            fill: new ol.style.Fill({color: 'red'}),
            stroke: new ol.style.Stroke({color: 'white', width: '2'}),
            offsetX: 0,
            offsetY: 0,
            rotation: 0
          })
    }));
  });

  return styles;
};