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"
+---
+
+
+ Play
+ Pause
+
+
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 9d6b057bd2..48fb3b3c44 100644
--- a/src/ol/source/tilewmssource.js
+++ b/src/ol/source/tilewmssource.js
@@ -63,6 +63,13 @@ ol.source.TileWMS = function(opt_options) {
*/
this.params_ = params;
+ /**
+ * @private
+ * @type {string}
+ */
+ this.paramsKey_ = '';
+ this.resetParamsKey_();
+
/**
* @private
* @type {boolean}
@@ -175,6 +182,14 @@ ol.source.TileWMS.prototype.getGutter = function() {
};
+/**
+ * @inheritDoc
+ */
+ol.source.TileWMS.prototype.getKeyParams = function() {
+ return this.paramsKey_;
+};
+
+
/**
* @inheritDoc
*/
@@ -290,12 +305,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('/');
};
@@ -355,6 +378,7 @@ ol.source.TileWMS.prototype.fixedTileUrlFunction = function(tileCoord, pixelRati
ol.source.TileWMS.prototype.updateParams = function(params) {
goog.object.extend(this.params_, params);
this.resetCoordKeyPrefix_();
+ this.resetParamsKey_();
this.updateV13_();
this.changed();
};