複数の色のOpenlayers ol.style.Text

Question

openlayers 4+のol.style.Textクラスに複数のフォント色を設定する方法はありますか？私は「他のテキスト」の長さや幅が不明であるとtextAlignが中央に設定する必要がありますので、

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, 
     }) 

ような何かをしようとしています

、私は2つのol.style.Textクラスと位置を追加することはできませんそれらを並べて事前

Answer 1

で

おかげで、ライブラリレベルで、このための解決策はありませんが、あなたは非常に簡単に2つのテキストスタイルでそれを達成することができます。トリックは、例えばテキストを使用して両方のテキストの幅を測定することである。 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>