diff --git a/examples/wms-time.html b/examples/wms-time.html new file mode 100644 index 0000000000..7478dfaa6c --- /dev/null +++ b/examples/wms-time.html @@ -0,0 +1,14 @@ +--- +layout: example.html +title: WMS Time +shortdesc: Example of smooth tile transitions when changing the time dimension of a tiled WMS layer. +docs: > + Demonstrates smooth reloading of layers when changing the time dimension continously. +tags: "wms, time, dimensions, transition" +--- +
+
+ + + +
diff --git a/examples/wms-time.js b/examples/wms-time.js new file mode 100644 index 0000000000..aa127e6f71 --- /dev/null +++ b/examples/wms-time.js @@ -0,0 +1,64 @@ +goog.require('ol.Map'); +goog.require('ol.View'); +goog.require('ol.layer.Tile'); +goog.require('ol.source.MapQuest'); +goog.require('ol.source.TileWMS'); + +var startDate = new Date(Date.parse('2012-01-01T19:00:00Z')); +var frameRate = 0.5; // frames per second +var animationId = null; + +var counter = 0; + +var layers = [ + new ol.layer.Tile({ + source: new ol.source.MapQuest({layer: 'sat'}) + }), + new ol.layer.Tile({ + extent: [-13884991, 2870341, -7455066, 6338219], + source: new ol.source.TileWMS(/** @type {olx.source.TileWMSOptions} */ ({ + url: 'http://oos.soest.hawaii.edu/thredds/wms/hioos/model/wav/ww3/' + + 'WaveWatch_III_Global_Wave_Model_best.ncd?', + params: {'LAYERS': 'Thgt', 'TIME': startDate.toISOString()} + })) + }) +]; +var map = new ol.Map({ + layers: layers, + target: 'map', + view: new ol.View({ + center: [-10997148, 4569099], + zoom: 4 + }) +}); + +var setTime = function() { + startDate.setHours(startDate.getHours() + 1); + layers[1].getSource().updateParams({'TIME': startDate.toISOString()}); + updateInfo(); +}; + +var stop = function() { + if (animationId !== null) { + window.clearInterval(animationId); + animationId = null; + } +}; + +var play = function() { + stop(); + animationId = window.setInterval(setTime, 1000 / frameRate); +}; + +var updateInfo = function() { + var el = document.getElementById('info'); + el.innerHTML = startDate.toISOString(); +}; + +var startButton = document.getElementById('play'); +startButton.addEventListener('click', play, false); + +var stopButton = document.getElementById('pause'); +stopButton.addEventListener('click', stop, false); + +updateInfo(); diff --git a/src/ol/source/tilewmssource.js b/src/ol/source/tilewmssource.js index 47b66b23ac..a0b1ea2f1e 100644 --- a/src/ol/source/tilewmssource.js +++ b/src/ol/source/tilewmssource.js @@ -65,6 +65,13 @@ ol.source.TileWMS = function(opt_options) { */ this.params_ = params; + /** + * @private + * @type {string} + */ + this.paramsKey_ = ''; + this.resetParamsKey_(); + /** * @private * @type {boolean} @@ -178,6 +185,14 @@ ol.source.TileWMS.prototype.getGutter = function() { }; +/** + * @inheritDoc + */ +ol.source.TileWMS.prototype.getKeyParams = function() { + return this.paramsKey_; +}; + + /** * @inheritDoc */ @@ -305,12 +320,20 @@ ol.source.TileWMS.prototype.resetCoordKeyPrefix_ = function() { } } - var key; - for (key in this.params_) { + this.coordKeyPrefix_ = res.join('#'); +}; + + +/** + * @private + */ +ol.source.TileWMS.prototype.resetParamsKey_ = function() { + var i = 0; + var res = []; + for (var key in this.params_) { res[i++] = key + '-' + this.params_[key]; } - - this.coordKeyPrefix_ = res.join('#'); + this.paramsKey_ = res.join('/'); }; @@ -375,6 +398,7 @@ ol.source.TileWMS.prototype.tileUrlFunction_ = ol.source.TileWMS.prototype.updateParams = function(params) { goog.object.extend(this.params_, params); this.resetCoordKeyPrefix_(); + this.resetParamsKey_(); this.updateV13_(); this.changed(); };