[OpenLayers-Commits] r12345 - in sandbox/mpriour/temporal_map/openlayers: examples lib/OpenLayers lib/OpenLayers/Control lib/OpenLayers/TimeHandler

commits-20090109 at openlayers.org commits-20090109 at openlayers.org
Thu Sep 8 06:15:50 EDT 2011


Author: mpriour
Date: 2011-09-08 03:15:49 -0700 (Thu, 08 Sep 2011)
New Revision: 12345

Modified:
   sandbox/mpriour/temporal_map/openlayers/examples/time-control.html
   sandbox/mpriour/temporal_map/openlayers/examples/wmst.html
   sandbox/mpriour/temporal_map/openlayers/lib/OpenLayers/Control/TimeManager.js
   sandbox/mpriour/temporal_map/openlayers/lib/OpenLayers/TimeHandler.js
   sandbox/mpriour/temporal_map/openlayers/lib/OpenLayers/TimeHandler/WMS.js
Log:
- Create more complex time-control.html example with multiple temporal layers.
- Modify TimeManager.js & the TimeHandlers classes to better deal with this level of complexity
- Modify TimeManager.js to handle when it's child time handlers are not ready to tick forward. Control checks for 2 full frameRate cycles (2 x seconds/tick) at 1/4 framerate cycle intervals (0.25 * seconds/tick). After 8 checks, it gives up and fires the tick event anyway due to time constraints. This yeilds reasonable smoothness with waiting forever.

Modified: sandbox/mpriour/temporal_map/openlayers/examples/time-control.html
===================================================================
--- sandbox/mpriour/temporal_map/openlayers/examples/time-control.html	2011-09-08 10:08:35 UTC (rev 12344)
+++ sandbox/mpriour/temporal_map/openlayers/examples/time-control.html	2011-09-08 10:15:49 UTC (rev 12345)
@@ -18,67 +18,116 @@
     <script type="text/javascript">
         var map, pts_wms, line_wms, radii_wms, osm;
         function init(){
-            map = new OpenLayers.Map('map',{allOverlays:false});
+            osm = new OpenLayers.Layer.OSM();
+            
+            map = new OpenLayers.Map('map', {
+                allOverlays: false,
+                projection: 'EPSG:900913',
+                maxExtent: osm.maxExtent.clone(),
+                maxResolution: osm.maxResolution
+            });
+            
+            startTime = OpenLayers.Date.parse('2011-08-17T12:00:00.000Z').toISOString();			
 
-            osm = new OpenLayers.Layer.OSM();			
-
             pts_wms = new OpenLayers.Layer.WMS("Irene Centroid",
             "http://mapstory.demo.opengeo.org:8080/geoserver/wms", {
-				layers: "irene_11_pts,irene_11_radii",
+				layers: "irene_11_pts",
 				transparent: true,
 				format: 'image/png',
-				time:OpenLayers.Date.toISOString(OpenLayers.Date.parse('2011-08-17T12:00:00Z')),
-				srs:'EPSG:900913'
+				srs:'EPSG:900913',
+                time:startTime
 			},{
 				metadata: {
                     timeInterval: 
-                        [OpenLayers.Date.parse('2011-08-17T12:00:00Z'), OpenLayers.Date.parse('2011-08-29T00:00:00Z')]
+                        ['2011-08-17T12:00:00.000Z','2011-08-17T18:00:00.000Z','2011-08-18T00:00:00.000Z',
+                        '2011-08-18T06:00:00.000Z','2011-08-18T12:00:00.000Z','2011-08-18T18:00:00.000Z',
+                        '2011-08-19T00:00:00.000Z','2011-08-19T06:00:00.000Z','2011-08-19T12:00:00.000Z',
+                        '2011-08-19T18:00:00.000Z','2011-08-20T00:00:00.000Z','2011-08-20T06:00:00.000Z',
+                        '2011-08-20T12:00:00.000Z','2011-08-20T18:00:00.000Z','2011-08-21T00:00:00.000Z',
+                        '2011-08-21T06:00:00.000Z','2011-08-21T12:00:00.000Z','2011-08-21T18:00:00.000Z',
+                        '2011-08-22T00:00:00.000Z','2011-08-22T06:00:00.000Z','2011-08-22T12:00:00.000Z',
+                        '2011-08-22T18:00:00.000Z','2011-08-23T00:00:00.000Z','2011-08-23T06:00:00.000Z',
+                        '2011-08-23T12:00:00.000Z','2011-08-23T18:00:00.000Z','2011-08-24T00:00:00.000Z',
+                        '2011-08-24T06:00:00.000Z','2011-08-24T12:00:00.000Z','2011-08-24T18:00:00.000Z',
+                        '2011-08-25T00:00:00.000Z','2011-08-25T06:00:00.000Z','2011-08-25T12:00:00.000Z',
+                        '2011-08-25T18:00:00.000Z','2011-08-26T00:00:00.000Z','2011-08-26T06:00:00.000Z',
+                        '2011-08-26T12:00:00.000Z','2011-08-26T18:00:00.000Z','2011-08-27T00:00:00.000Z',
+                        '2011-08-27T06:00:00.000Z','2011-08-27T12:00:00.000Z','2011-08-27T18:00:00.000Z',
+                        '2011-08-28T00:00:00.000Z','2011-08-28T06:00:00.000Z','2011-08-28T12:00:00.000Z',
+                        '2011-08-28T18:00:00.000Z','2011-08-29T00:00:00.000Z']
                 },
-                singleTile:true,
-                ratio:1,
-                transitionEffect:'resize',
-		visibility:true,
-		projection:'EPSG:900913',
-		maxExtent:osm.maxExtent.clone(),
-		maxResolution:osm.maxResolution
+            singleTile:true,
+            ratio:1,
+            transitionEffect:'resize',
+    		visibility:true
 		});
+
+		radii_wms = new OpenLayers.Layer.WMS("Irene Storm Winds", "http://mapstory.demo.opengeo.org:8080/geoserver/wms", {
+            layers: "irene_11_radii",
+            transparent: true,
+            format: 'image/png',
+            srs: 'EPSG:900913',
+            time:startTime
+        }, {
+            metadata: {
+                timeInterval: ['2011-08-17T12:00:00.000Z', '2011-08-29T00:00:00.000Z']
+            },
+            singleTile: true,
+            ratio: 1,
+            transitionEffect: 'resize',
+            visibility: true
+        });
+        
+        ia_wms = new OpenLayers.Layer.WMS("Nexrad", "http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r-t.cgi?", {
+            layers: "nexrad-n0r-wmst",
+            transparent: true,
+            format: 'image/png',
+            time:startTime
+        }, {
+            metadata: {
+                timeInterval: ['2011-08-17T12:00:00.000Z', '2011-08-29T00:00:00.000Z']
+            },
+            singleTile: true,
+            ratio: 1,
+            transitionEffect: 'resize',
+            visibility: true
+        });
+        
+        line_wms = new OpenLayers.Layer.WMS("Irene Storm Track", "http://mapstory.demo.opengeo.org:8080/geoserver/wms", {
+            layers: "irene_11_lin",
+            transparent: true,
+            format: 'image/png',
+            srs: 'EPSG:900913'
+        }, {
+            singleTile: true,
+            ratio: 1,
+            transitionEffect: 'resize',
+            visibility: true
+        });
 			
-            line_wms = new OpenLayers.Layer.WMS("Irene Storm Track",
-            "http://mapstory.demo.opengeo.org:8080/geoserver/wms", {
-				layers: "irene_11_lin",
-				transparent: true,
-				format: 'image/png',
-				srs:'EPSG:900913'
-			},{
-                singleTile:true,
-                ratio:1,
-                transitionEffect:'resize',
-		visibility:true,
-		projection:'EPSG:900913',
-		maxExtent:osm.maxExtent.clone(),
-		maxResolution:osm.maxResolution
+		timeCtl = new OpenLayers.Control.TimeManager({
+			units:OpenLayers.TimeUnit.HOURS,
+			step:6,
+			frameRate:1.2,
+            handlerOptions:{
+                WMS:{intervalMode:'exact'}
+            }
 		});
-			
-			timeCtl = new OpenLayers.Control.TimeManager({
-				units:OpenLayers.TimeUnit.HOURS,
-				step:6,
-				frameRate:1.3
-			});
-			timeCtl.events.on({
-				'tick': update_date,
-				'reset': update_date,
-				'stop':timeCtl.reset,
-				scope: timeCtl
-			});
+		timeCtl.events.on({
+			'tick': update_date,
+			'reset': update_date,
+			'stop': function(evt){if (evt.rangeExceeded) timeCtl.reset()},
+			scope: timeCtl
+		});
 
-            map.addControls([timeCtl,new OpenLayers.Control.LayerSwitcher()]);
-            map.addLayers([osm,line_wms, pts_wms]);
-            map.zoomToExtent(new OpenLayers.Bounds(-8627260.535278,1425478.519205,-3729202.941056,5496444.989113));
-			update_date({
-				object: timeCtl,
-				currentTime: timeCtl.currentTime
-			});
-        }
+        map.addControls([timeCtl,new OpenLayers.Control.LayerSwitcher()]);
+        map.addLayers([osm,ia_wms,line_wms,pts_wms,radii_wms]);
+        map.zoomToExtent(new OpenLayers.Bounds(-8627260.535278,1425478.519205,-3729202.941056,5496444.989113));
+		update_date({
+			object: timeCtl,
+			currentTime: timeCtl.currentTime
+		});
+    }
         function update_date(evt) {
             var time = this.currentTime||evt.currentTime;
 	    OpenLayers.Util.getElement('timestamp').innerHTML = time.toString();

Modified: sandbox/mpriour/temporal_map/openlayers/examples/wmst.html
===================================================================
--- sandbox/mpriour/temporal_map/openlayers/examples/wmst.html	2011-09-08 10:08:35 UTC (rev 12344)
+++ sandbox/mpriour/temporal_map/openlayers/examples/wmst.html	2011-09-08 10:15:49 UTC (rev 12345)
@@ -14,7 +14,8 @@
             
             timeCtl = new OpenLayers.Control.TimeManager({
                 step: 5,
-                units: OpenLayers.TimeUnit.MINUTES
+                units: OpenLayers.TimeUnit.MINUTES,
+                frameRate:1.5
             });
             map = new OpenLayers.Map('map');
             map.addControl(timeCtl);

Modified: sandbox/mpriour/temporal_map/openlayers/lib/OpenLayers/Control/TimeManager.js
===================================================================
--- sandbox/mpriour/temporal_map/openlayers/lib/OpenLayers/Control/TimeManager.js	2011-09-08 10:08:35 UTC (rev 12344)
+++ sandbox/mpriour/temporal_map/openlayers/lib/OpenLayers/Control/TimeManager.js	2011-09-08 10:15:49 UTC (rev 12345)
@@ -136,7 +136,7 @@
 				var interval = this.intervals[i];
 				if(!(interval[i] instanceof Date))this.intervals[i]=OpenLayers.Date.parse(interval);
 			}
-            this.intervals.sort(function(a,b){return b-a});
+            this.intervals.sort(function(a,b){return a-b});
 			this.range=[this.intervals[0],this.intervals[this.intervals.length-1]];
             this.fixedIntervals=true;
 		}else if(this.range){
@@ -228,7 +228,10 @@
                     this.intervals || (this.intervals = []);
                     this.intervals = this.getUniqueDates(this.intervals.concat(lyrIntervals));
                     //adjust range as needed
-                    if(this.intervals[0]<this.range[0]||this.intervals[1]>this.range[1]){
+                    if(!this.range){
+                        this.setRange([this.intervals[0],this.intervals[this.intervals.length-1]])
+                    }
+                    else if(this.intervals[0]<this.range[0]||this.intervals[1]>this.range[1]){
                         this.setRange([Math.min(this.intervals[0],this.range[0]),Math.max(this.intervals[1],this.range[1])])
                     }
                 }
@@ -308,18 +311,19 @@
 			}
 		}
 		else {
-            function canTickCheck(){
-                var canTick = false;
-                for (var i = 0, len = this.timeHandlers.length; i < len; i++) {
-                    canTick = this.timeHandlers[i].canTick;
-                    if (!canTick) break;
-                }
-                return canTick;
-            }
-            if (canTickCheck.call(this)) {
+            
+            if (this.canTickCheck()) {
                 this.events.triggerEvent('tick', {currentTime: this.currentTime});
             }else{
-                //TODO: Handle not yet ready timeHandlers & don't tick until we're ready
+                var intervalId,checkCount = 0;
+                intervalId = setInterval(OpenLayers.Function.bind(function(){
+                    var doTick = this.canTickCheck() || checkCount++ >= 8
+                    if(checkCount>8){console.log('ADVANCED DUE TO TIME LIMIT')}
+                    if (doTick) {
+                        clearInterval(intervalId);
+                        this.events.triggerEvent('tick', {currentTime: this.currentTime});
+                    }
+                },this),1000/(this.frameRate*4))
             }
 		}
 	},
@@ -476,10 +480,12 @@
 		}
 		//create subclassed time handlers
 		for(var k in layerTypes){
-			var handler = new OpenLayers.TimeHandler[k]({
+			var handlerOpts = {
                 layers: layerTypes[k],
                 timeManager: this
-            });
+            };
+            if(this.handlerOptions&&this.handlerOptions[k]){OpenLayers.Util.applyDefaults(handlerOpts,this.handlerOptions[k])}
+            var handler = new OpenLayers.TimeHandler[k](handlerOpts);
 			this.events.on({
 				'tick': handler.onTick,
 				scope: handler
@@ -532,9 +538,7 @@
     },
     getUniqueDates:function(dates){
         //sort the times
-        dates.sort(function(a, b){
-            return b - a;
-        });
+        dates.sort(function(a, b){return a - b;});
         //filter for unique
         dates = OpenLayers.Array.filter(dates, function(item, index, array){
             for (var i = index + 1; i < array.length; i++) {
@@ -545,7 +549,15 @@
             return true;
         });
         return dates
-    },    
+    },
+    canTickCheck: function(){
+        var canTick = false;
+        for (var i = 0, len = this.timeHandlers.length; i < len; i++) {
+            canTick = this.timeHandlers[i].canTick;
+            if (!canTick) break;
+        }
+        return canTick;
+    },
 	CLASS_NAME:'OpenLayers.Control.TimeManager'
 });
 

Modified: sandbox/mpriour/temporal_map/openlayers/lib/OpenLayers/TimeHandler/WMS.js
===================================================================
--- sandbox/mpriour/temporal_map/openlayers/lib/OpenLayers/TimeHandler/WMS.js	2011-09-08 10:08:35 UTC (rev 12344)
+++ sandbox/mpriour/temporal_map/openlayers/lib/OpenLayers/TimeHandler/WMS.js	2011-09-08 10:15:49 UTC (rev 12345)
@@ -42,19 +42,62 @@
      */
 	initialize:function(options){
 		OpenLayers.TimeHandler.prototype.initialize.call(this,options);
+        //add layer loadend listeners
+        if (this.layers) {
+            for (var i = 0, len = this.layers.length; i < len; i++) {
+                this.layers[i].events.on({
+                    'loadend': this.onLayerLoadEnd,
+                    'loadstart': this.onLayerLoadStart,
+                    scope: this
+                })
+            }
+        }
 	},
 	
+    addLayer:function(layer){
+        OpenLayers.TimeHandler.prototype.addLayer.call(this,layer);
+        layer.events.on({
+            'loadend': this.onLayerLoadEnd,
+            'loadstart': this.onLayerLoadStart,
+            scope: this
+        })
+    },
+    removeLayer:function(layer){
+        OpenLayers.TimeHandler.prototype.removeLayer.call(this,layer);
+        layer.events.un({
+            'loadend': this.onLayerLoadEnd,
+            'loadstart': this.onLayerLoadStart,
+            scope: this
+        })
+    },
+    destroy:function(){
+        for (var i = 0, len = this.layers.length; i < len; i++) {
+            this.layers[i].events.un({
+                'loadend': this.onLayerLoadEnd,
+                'loadstart': this.onLayerLoadStart,
+                scope: this
+            })
+        }
+        OpenLayers.TimeHandler.prototype.destroy.call(this);
+    },
+    
 	onTick:function(evt){
 		this.currentTime = evt.currentTime || this.timeManager.currentTime;
-		if(this.currentTime<=this.range[1] && this.currentTime>=this.range[0]){
-			for(var i=0,len=this.layers.length;i<len;i++){
-				this.applyTime(this.layers[i],this.currentTime);
-			}
-		}else{
-			for(var i=0,len=this.layers.length;i<len;i++){
-				layers[i].setVisibility(false);
-			}
-		}
+        console.log('CurrentTime:'+this.currentTime.toTimeString());
+		var inrange = this.currentTime <= this.range[1] && this.currentTime >= this.range[0];
+        if (inrange) {
+            this.loadQueue = OpenLayers.Array.filter(this.layers, function(lyr){return lyr.visibility}).length;
+            this.canTick = !this.loadQueue;
+            console.log('canTick:FALSE\nQueueCount:' + this.loadQueue)
+        }
+        for (var i = 0, len = this.layers.length; i < len; i++) {
+            if (inrange) {
+                this.applyTime(this.layers[i], this.currentTime);
+            }
+            else {
+                this.layers[i].setVisibility(false);
+            }
+        }
 	},
 	
 	applyTime:function(layer,time){
@@ -67,5 +110,13 @@
 		}
 	},
 	
+    onLayerLoadEnd: function(){
+        this.loadQueue--;
+        console.log('QueueCount:'+this.loadQueue)
+        if (this.loadQueue <= 0) {this.canTick = true; console.log('canTick:TRUE')}
+    },
+    onLayerLoadStart: function(){
+        //this.loadQueue=(!this.loadQueue && this.loadQueue!==0)?0:this.loadQueue++
+    },
 	CLASS_NAME:'OpenLayers.TimeHandler.WMS'
 });
\ No newline at end of file

Modified: sandbox/mpriour/temporal_map/openlayers/lib/OpenLayers/TimeHandler.js
===================================================================
--- sandbox/mpriour/temporal_map/openlayers/lib/OpenLayers/TimeHandler.js	2011-09-08 10:08:35 UTC (rev 12344)
+++ sandbox/mpriour/temporal_map/openlayers/lib/OpenLayers/TimeHandler.js	2011-09-08 10:15:49 UTC (rev 12345)
@@ -62,7 +62,11 @@
             this.intervals = timeConfig.intervals;
         }
 	},
-	
+	destroy:function(){
+        this.events.destroy();
+        this.timeManager.events.unregister('tick',this.timeManager,this.onTick);
+        this.timeManager = this.layers = this.range = this.intervals = null;
+    },
 	onTick:function(){
         //Implemented By Subclasses
     },
@@ -121,8 +125,9 @@
 		}
 		if(intervals.length){
             intervals = this.timeManager.getUniqueDates(intervals);
+            var last = intervals.length-1;
             if (!range[0] || intervals[0] < range[0]) {range[0] = intervals[0];}
-			if (!range[1] || intervals[1] > range[1]) {range[1] = intervals[1];}
+			if (!range[1] || intervals[last] > range[1]) {range[1] = intervals[last];}
 		}else{
             intervals=null;
         }



More information about the Commits mailing list