Support fontWeight in text symbolizer
This commit is contained in:
@@ -760,6 +760,7 @@
|
|||||||
* @property {string|ol.expr.Expression|undefined} color Color.
|
* @property {string|ol.expr.Expression|undefined} color Color.
|
||||||
* @property {string|ol.expr.Expression|undefined} fontFamily Font family.
|
* @property {string|ol.expr.Expression|undefined} fontFamily Font family.
|
||||||
* @property {number|ol.expr.Expression|undefined} fontSize Font size in pixels.
|
* @property {number|ol.expr.Expression|undefined} fontSize Font size in pixels.
|
||||||
|
* @property {string|ol.expr.Expression|undefined} fontWeight Font weight.
|
||||||
* @property {string|ol.expr.Expression} text Text for the label.
|
* @property {string|ol.expr.Expression} text Text for the label.
|
||||||
* @property {number|ol.expr.Expression|undefined} opacity Opacity (0-1).
|
* @property {number|ol.expr.Expression|undefined} opacity Opacity (0-1).
|
||||||
* @property {ol.style.Stroke|undefined} stroke Stroke symbolizer for text.
|
* @property {ol.style.Stroke|undefined} stroke Stroke symbolizer for text.
|
||||||
|
|||||||
@@ -286,7 +286,13 @@ ol.renderer.canvas.Vector.prototype.renderText_ =
|
|||||||
if (context.fillStyle !== text.color) {
|
if (context.fillStyle !== text.color) {
|
||||||
context.fillStyle = text.color;
|
context.fillStyle = text.color;
|
||||||
}
|
}
|
||||||
context.font = text.fontSize + 'px ' + text.fontFamily;
|
|
||||||
|
// font shorthand values must be given in the correct order
|
||||||
|
// see http://www.w3.org/TR/CSS21/fonts.html#font-shorthand
|
||||||
|
context.font = text.fontWeight + ' ' +
|
||||||
|
text.fontSize + 'px ' +
|
||||||
|
text.fontFamily;
|
||||||
|
|
||||||
context.globalAlpha = text.opacity;
|
context.globalAlpha = text.opacity;
|
||||||
|
|
||||||
// TODO: make alignments configurable
|
// TODO: make alignments configurable
|
||||||
|
|||||||
@@ -8,6 +8,7 @@ goog.require('ol.style.Literal');
|
|||||||
* @typedef {{color: string,
|
* @typedef {{color: string,
|
||||||
* fontFamily: string,
|
* fontFamily: string,
|
||||||
* fontSize: number,
|
* fontSize: number,
|
||||||
|
* fontWeight: string,
|
||||||
* text: string,
|
* text: string,
|
||||||
* opacity: number,
|
* opacity: number,
|
||||||
* strokeColor: (string|undefined),
|
* strokeColor: (string|undefined),
|
||||||
@@ -38,6 +39,10 @@ ol.style.TextLiteral = function(options) {
|
|||||||
/** @type {number} */
|
/** @type {number} */
|
||||||
this.fontSize = options.fontSize;
|
this.fontSize = options.fontSize;
|
||||||
|
|
||||||
|
goog.asserts.assertString(options.fontWeight, 'fontWeight must be a string');
|
||||||
|
/** @type {string} */
|
||||||
|
this.fontWeight = options.fontWeight;
|
||||||
|
|
||||||
goog.asserts.assertString(options.text, 'text must be a string');
|
goog.asserts.assertString(options.text, 'text must be a string');
|
||||||
/** @type {string} */
|
/** @type {string} */
|
||||||
this.text = options.text;
|
this.text = options.text;
|
||||||
@@ -92,6 +97,7 @@ ol.style.TextLiteral.prototype.equals = function(other) {
|
|||||||
return this.color == other.color &&
|
return this.color == other.color &&
|
||||||
this.fontFamily == other.fontFamily &&
|
this.fontFamily == other.fontFamily &&
|
||||||
this.fontSize == other.fontSize &&
|
this.fontSize == other.fontSize &&
|
||||||
|
this.fontWeight == other.fontWeight &&
|
||||||
this.opacity == other.opacity &&
|
this.opacity == other.opacity &&
|
||||||
this.strokeColor == other.strokeColor &&
|
this.strokeColor == other.strokeColor &&
|
||||||
this.strokeOpacity == other.strokeOpacity &&
|
this.strokeOpacity == other.strokeOpacity &&
|
||||||
|
|||||||
@@ -44,6 +44,15 @@ ol.style.Text = function(options) {
|
|||||||
(options.fontSize instanceof ol.expr.Expression) ?
|
(options.fontSize instanceof ol.expr.Expression) ?
|
||||||
options.fontSize : new ol.expr.Literal(options.fontSize);
|
options.fontSize : new ol.expr.Literal(options.fontSize);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @type {ol.expr.Expression}
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
this.fontWeight_ = !goog.isDef(options.fontWeight) ?
|
||||||
|
new ol.expr.Literal(ol.style.TextDefaults.fontWeight) :
|
||||||
|
(options.fontWeight instanceof ol.expr.Expression) ?
|
||||||
|
options.fontWeight : new ol.expr.Literal(options.fontWeight);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @type {ol.expr.Expression}
|
* @type {ol.expr.Expression}
|
||||||
* @private
|
* @private
|
||||||
@@ -102,6 +111,9 @@ ol.style.Text.prototype.createLiteral = function(featureOrType) {
|
|||||||
var fontSize = Number(ol.expr.evaluateFeature(this.fontSize_, feature));
|
var fontSize = Number(ol.expr.evaluateFeature(this.fontSize_, feature));
|
||||||
goog.asserts.assert(!isNaN(fontSize), 'fontSize must be a number');
|
goog.asserts.assert(!isNaN(fontSize), 'fontSize must be a number');
|
||||||
|
|
||||||
|
var fontWeight = ol.expr.evaluateFeature(this.fontWeight_, feature);
|
||||||
|
goog.asserts.assertString(fontWeight, 'fontWeight must be a string');
|
||||||
|
|
||||||
var text = ol.expr.evaluateFeature(this.text_, feature);
|
var text = ol.expr.evaluateFeature(this.text_, feature);
|
||||||
goog.asserts.assertString(text, 'text must be a string');
|
goog.asserts.assertString(text, 'text must be a string');
|
||||||
|
|
||||||
@@ -129,6 +141,7 @@ ol.style.Text.prototype.createLiteral = function(featureOrType) {
|
|||||||
color: color,
|
color: color,
|
||||||
fontFamily: fontFamily,
|
fontFamily: fontFamily,
|
||||||
fontSize: fontSize,
|
fontSize: fontSize,
|
||||||
|
fontWeight: fontWeight,
|
||||||
text: text,
|
text: text,
|
||||||
opacity: opacity,
|
opacity: opacity,
|
||||||
strokeColor: strokeColor,
|
strokeColor: strokeColor,
|
||||||
@@ -166,6 +179,15 @@ ol.style.Text.prototype.getFontSize = function() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get the font weight.
|
||||||
|
* @return {ol.expr.Expression} Font weight.
|
||||||
|
*/
|
||||||
|
ol.style.Text.prototype.getFontWeight = function() {
|
||||||
|
return this.fontWeight_;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Get the opacity.
|
* Get the opacity.
|
||||||
* @return {ol.expr.Expression} Opacity.
|
* @return {ol.expr.Expression} Opacity.
|
||||||
@@ -223,6 +245,16 @@ ol.style.Text.prototype.setFontSize = function(fontSize) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set the font weight.
|
||||||
|
* @param {ol.expr.Expression} fontWeight Font weight.
|
||||||
|
*/
|
||||||
|
ol.style.Text.prototype.setFontWeight = function(fontWeight) {
|
||||||
|
goog.asserts.assertInstanceof(fontWeight, ol.expr.Expression);
|
||||||
|
this.fontWeight_ = fontWeight;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Set the opacity.
|
* Set the opacity.
|
||||||
* @param {ol.expr.Expression} opacity Opacity.
|
* @param {ol.expr.Expression} opacity Opacity.
|
||||||
@@ -257,6 +289,7 @@ ol.style.Text.prototype.setZIndex = function(zIndex) {
|
|||||||
* @typedef {{color: string,
|
* @typedef {{color: string,
|
||||||
* fontFamily: string,
|
* fontFamily: string,
|
||||||
* fontSize: number,
|
* fontSize: number,
|
||||||
|
* fontWeight: string,
|
||||||
* opacity: number,
|
* opacity: number,
|
||||||
* zIndex: number}}
|
* zIndex: number}}
|
||||||
*/
|
*/
|
||||||
@@ -264,6 +297,7 @@ ol.style.TextDefaults = {
|
|||||||
color: '#000',
|
color: '#000',
|
||||||
fontFamily: 'sans-serif',
|
fontFamily: 'sans-serif',
|
||||||
fontSize: 10,
|
fontSize: 10,
|
||||||
|
fontWeight: 'normal',
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
zIndex: 0
|
zIndex: 0
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -269,6 +269,7 @@ describe('ol.style.Style', function() {
|
|||||||
color: '#ffffff',
|
color: '#ffffff',
|
||||||
fontFamily: 'Arial',
|
fontFamily: 'Arial',
|
||||||
fontSize: 11,
|
fontSize: 11,
|
||||||
|
fontWeight: 'normal',
|
||||||
text: 'Test',
|
text: 'Test',
|
||||||
opacity: 0.5,
|
opacity: 0.5,
|
||||||
zIndex: 0
|
zIndex: 0
|
||||||
|
|||||||
@@ -9,6 +9,7 @@ describe('ol.style.TextLiteral', function() {
|
|||||||
color: '#ff0000',
|
color: '#ff0000',
|
||||||
fontFamily: 'Arial',
|
fontFamily: 'Arial',
|
||||||
fontSize: 11,
|
fontSize: 11,
|
||||||
|
fontWeight: 'normal',
|
||||||
text: 'Test',
|
text: 'Test',
|
||||||
opacity: 0.5,
|
opacity: 0.5,
|
||||||
zIndex: 0
|
zIndex: 0
|
||||||
@@ -22,6 +23,7 @@ describe('ol.style.TextLiteral', function() {
|
|||||||
color: '#ff0000',
|
color: '#ff0000',
|
||||||
fontFamily: 'Arial',
|
fontFamily: 'Arial',
|
||||||
fontSize: 11,
|
fontSize: 11,
|
||||||
|
fontWeight: 'normal',
|
||||||
text: 'Test',
|
text: 'Test',
|
||||||
opacity: 0.5,
|
opacity: 0.5,
|
||||||
strokeColor: '#ff0000',
|
strokeColor: '#ff0000',
|
||||||
@@ -38,6 +40,7 @@ describe('ol.style.TextLiteral', function() {
|
|||||||
color: '#ff0000',
|
color: '#ff0000',
|
||||||
fontFamily: 'Arial',
|
fontFamily: 'Arial',
|
||||||
fontSize: 11,
|
fontSize: 11,
|
||||||
|
fontWeight: 'normal',
|
||||||
text: 'Test',
|
text: 'Test',
|
||||||
opacity: 0.5,
|
opacity: 0.5,
|
||||||
strokeColor: '#ff0000',
|
strokeColor: '#ff0000',
|
||||||
@@ -57,6 +60,7 @@ describe('ol.style.TextLiteral', function() {
|
|||||||
color: '#ff0000',
|
color: '#ff0000',
|
||||||
fontFamily: 'Arial',
|
fontFamily: 'Arial',
|
||||||
fontSize: 11,
|
fontSize: 11,
|
||||||
|
fontWeight: 'normal',
|
||||||
text: 'Test',
|
text: 'Test',
|
||||||
opacity: 0.5,
|
opacity: 0.5,
|
||||||
zIndex: 0
|
zIndex: 0
|
||||||
@@ -65,6 +69,7 @@ describe('ol.style.TextLiteral', function() {
|
|||||||
color: '#ff0000',
|
color: '#ff0000',
|
||||||
fontFamily: 'Arial',
|
fontFamily: 'Arial',
|
||||||
fontSize: 11,
|
fontSize: 11,
|
||||||
|
fontWeight: 'normal',
|
||||||
text: 'Test',
|
text: 'Test',
|
||||||
opacity: 0.5,
|
opacity: 0.5,
|
||||||
zIndex: 0
|
zIndex: 0
|
||||||
@@ -73,6 +78,7 @@ describe('ol.style.TextLiteral', function() {
|
|||||||
color: '#0000ff',
|
color: '#0000ff',
|
||||||
fontFamily: 'Arial',
|
fontFamily: 'Arial',
|
||||||
fontSize: 11,
|
fontSize: 11,
|
||||||
|
fontWeight: 'normal',
|
||||||
text: 'Test',
|
text: 'Test',
|
||||||
opacity: 0.5,
|
opacity: 0.5,
|
||||||
zIndex: 0
|
zIndex: 0
|
||||||
@@ -81,6 +87,7 @@ describe('ol.style.TextLiteral', function() {
|
|||||||
color: '#ff0000',
|
color: '#ff0000',
|
||||||
fontFamily: 'Dingbats',
|
fontFamily: 'Dingbats',
|
||||||
fontSize: 11,
|
fontSize: 11,
|
||||||
|
fontWeight: 'normal',
|
||||||
text: 'Test',
|
text: 'Test',
|
||||||
opacity: 0.5,
|
opacity: 0.5,
|
||||||
zIndex: 0
|
zIndex: 0
|
||||||
@@ -89,6 +96,16 @@ describe('ol.style.TextLiteral', function() {
|
|||||||
color: '#ff0000',
|
color: '#ff0000',
|
||||||
fontFamily: 'Arial',
|
fontFamily: 'Arial',
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
|
fontWeight: 'normal',
|
||||||
|
text: 'Test',
|
||||||
|
opacity: 0.5,
|
||||||
|
zIndex: 0
|
||||||
|
});
|
||||||
|
var differentFontWeight = new ol.style.TextLiteral({
|
||||||
|
color: '#ff0000',
|
||||||
|
fontFamily: 'Arial',
|
||||||
|
fontSize: 11,
|
||||||
|
fontWeight: 'bold',
|
||||||
text: 'Test',
|
text: 'Test',
|
||||||
opacity: 0.5,
|
opacity: 0.5,
|
||||||
zIndex: 0
|
zIndex: 0
|
||||||
@@ -97,6 +114,7 @@ describe('ol.style.TextLiteral', function() {
|
|||||||
color: '#ff0000',
|
color: '#ff0000',
|
||||||
fontFamily: 'Arial',
|
fontFamily: 'Arial',
|
||||||
fontSize: 11,
|
fontSize: 11,
|
||||||
|
fontWeight: 'normal',
|
||||||
text: 'Test',
|
text: 'Test',
|
||||||
opacity: 0.6,
|
opacity: 0.6,
|
||||||
zIndex: 0
|
zIndex: 0
|
||||||
@@ -105,6 +123,7 @@ describe('ol.style.TextLiteral', function() {
|
|||||||
color: '#ff0000',
|
color: '#ff0000',
|
||||||
fontFamily: 'Arial',
|
fontFamily: 'Arial',
|
||||||
fontSize: 11,
|
fontSize: 11,
|
||||||
|
fontWeight: 'normal',
|
||||||
text: 'Text is not compared for equality',
|
text: 'Text is not compared for equality',
|
||||||
opacity: 0.5,
|
opacity: 0.5,
|
||||||
zIndex: 0
|
zIndex: 0
|
||||||
@@ -113,6 +132,7 @@ describe('ol.style.TextLiteral', function() {
|
|||||||
color: '#ff0000',
|
color: '#ff0000',
|
||||||
fontFamily: 'Arial',
|
fontFamily: 'Arial',
|
||||||
fontSize: 11,
|
fontSize: 11,
|
||||||
|
fontWeight: 'normal',
|
||||||
text: 'Test',
|
text: 'Test',
|
||||||
opacity: 0.5,
|
opacity: 0.5,
|
||||||
zIndex: 3
|
zIndex: 3
|
||||||
@@ -121,6 +141,7 @@ describe('ol.style.TextLiteral', function() {
|
|||||||
expect(literal.equals(differentColor)).to.be(false);
|
expect(literal.equals(differentColor)).to.be(false);
|
||||||
expect(literal.equals(differentFontFamily)).to.be(false);
|
expect(literal.equals(differentFontFamily)).to.be(false);
|
||||||
expect(literal.equals(differentFontSize)).to.be(false);
|
expect(literal.equals(differentFontSize)).to.be(false);
|
||||||
|
expect(literal.equals(differentFontWeight)).to.be(false);
|
||||||
expect(literal.equals(differentOpacity)).to.be(false);
|
expect(literal.equals(differentOpacity)).to.be(false);
|
||||||
expect(literal.equals(equalLiteral2)).to.be(true);
|
expect(literal.equals(equalLiteral2)).to.be(true);
|
||||||
expect(literal.equals(differentZIndex)).to.be(false);
|
expect(literal.equals(differentZIndex)).to.be(false);
|
||||||
|
|||||||
@@ -109,6 +109,7 @@ describe('ol.style.Text', function() {
|
|||||||
expect(literal.color).to.be('#000');
|
expect(literal.color).to.be('#000');
|
||||||
expect(literal.fontFamily).to.be('sans-serif');
|
expect(literal.fontFamily).to.be('sans-serif');
|
||||||
expect(literal.fontSize).to.be(10);
|
expect(literal.fontSize).to.be(10);
|
||||||
|
expect(literal.fontWeight).to.be('normal');
|
||||||
expect(literal.text).to.be('Test');
|
expect(literal.text).to.be('Test');
|
||||||
expect(literal.opacity).to.be(1);
|
expect(literal.opacity).to.be(1);
|
||||||
});
|
});
|
||||||
@@ -216,6 +217,20 @@ describe('ol.style.Text', function() {
|
|||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe('#getFontWeight()', function() {
|
||||||
|
|
||||||
|
it('returns the font size', function() {
|
||||||
|
var symbolizer = new ol.style.Text({
|
||||||
|
fontWeight: 'bold'
|
||||||
|
});
|
||||||
|
|
||||||
|
var fontWeight = symbolizer.getFontWeight();
|
||||||
|
expect(fontWeight).to.be.a(ol.expr.Literal);
|
||||||
|
expect(fontWeight.getValue()).to.be('bold');
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
describe('#getOpacity()', function() {
|
describe('#getOpacity()', function() {
|
||||||
|
|
||||||
it('returns the opacity', function() {
|
it('returns the opacity', function() {
|
||||||
@@ -314,6 +329,33 @@ describe('ol.style.Text', function() {
|
|||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe('#setFontWeight()', function() {
|
||||||
|
|
||||||
|
it('sets the font size', function() {
|
||||||
|
var symbolizer = new ol.style.Text({
|
||||||
|
fontWeight: 'bold'
|
||||||
|
});
|
||||||
|
symbolizer.setFontWeight(new ol.expr.Literal('900'));
|
||||||
|
|
||||||
|
var fontWeight = symbolizer.getFontWeight();
|
||||||
|
expect(fontWeight).to.be.a(ol.expr.Literal);
|
||||||
|
expect(fontWeight.getValue()).to.be('900');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('throws when not provided an expression', function() {
|
||||||
|
var symbolizer = new ol.style.Text({
|
||||||
|
fontWeight: 'lighter'
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(function() {
|
||||||
|
symbolizer.setFontWeight('bolder');
|
||||||
|
}).throwException(function(err) {
|
||||||
|
expect(err).to.be.a(goog.asserts.AssertionError);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
describe('#setOpacity()', function() {
|
describe('#setOpacity()', function() {
|
||||||
|
|
||||||
it('sets the opacity', function() {
|
it('sets the opacity', function() {
|
||||||
|
|||||||
Reference in New Issue
Block a user