I noticed there can be edge of character artifacts with labels,
a box around the glyph that can overlap sometimes, cutting adjacent characters off or a box aground the character visible over certain colors
Any thoughts on using a regular billboard with svg?
a quick and dirty example using svg bellow,
var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;
Cesium.SVGLabelCollection = function (params) {
Cesium.BillboardCollection.call(this, params);
};
Cesium.SVGLabelCollection.prototype = Object.create(Cesium.BillboardCollection.prototype);
Cesium.SVGLabelCollection.prototype.constructor = Cesium.SVGLabel;
Cesium.SVGLabelCollection.prototype.add = function(svgLabel) {
var b = new Cesium.SVGLabel(svgLabel, this);
b._index = this._billboards.length;
this._billboards.push(b);
this._createVertexArray = true;
return b;
};
Cesium.SVGLabel = function (params, collection) {
this._text = params.text || "abc123abc" ;
this._fontSize = params.fontSize || 20;
this._textLength = String(this._text).length;
params.image = this._setSvgB64();
Cesium.Billboard.call(this, params, collection);
};
Cesium.SVGLabel.prototype = Object.create(Cesium.Billboard.prototype);
Cesium.SVGLabel.prototype.constructor = Cesium.SVGLabel;
Cesium.SVGLabel.prototype._setSvgB64 = function(){
var svgXml = ['<?xml version="1.0" encoding="iso-8859-1"?>',
'<svg width="300px" height="50px" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"> ',
' <text x="0" y="15" fill="white" stroke="black" stroke-width="1.5" font-size="', this._fontSize , '" font-weight=" bold" font-family="Verdana">',
String(this._text)
,'</text>',
'</svg>'].join('');
return ( "data:image/svg+xml;base64," + btoa(svgXml) );
};
Object.defineProperty(Cesium.SVGLabel.prototype, 'text', {
get: function(){
return this._text ;
},
set: function(value){
if (!Cesium.defined(value)) {
throw new DeveloperError('value is required.');
}
this._text = value;
var _b64 = this._setSvgB64();
Object.getOwnPropertyDescriptor(Cesium.Billboard.prototype, 'image').set.call(this, _b64);
}
});
var svgLabels = scene.primitives.add(new Cesium.SVGLabelCollection({ scene: scene }));
var svgLabel = svgLabels.add({
position: Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222, 100) ,
text: '<tspan dx="0" dy="15">1234 Philadephia 1234</tspan>' +
'<tspan dx="-200" dy="15">some more text</tspan>'
});
console.log(svgLabel.text);
setTimeout( function(){
svgLabel.text = "some new text";
svgLabel.scale = 1.5;
console.log(svgLabel.text);
}
,3000);