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

Question

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

对于地图，我希望将文本标签锚定在地图上绘制的线段点上。所以，如果我移动地图或放大或缩小，标签就会贴在这一点上。但是，如果我放大或缩小标签移动（很多）。拖动地图不会产生这种效果。不知何故，我希望他们坚持在线上的一点，而不是四处走动。

有没有人有一些聪明的建议或链接在哪里看？谷歌搜索像'锚'或'固定点'的条款，尝试一些建议并没有解决我的问题。任何帮助将非常感谢！

Answer 1

也许你可以用“箭头”的例子来inspered至极使用使用几何段样式功能：

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; 
};