diff --git a/examples/vector-layer.js b/examples/vector-layer.js index daf0d3ca75..25f70d6cde 100644 --- a/examples/vector-layer.js +++ b/examples/vector-layer.js @@ -11,37 +11,34 @@ goog.require('ol.style.Style'); goog.require('ol.style.Text'); -var styleCache = {}; +var style = new ol.style.Style({ + fill: new ol.style.Fill({ + color: 'rgba(255, 255, 255, 0.6)' + }), + stroke: new ol.style.Stroke({ + color: '#319FD3', + width: 1 + }), + text: new ol.style.Text({ + font: '12px Calibri,sans-serif', + fill: new ol.style.Fill({ + color: '#000' + }), + stroke: new ol.style.Stroke({ + color: '#fff', + width: 3 + }) + }) +}); +var styles = [style]; var vectorLayer = new ol.layer.Vector({ source: new ol.source.GeoJSON({ projection: 'EPSG:3857', url: 'data/geojson/countries.geojson' }), style: function(feature, resolution) { - var text = resolution < 5000 ? feature.get('name') : ''; - if (!styleCache[text]) { - styleCache[text] = [new ol.style.Style({ - fill: new ol.style.Fill({ - color: 'rgba(255, 255, 255, 0.6)' - }), - stroke: new ol.style.Stroke({ - color: '#319FD3', - width: 1 - }), - text: new ol.style.Text({ - font: '12px Calibri,sans-serif', - text: text, - fill: new ol.style.Fill({ - color: '#000' - }), - stroke: new ol.style.Stroke({ - color: '#fff', - width: 3 - }) - }) - })]; - } - return styleCache[text]; + style.getText().setText(resolution < 5000 ? feature.get('name') : ''); + return styles; } }); diff --git a/src/ol/style/fillstyle.js b/src/ol/style/fillstyle.js index edfad11ae4..6714445868 100644 --- a/src/ol/style/fillstyle.js +++ b/src/ol/style/fillstyle.js @@ -1,7 +1,5 @@ goog.provide('ol.style.Fill'); -goog.require('ol.color'); - /** @@ -31,3 +29,14 @@ ol.style.Fill = function(opt_options) { ol.style.Fill.prototype.getColor = function() { return this.color_; }; + + +/** + * Set the color. + * + * @param {ol.Color|string} color Color. + * @api + */ +ol.style.Fill.prototype.setColor = function(color) { + this.color_ = color; +}; diff --git a/src/ol/style/imagestyle.js b/src/ol/style/imagestyle.js index e5d8bce527..2f57b34337 100644 --- a/src/ol/style/imagestyle.js +++ b/src/ol/style/imagestyle.js @@ -150,6 +150,58 @@ ol.style.Image.prototype.getOrigin = goog.abstractMethod; ol.style.Image.prototype.getSize = goog.abstractMethod; +/** + * Set the opacity. + * + * @param {number} opacity Opacity. + */ +ol.style.Image.prototype.setOpacity = function(opacity) { + this.opacity_ = opacity; +}; + + +/** + * Set whether to rotate the style with the view. + * + * @param {boolean} rotateWithView Rotate with map. + */ +ol.style.Image.prototype.setRotateWithView = function(rotateWithView) { + this.rotateWithView_ = rotateWithView; +}; + + +/** + * Set the rotation. + * + * @param {number} rotation Rotation. + * @api + */ +ol.style.Image.prototype.setRotation = function(rotation) { + this.rotation_ = rotation; +}; + + +/** + * Set the scale. + * + * @param {number} scale Scale. + * @api + */ +ol.style.Image.prototype.setScale = function(scale) { + this.scale_ = scale; +}; + + +/** + * Set whether to snap the image to the closest pixel. + * + * @param {boolean} snapToPixel Snap to pixel? + */ +ol.style.Image.prototype.setSnapToPixel = function(snapToPixel) { + this.snapToPixel_ = snapToPixel; +}; + + /** * @param {function(this: T, goog.events.Event)} listener Listener function. * @param {T} thisArg Value to use as `this` when executing `listener`. diff --git a/src/ol/style/strokestyle.js b/src/ol/style/strokestyle.js index c5d2e90c91..15e99bf260 100644 --- a/src/ol/style/strokestyle.js +++ b/src/ol/style/strokestyle.js @@ -1,7 +1,5 @@ goog.provide('ol.style.Stroke'); -goog.require('ol.color'); - /** @@ -109,3 +107,69 @@ ol.style.Stroke.prototype.getMiterLimit = function() { ol.style.Stroke.prototype.getWidth = function() { return this.width_; }; + + +/** + * Set the color. + * + * @param {ol.Color|string} color Color. + * @api + */ +ol.style.Stroke.prototype.setColor = function(color) { + this.color_ = color; +}; + + +/** + * Set the line cap. + * + * @param {string|undefined} lineCap Line cap. + * @api + */ +ol.style.Stroke.prototype.setLineCap = function(lineCap) { + this.lineCap_ = lineCap; +}; + + +/** + * Set the line dash. + * + * @param {Array.} lineDash Line dash. + * @api + */ +ol.style.Stroke.prototype.setLineDash = function(lineDash) { + this.lineDash_ = lineDash; +}; + + +/** + * Set the line join. + * + * @param {string|undefined} lineJoin Line join. + * @api + */ +ol.style.Stroke.prototype.setLineJoin = function(lineJoin) { + this.lineJoin_ = lineJoin; +}; + + +/** + * Set the miter limit. + * + * @param {number|undefined} miterLimit Miter limit. + * @api + */ +ol.style.Stroke.prototype.setMiterLimit = function(miterLimit) { + this.miterLimit_ = miterLimit; +}; + + +/** + * Set the width. + * + * @param {number|undefined} width Width. + * @api + */ +ol.style.Stroke.prototype.setWidth = function(width) { + this.width_ = width; +}; diff --git a/src/ol/style/style.js b/src/ol/style/style.js index 031b9b59bc..ad45b198c4 100644 --- a/src/ol/style/style.js +++ b/src/ol/style/style.js @@ -12,7 +12,9 @@ goog.require('ol.style.Stroke'); /** * @classdesc - * Base class for vector feature rendering styles. + * Container for vector feature rendering styles. Any changes made to the style + * or its children through `set*()` methods will not take effect until the + * feature, layer or FeatureOverlay that uses the style is re-rendered. * * @constructor * @param {olx.style.StyleOptions=} opt_options Style options. @@ -100,6 +102,17 @@ ol.style.Style.prototype.getZIndex = function() { }; +/** + * Set the zIndex. + * + * @param {number|undefined} zIndex ZIndex. + * @api + */ +ol.style.Style.prototype.setZIndex = function(zIndex) { + this.zIndex_ = zIndex; +}; + + /** * A function that takes an {@link ol.Feature} and a `{number}` representing * the view's resolution. The function should return an array of diff --git a/src/ol/style/textstyle.js b/src/ol/style/textstyle.js index 6dff406d23..65412dff78 100644 --- a/src/ol/style/textstyle.js +++ b/src/ol/style/textstyle.js @@ -164,3 +164,111 @@ ol.style.Text.prototype.getTextAlign = function() { ol.style.Text.prototype.getTextBaseline = function() { return this.textBaseline_; }; + + +/** + * Set the font. + * + * @param {string|undefined} font Font. + * @api + */ +ol.style.Text.prototype.setFont = function(font) { + this.font_ = font; +}; + + +/** + * Set the x offset. + * + * @param {number} offsetX Horizontal text offset. + */ +ol.style.Text.prototype.setOffsetX = function(offsetX) { + this.offsetX_ = offsetX; +}; + + +/** + * Set the y offset. + * + * @param {number} offsetY Vertical text offset. + */ +ol.style.Text.prototype.setOffsetY = function(offsetY) { + this.offsetY_ = offsetY; +}; + + +/** + * Set the fill. + * + * @param {ol.style.Fill} fill Fill style. + * @api + */ +ol.style.Text.prototype.setFill = function(fill) { + this.fill_ = fill; +}; + + +/** + * Set the rotation. + * + * @param {number|undefined} rotation Rotation. + * @api + */ +ol.style.Text.prototype.setRotation = function(rotation) { + this.rotation_ = rotation; +}; + + +/** + * Set the scale. + * + * @param {number|undefined} scale Scale. + * @api + */ +ol.style.Text.prototype.setScale = function(scale) { + this.scale_ = scale; +}; + + +/** + * Set the stroke. + * + * @param {ol.style.Stroke} stroke Stroke style. + * @api + */ +ol.style.Text.prototype.setStroke = function(stroke) { + this.stroke_ = stroke; +}; + + +/** + * Set the text. + * + * @param {string|undefined} text Text. + * @api + */ +ol.style.Text.prototype.setText = function(text) { + this.text_ = text; +}; + + +/** + * Set the text alignment. + * + * @param {string|undefined} textAlign Text align. + * @api + */ +ol.style.Text.prototype.setTextAlign = function(textAlign) { + this.textAlign_ = textAlign; +}; + + +/** + * Set the text baseline. + * + * @param {string|undefined} textBaseline Text baseline. + * @api + */ +ol.style.Text.prototype.setTextBaseline = function(textBaseline) { + this.textBaseline_ = textBaseline; +}; diff --git a/test/spec/ol/style.test.js b/test/spec/ol/style.test.js index 17eae20b5e..8c64cb0497 100644 --- a/test/spec/ol/style.test.js +++ b/test/spec/ol/style.test.js @@ -1,5 +1,18 @@ goog.provide('ol.test.style.Style'); +describe('ol.style.Style', function() { + + describe('#setZIndex', function() { + + it('sets the zIndex', function() { + var style = new ol.style.Style(); + + style.setZIndex(0.7); + expect(style.getZIndex()).to.be(0.7); + }); + }); +}); + describe('ol.style.createStyleFunction()', function() { var style = new ol.style.Style();