Openlayers 3 pozycja etykiety elementu w stosunku do wielkości funkcji?

Question

Mam kilka warstw na mapie OL, które zawierają kontury, kolory tła i etykiety dla tych samych rozmiarów, więc możesz pokazać lub ukryć jedną lub więcej warstw. Dwie z tych warstw to tylko etykiety ... styl nie zawiera wypełnienia ani obrysu. Jedna etykieta powinna siedzieć nad drugim w centrum środkowej funkcji ale OL wydaje się rozprzestrzeniać je pionowo dalej lub bliżej siebie w stosunku do wysokości wielokąta funkcji, takich jak to:

Próbowałem ustawiając offsetY: 15 w bloku stylu tekstowym dolnej etykiety, dodając podział wiersza przed dolną etykietą i ustawienie textBaseline:'top' na dolnej etykiecie i textBaseline:'bottom' na górze (to była ostatnia próba rowu!), ale są one zawsze rozłożone w różny sposób!

Oto mój blok styl dla górnej etykiecie:

function fields_label_style() { 
     return [ 
      new ol.style.Style({ 
        fill: new ol.style.Fill({ 
         color: 'rgba(255,255,255,0)' 
        }), 
        stroke: new ol.style.Stroke({ 
         color: 'rgba(255,255,255,0)', 
         width: 1 
        }), 
        text: new ol.style.Text({ 
         font: '13px Calibri,sans-serif', 
         fill: new ol.style.Fill({ color: '#ffffff' }), 
         stroke: new ol.style.Stroke({ 
          color: '#000000', width: 2 
         }), 
         // get the text from the feature - `this` is ol.Feature 
         // and show only under certain resolution 
         text: map.getView().getZoom() > 14 ? this.get('description') : '' 
        }) 
       }) 
     ]; 
    } 

I na dolnej etykiecie:

function cropping_label_style() { 
     return [ 
      new ol.style.Style({ 
        fill: new ol.style.Fill({ 
         color: 'rgba(255,255,255,0)' 
        }), 
        stroke: new ol.style.Stroke({ 
         color: 'rgba(255,255,255,0)', 
         width: 1 
        }), 
        text: new ol.style.Text({ 
         font: '13px Calibri,sans-serif', 
         fill: new ol.style.Fill({ color: '#ffffff' }), 
         stroke: new ol.style.Stroke({ 
          color: '#000000', width: 2 
         }), 
         // get the text from the feature - `this` is ol.Feature 
         // and show only under certain resolution 
         text: map.getView().getZoom() > 14 ? this.get('description') : '', 
         offsetY: 15 
        }) 
       }) 
     ]; 
    } 

Zarówno zdecydowanie mają ten sam zarys wielokąta. Bez pytania. Mogę tylko myśleć, że być może OpenLayers traktuje offset jako procent zamiast pikseli, jak podano w dokumentacji:

Answer 1

Z powodu pewnych skomplikowanych pętli w kodzie przeoczyłem, że nastąpił niewielki rozbieżność pomiędzy granicami wielokąta na niektórych obszarach, co oznacza ich etykiety były wyświetlane w nieco innych miejscach. Teraz wszystkie granice poligonów są takie same, a etykieta rzeczywiście jest zgodna z oczekiwaniami. Przepraszam.

Answer 2

więcej obejście niż odpowiedzi, bo widzę nic złego w swoim podejściu, ale czy to daje ten sam rezultat?

[ 
new ol.style.Style({ 
    fill: new ol.style.Fill({ 
     color: 'rgba(255,255,255,0)' 
    }), 
    stroke: new ol.style.Stroke({ 
     color: 'rgba(255,255,255,0)', 
     width: 1 
    }) 
}), 

new ol.style.Style({ 
    text: new ol.style.Text({ 
     font: '13px Calibri,sans-serif', 
     fill: new ol.style.Fill({ 
      color: '#ffffff' 
     }), 
     stroke: new ol.style.Stroke({ 
      color: '#000000', 
      width: 2 
     }), 
     // get the text from the feature - `this` is ol.Feature 
     // and show only under certain resolution 
     text: map.getView().getZoom() > 14 ? this.get('description') : '' 
    }) 
}), 

new ol.style.Style({ 
    text: new ol.style.Text({ 
     font: '13px Calibri,sans-serif', 
     fill: new ol.style.Fill({ 
      color: '#ffffff' 
     }), 
     stroke: new ol.style.Stroke({ 
      color: '#000000', 
      width: 2 
     }), 
     // get the text from the feature - `this` is ol.Feature 
     // and show only under certain resolution 
     text: map.getView().getZoom() > 14 ? this.get('description') : '', 
     offsetY: 15 
    }) 
})]