[OpenLayers-Users] basic WMST/TimeManager questions

Dave Welchons welchons at brsc.com
Tue Jun 5 07:06:17 PDT 2012


Hi All,

I am new to OpenLayers, but I have read the intro book "OpenLayers Beginners
Guide."  This is a pretty wordy email, so sorry about any inconvenience to
readers.  But I have a number of questions.  I am looking into the
possibility of an application that displays time-tagged geo points on a map,
and then stores the data for later playback.  

 

I saw  an example which displayed map raster and vector data over a period
of time at
http://dev.openlayers.org/sandbox/mpriour/temporal_map/openlayers/examples/t
ime-control.html   

 

This example seemed different from the examples in the "Beginner's Guide",
since the vector data (layer storm_wms in the code shown below, which shows
a graphical representation of the eye of the Hurricane and the winds around
it) was not created in the client-side OpenLayers code, but rather obtained
from a WMS (raster?) layer.

 

Here are my questions: 

1.       This example uses the OpenLayers.Control.TimeManager capability to
step all the data sources through time.  But this TimeManager functionality
does not seem to be in the OpenLayers version which I downloaded recently
(2.11).  I notice that the path for the time-control.html link above
includes the word "sandbox".  For software projects should one stay with the
official OpenLayers download for applications rather than using code from a
sandbox?

2.       How does one convert vector data to raster data using OpenLayers?
Can this be done in real time, for example if some point data was received
at various times, and one wanted to save it for playback later?

3.       How does one save the raster data with time tags, so that it can be
accessed as it is done here for a specific time?  In these examples the data
is accessed via OpenLayers.Layer.WMS, but if one wanted to save ones own
data, are there directions for how to save time-stamped data like this
(would it be in some kind of dated directory structure, or in a database
with time as key?).  How is it done at these web sites?   I looked at
http://mesonet.agron.iastate.edu/docs/nexrad_composites/  and I found this
info below, but I was hoping for more detailed step-by-step directions.

 

Thanks,

 

Dave Welchons

 

 

 

Info from http://mesonet.agron.iastate.edu/docs/nexrad_composites/ :


Web Map Service (WMS)


A special way you can interface with this data archive is via the Web Map
Service that also supports time based retrieval (
<http://www.opengeospatial.org/standards/wms> WMS-T). Point your WMS-T aware
app at: 
http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r-t.cgi? 
The nexrad-n0r-wmst layer is time aware!

 

 

 

time-control.html :

 

 

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=0">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <title>OpenLayers: WMS + Time</title>

    <link rel="stylesheet" href="../theme/default/style.css"
type="text/css">

    <link rel="stylesheet" href="style.css" type="text/css">

    <style>

        .tallmap{

            width: 700px;

            height: 500px;

            border: 1px solid #ccc;

        }

    </style>

    <script src="../lib/OpenLayers.js"></script>

    <script type="text/javascript">

        var map, pts_wms, line_wms, radii_wms, osm;

        function init(){

            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-18T12:00:00.000Z').toISOString();


 

            storm_wms = new OpenLayers.Layer.WMS("Irene Eye & Storm Winds",

            "http://mapstory.demo.opengeo.org:8080/geoserver/wms", {

                                                                layers:
"irene_11_pts,irene_11_radii",

                                                                transparent:
true,

                                                                format:
'image/png',

 
srs:'EPSG:900913',

                time:startTime

                                                },{

                                                                metadata: {

                    timeInterval: 

 
['2011-08-18T12: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-18T12: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

        });

                                                

                                timeCtl = new
OpenLayers.Control.TimeManager({

 
units:OpenLayers.TimeUnit.HOURS,

                                                step:6,

                                                frameRate:0.85

                                });

                                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,ia_wms,line_wms,storm_wms]);

        map.zoomToExtent(new
OpenLayers.Bounds(-8627260.535278,1425478.519205,-3729202.941056,5496444.989
113));

                                update_date({

                                                object: timeCtl,

                                                currentTime:
timeCtl.currentTime

                                });

    }

        function update_date(evt) {

            var time = this.currentTime||evt.currentTime;

                    OpenLayers.Util.getElement('timestamp').innerHTML =
time.toString();

        }

    </script>

  </head>

  <body onload="init()">

     <h1 id="title"> WMS Time Example - Hurricane Irene Aug 2011</h1>

        <div id="tags">

            wmst, wms-t

        </div>

        <p id="shortdesc">

            Shows the use of the TimeManager control with a single simple
WMS-T (time) layer served from Geoserver<br>

                                                Click on the PLAY button to
start.

        </p>

                <h2 id="timestamp"></h2>   

                <div>

                                <button type="button"
onclick="timeCtl.loop=false;timeCtl.stop()">Stop</button>

                                 | <button type="button"
onclick="timeCtl.reset()">Reset</button>

                                 | <button type="button"
onclick="timeCtl.loop=true;timeCtl.play()">Loop</button>

                                 | <button type="button"
onclick="timeCtl.tick()">Step</button>

                                 | <button type="button"
onclick="timeCtl.play()">Play</button>

                </div>

    <div id="map" class="tallmap"></div>

    <div id="docs">

        <p>Time Control example: hit PLAY, and the storm position will
change along with the<br>

                                time display. Uses the
OpenLayers.Control.TimeManager to update the date<br>

                                elements with the time of the animation.
Starts at Aug 17, 2011 and continues until

        Aug 29, 2011 or until you stop it</p>

    </div>

  </body>

</html>

 

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.osgeo.org/pipermail/openlayers-users/attachments/20120605/4c001db7/attachment-0001.html>


More information about the Users mailing list