ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Show NEXRAD data in WMS Time example

Browse Source
This commit is contained in:
Andreas Hocevar
2016-09-16 19:40:09 +02:00
parent 49e2e55063
commit a88f150c4b
2 changed files with 28 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
examples/wms-time.html
View File

@@ -3,8 +3,8 @@ layout: example.html
title: WMS Time title: WMS Time
shortdesc: Example of smooth tile transitions when changing the time dimension of a tiled WMS layer. shortdesc: Example of smooth tile transitions when changing the time dimension of a tiled WMS layer.
docs: > docs: >
Demonstrates smooth reloading of layers when changing the time dimension continously. Demonstrates smooth reloading of layers when changing the time dimension continously. Data shown: IEM generated CONUS composite of NWS NEXRAD WSR-88D level III base reflectivity.
tags: "wms, time, dimensions, transition" tags: "wms, time, dimensions, transition, nexrad"
--- ---
<div id="map" class="map"></div> <div id="map" class="map"></div>
<div role="group" aria-label="Animation controls"> <div role="group" aria-label="Animation controls">

39
examples/wms-time.js
View File

@@ -1,23 +1,32 @@
goog.require('ol.Map'); goog.require('ol.Map');
goog.require('ol.View'); goog.require('ol.View');
goog.require('ol.extent');
goog.require('ol.layer.Tile'); goog.require('ol.layer.Tile');
goog.require('ol.source.OSM'); goog.require('ol.proj');
goog.require('ol.source.Stamen');
goog.require('ol.source.TileWMS'); goog.require('ol.source.TileWMS');
var startDate = new Date(Date.parse('2012-01-01T19:00:00Z')); function threeHoursAgo() {
return new Date(Math.round(Date.now() / 3600000) * 3600000 - 3600000 * 3);
}
var extent = ol.proj.transformExtent([-126, 24, -66, 50], 'EPSG:4326', 'EPSG:3857');
var startDate = threeHoursAgo();
var frameRate = 0.5; // frames per second var frameRate = 0.5; // frames per second
var animationId = null; var animationId = null;
var layers = [ var layers = [
new ol.layer.Tile({ new ol.layer.Tile({
source: new ol.source.OSM() source: new ol.source.Stamen({
layer: 'terrain'
})
}), }),
new ol.layer.Tile({ new ol.layer.Tile({
extent: [-13884991, 2870341, -7455066, 6338219], extent: extent,
source: new ol.source.TileWMS(/** @type {olx.source.TileWMSOptions} */ ({ source: new ol.source.TileWMS(/** @type {olx.source.TileWMSOptions} */ ({
url: 'http://oos.soest.hawaii.edu/thredds/wms/hioos/model/wav/ww3/' + attributions: ['Iowa State University'],
'WaveWatch_III_Global_Wave_Model_best.ncd?', url: 'http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r-t.cgi',
params: {'LAYERS': 'Thgt', 'TIME': startDate.toISOString()} params: {'LAYERS': 'nexrad-n0r-wmst'}
})) }))
}) })
]; ];
@@ -25,21 +34,25 @@ var map = new ol.Map({
layers: layers, layers: layers,
target: 'map', target: 'map',
view: new ol.View({ view: new ol.View({
center: [-10997148, 4569099], center: ol.extent.getCenter(extent),
zoom: 4 zoom: 4
}) })
}); });
var updateInfo = function() { function updateInfo() {
var el = document.getElementById('info'); var el = document.getElementById('info');
el.innerHTML = startDate.toISOString(); el.innerHTML = startDate.toISOString();
}; }
var setTime = function() { function setTime() {
startDate.setHours(startDate.getHours() + 1); startDate.setMinutes(startDate.getMinutes() + 15);
if (startDate > Date.now()) {
startDate = threeHoursAgo();
}
layers[1].getSource().updateParams({'TIME': startDate.toISOString()}); layers[1].getSource().updateParams({'TIME': startDate.toISOString()});
updateInfo(); updateInfo();
}; }
setTime();
var stop = function() { var stop = function() {
if (animationId !== null) { if (animationId !== null) {