Support fontWeight in text symbolizer

This commit is contained in:
Tim Schaub
2013-10-09 11:52:00 -06:00
parent 7be90877fe
commit 2ee776d9f6
7 changed files with 112 additions and 1 deletions

View File

@@ -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.

View File

@@ -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

View File

@@ -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 &&

View File

@@ -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
}; };

View File

@@ -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

View File

@@ -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);

View File

@@ -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() {