Openlayers ol.style.Text с несколькими цветами

Question

Есть ли способ установить несколько цветов шрифта для класса ol.style.Text для openlayers 4+?

Я пытаюсь сделать что-то вроде

const label = new ol.style.Style({
        text: new ol.style.Text({
            text: '<color1>X</color1> other text',
            textAlign: 'center',

            font: '11px roboto,sans-serif',
            fill: new ol.style.Fill({
                color: 'white'
            }),
            stroke: new ol.style.Stroke({
                color: 'black',
                lineCap: 'butt',
                width: 4
            }),
            offsetX: 0,
            offsetY: 25.5,
        })

Так как длина или ширина "другого текста" неизвестна, а textAlign должен быть установлен по центру, я не могу добавить два класса ol.style.Text и расположить их рядом.

заранее спасибо

Answer 1

Для этого не существует решения на уровне библиотеки, но вы можете легко достичь этого с помощью двух стилей текста. Хитрость заключается в том, чтобы измерить ширину обоих текстов, используя, например, CanvasRenderingContext2D.measureText и отрегулировать offsetX свойство обоих текстовых стилей соответственно:

var map = new ol.Map({
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 0
  })
});

var point = new ol.Feature(
    new ol.geom.Point([0, 0]));

var text1 = 'X'
var text2 = ' other text';
var font = '11px roboto,sans-serif';
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
context.font = font;
var width1 = context.measureText(text1).width;
var width2 = context.measureText(text2).width;

var layer = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [point]
  }),
  style: [
    new ol.style.Style({
      image: new ol.style.Circle({
        radius: 4,
        fill: new ol.style.Fill({
          color: 'blue'
        })
      }),
      text: new ol.style.Text({
        font: font,
        text: text1,
        fill: new ol.style.Fill({
          color: 'red'
        }),
        textAlign: 'center',
        textBaseline: 'bottom',
        offsetY: -5,
        offsetX: -width2 / 2
      })
    }),
    new ol.style.Style({
      text: new ol.style.Text({
        font: font,
        text: text2,
        fill: new ol.style.Fill({
          color: 'black'
        }),
        textAlign: 'center',
        textBaseline: 'bottom',
        offsetY: -5,
        offsetX: width1 / 2
      })
    })
  ]
});
map.addLayer(layer);

html, body, #map {
  width: 100%;
  height: 100%;
  margin: 0;
 }

<link href="https://openlayers.org/en/v4.3.2/css/ol.css" rel="stylesheet"/>
<script src="https://openlayers.org/en/v4.3.2/build/ol-debug.js"></script>
<div id="map"></div>