Openlayers ol.style.Text與多種顏色

Question

有沒有辦法爲ollystyle.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>