Openlayers3 - Как да закотвя текстов етикет към точка?

Работя върху приложение, използващо Openlayers3. На картата има няколко линейни сегмента и текстови етикети. Всеки ред има цвят и свързан етикет.

За картата бих искал текстовият етикет да е закотвен в точка от сегмент от линия, който е начертан на картата. Така че, ако преместя картата или увелича или намаля, етикетът се придържа към точката. Въпреки това, ако увелича или намаля, етикетите се местят (много). Плъзгането на картата няма този ефект. Някак си бих искал те да останат в една точка на линията, вместо да се движат наоколо.

Някой има ли умни съвети или линкове къде да търся? Търсенето в гугъл на термини като „котва“ или „фиксирана точка“ и изпробването на някои от препоръките не решиха проблема за мен. Всяка помощ ще бъде много оценявана!


person Liev Ratslov    schedule 28.08.2015    source източник


Отговори (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;
};
person David    schedule 28.08.2015