Question

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

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

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

Answer 1

也许你可以通过＆＃34;箭头＆＃34;进行检查。示例使用使用几何段的样式函数：

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

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

1 个答案: