Cómo centrar el texto de una característica de punto vectorial en OpenLayers

Question

Tengo varias características de punto mostradas en OpenLayers que, cuando se aplica un relleno de fondo y se establece un relleno pequeño o nulo, no centran sus valores de texto en el centro del relleno del bloque:

Este mismo texto se centra mucho mejor cuando los valores de relleno son mucho mayores (10)

La documentación indica que para las características de punto alinear, colocar y línea de base debe tener el texto en el centro del bloque, pero lo estoy forzando por si acaso (esto sigue sin funcionar)

textStyle.setFont(`${style.FontWeight} ${style.FontSize}px ${style.FontFamily}`);
textStyle.setFill(new Fill({ color: `rgba(${ style.Colour.R }, ${ style.Colour.G },${ style.Colour.B },${style.Colour.A / 255})` }));
textStyle.setTextAlign("center");
textStyle.setTextBaseline("middle");
textStyle.setPlacement("point");
textStyle.setPadding([2, 2, 2, 2]) //[10, 10, 10, 10] centers the text way better

El valor de la cadena de caracteres que estoy enviando se evalúa como 300 9px Roboto

¿Hay algo que deba hacer para mejorar el centrado de estas etiquetas de texto?

Answer 1

Como también soy muy exigente en cuanto a que la visualización sea exactamente como la quiero, hice un poco de pruebas.

Con ol.Style.Text es un lío total. El lugar donde se va a mostrar el texto dentro del cuadro de fondo de texto depende de la fuente, el navegador e incluso la posición en el mapa. Abajo hay ejemplos de IE11, Forefox, Chrome y Chrome Edge. El centrado está por todas partes:

Obviamente, OpenLayers no es un experto en estas cosas, pero ni siquiera pretende serlo.

Aquí viene al rescate ol.Overlay que puede utilizar HTML div para distribuir el texto. Dado que el renderizado del texto se realiza en este caso por el navegador, los resultados son como deberían ser en todos los navegadores. Siguen dependiendo de la fuente, pero al menos son iguales en todos los navegadores.

Si la superposición se define así:

<div id="myDiv" style="color:white; background-color: blue; padding: 0px 2px 0px 2px; font-family: Roboto; font-size: 12px;">F2</div>
.
.
.
var myOverlay = new ol.Overlay({
  element: document.getElementById('myDiv'),
});

entonces este es el resultado: