具有多种颜色的 Openlayers ol.style.Text答案

【问题标题】：Openlayers ol.style.Text with multiple colors具有多种颜色的 Openlayers ol.style.Text
【发布时间】：2017-09-13 06:09:45
【问题描述】：

有没有办法为 openlayers 4+ 的 ol.style.Text 类设置多种字体颜色？

我正在尝试做类似的事情

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 类并将它们并排放置。

提前致谢

【问题讨论】：

标签： openlayers angular-openlayers

【解决方案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://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<div id="map"></div>

【讨论】：