Commit f1b50c38 authored by Soeren Laursen's avatar Soeren Laursen

Updated code to handle time dimension and requests with two

layers for example "layer1,layer2".
parent 62341bcb
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="da" style="font-size: 100%">
<head>
<title>L.TimeDimension.layer.weather - Demo</title>
<meta charset="utf-8" />
<title>L.TimeDimension.layer.weather - Demo</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv='x-dns-prefetch-control' content='on'>
<meta name='copyright' content='STW'>
<meta name='owner' content='STW'>
<meta name='copyright' content='STW'>
<meta name='owner' content='STW'>
<!-- bower:css -->
<link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
<link rel="stylesheet" href="../bower_components/leaflet-timedimension/dist/leaflet.timedimension.control.css" />
<!-- endbower -->
<!-- bower:css -->
<link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
<link rel="stylesheet" href="../bower_components/leaflet-timedimension/dist/leaflet.timedimension.control.css" />
<!-- endbower -->
</head>
<body>
<div id="map" style="width: 800px; height: 600px"></div>
<!-- bower:js -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/leaflet/dist/leaflet-src.js"></script>
<script src="../bower_components/iso8601-js-period/iso8601.min.js"></script>
<script src="../bower_components/leaflet-timedimension/dist/leaflet.timedimension.src.js"></script>
<script src="../bower_components/reqwest/reqwest.js"></script>
<script src="../bower_components/moment/moment.js"></script>
<script src="../src/L.TimeDimension.layer.wms.FCOO.js"></script>
<script src="../src/L.TimeDimension.layer.wms.picasso.js"></script>
<!-- endbower -->
<script>
var map = L.map('map', {
timeDimension: true,
timeDimensionControl: true
}).setView([ 58.5, 19.0 ], 5);
var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom : 18,
attribution : '&copy; <a href="http://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors</a>'
}).addTo(map);
var baseLayers = {
"Open Street Map": osm
};
// SMHI
var smhiWMSLayer = L.tileLayer.wms('http://wts.smhi.se/tile/', {
layers: "NEMO:NS02_oceancurrentspeed_arrows_neurope_",
transparent: true,
crs: L.CRS.EPSG900913,
format: 'image/png',
attribution: 'Current forecasts from <a href="http://www.smhi.se" alt="Swedish Meteorological Hydrological Institute">SMHI</a>'
});
var smhiWeatherLayer = L.timeDimension.layer.wms.picasso(smhiWMSLayer, {
proxy: 'proxy',
<div id="map" style="width: 800px; height: 600px"></div>
<!-- bower:js -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/leaflet/dist/leaflet-src.js"></script>
<script src="../bower_components/iso8601-js-period/iso8601.min.js"></script>
<script src="../bower_components/leaflet-timedimension/dist/leaflet.timedimension.src.js"></script>
<script src="../bower_components/reqwest/reqwest.js"></script>
<script src="../bower_components/moment/moment.js"></script>
<script src="../src/L.TimeDimension.layer.wms.FCOO.js"></script>
<script src="../src/L.TimeDimension.layer.wms.picasso.js"></script>
<!-- endbower -->
<script>
var map = L.map('map', {
timeDimension: true,
timeDimensionControl: true
}).setView([ 58.5, 19.0 ], 5);
var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom : 18,
attribution : '&copy; <a href="http://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors</a>'
}).addTo(map);
var baseLayers = {
"Open Street Map": osm
};
// SMHI
var smhiWMSLayer = L.tileLayer.wms('http://wts.smhi.se/tile/', {
layers: "NEMO:NS02_oceancurrentspeed_arrows_neurope_",
transparent: true,
crs: L.CRS.EPSG900913,
format: 'image/png',
attribution: 'Current forecasts from <a href="http://www.smhi.se" alt="Swedish Meteorological Hydrological Institute">SMHI</a>'
});
var smhiWeatherLayer = L.timeDimension.layer.wms.picasso(smhiWMSLayer, {
proxy: 'proxy',
cache: 50
});
// FCOO
var fcooWMSLayer = L.tileLayer.wms('https://wms03.fcoo.dk/webmap/ECMWF/DXD/MAPS_ECMWF_DXD_DENMARK.nc.wms', {
layers: "windspeed",
transparent: true,
cmap: "Wind_ms_BGYRP_11colors",
crs: L.CRS.EPSG900913,
format: 'image/png',
attribution: 'Current forecasts from <a href="http://www.fcoo.dk">Marine Forecast Denmark</a>'
});
var fcooWeatherLayer = L.timeDimension.layer.wms.FCOO(fcooWMSLayer, {
proxy: 'proxy',
});
// FCOO - The next version of our WMS edition running WMS version 1.3.0.
var FCOOWindGLWMSLayer = L.tileLayer.wms('https://wms.fcoo.dk/webmap/v2/data/DMI/HIRLAM/MAPS_DMI_K05_v005C.nc.wms', {
layers: "UGRD:VGRD",
transparent: 'TRUE',
version: "1.3.0",
//cmap: "Wind_ms_BGYRP_11colors",
styles: 'plot_method=black_arrowbarbs;vector_spacing=80;vector_offset=20',
CRS: 'EPSG:3857',
format: 'image/png',
attribution: 'Current forecasts from <a href="http://www.fcoo.dk">Marine Forecast Denmark</a>'
});
var FCOOWindGLLayer = L.timeDimension.layer.wms.FCOO(FCOOWindGLWMSLayer, {
proxy: 'proxy',
cache: 50
});
});
var FCOOCurrentHELCOMWMSLayer = L.tileLayer.wms('https://wms.fcoo.dk/webmap/v2/data/FCOO/GETM/nsbalt_nested.velocities.nc.wms', {
layers: "uu_vv_nsbalt,uu_vv_idk",
transparent: 'TRUE',
version: "1.3.0",
//cmap: "Wind_ms_BGYRP_11colors",
//styles: 'plot_method=black_arrowbarbs;vector_spacing=80;vector_offset=20',
CRS: 'EPSG:3857',
format: 'image/png',
attribution: 'Current forecasts from <a href="http://www.fcoo.dk">Marine Forecast Denmark</a>'
});
var FCOOCurrentHELCOMLayer = L.timeDimension.layer.wms.FCOO(FCOOCurrentHELCOMWMSLayer, {
proxy: 'proxy',
cache: 50
});
map.on('layeradd', function(layer, layername){
map.timeDimension.prepareNextTimes(1,10, false);
});
map.on('layeradd', function(layer, layername){
map.timeDimension.prepareNextTimes(1,10, false);
});
var overlays = {
"SMHI Current arrows with speed": smhiWeatherLayer,
"FCOO Current speed in HELCOM": FCOOCurrentHELCOMLayer,
"FCOO Wind barbs for GL": FCOOWindGLLayer
};
var overlays = {
"SMHI Current arrows with speed": smhiWeatherLayer,
"FCOO Current arrows with speed": fcooWeatherLayer
};
L.control.layers(baseLayers, overlays).addTo(map);
L.control.layers(baseLayers, overlays).addTo(map);
// reqwest({
// url: "meta",
// method: 'get',
// type: 'json',
// success: function (data) {
// console.log(data);
// }
// });
// reqwest({
// url: "meta",
// method: 'get',
// type: 'json',
// success: function (data) {
// console.log(data);
// }
// });
// var imageUrl = 'D:/stw/OceanRasterPlot/SeaSurfaceCurrentVelocity/SeaSurfaceCurrentVelocity_201704220000Z_0H.png',
// imageBounds = [[48.492, -4.102], [65.908, 30.158]];
// var imageUrl = 'D:/stw/OceanRasterPlot/SeaSurfaceCurrentVelocity/SeaSurfaceCurrentVelocity_201704220000Z_0H.png',
// imageBounds = [[48.492, -4.102], [65.908, 30.158]];
// L.imageOverlay(imageUrl, imageBounds).addTo(map);
// L.imageOverlay(imageUrl, imageBounds).addTo(map);
// var weatherLayer = L.timeDimension.layer.img.nemo('D:/stw/OceanRasterPlot', {
// proxy: 'proxy',
// var weatherLayer = L.timeDimension.layer.img.nemo('D:/stw/OceanRasterPlot', {
// proxy: 'proxy',
// cache: 10
// });
</script>
</script>
</body>
</html>
</html>
\ No newline at end of file
......@@ -18,8 +18,7 @@ L.TimeDimension.Layer.WMS.FCOO = L.TimeDimension.Layer.WMS.extend({
url = url + L.Util.getParamString(params, url, params.uppercase);
return url;
},
_requestTimeDimensionFromCapabilities: function() {
if (this._capabilitiesRequested) {
return;
......@@ -30,25 +29,23 @@ L.TimeDimension.Layer.WMS.FCOO = L.TimeDimension.Layer.WMS.extend({
this._defaultTime = 0;
this._refTime = this._getRefTimeFromCapabilities(data);
this._setDefaultTime = this._setDefaultTime || (this._timeDimension && this._timeDimension.getAvailableTimes().length == 0);
// Get the string containing the time dimension:
// 2017-12-06T06:00:00Z,2017-12-06T07:00:00Z,2017-12-06T08:00:00Z, .....
var timeString = this._parseTimesFromCapabilities(data);
// Split it on ',' to get the timesteps in an array.
var timeperiods = timeString.split(',');
var times = [];
// We do not need to iterate at the moment.
// for (var i = 0; i < timeperiods.length;i++) {
// var timeperiod = timeperiods[i].split('/');
// A small fix to add Z until the FCOO WMS service add it to all timestamps.
timeperiods[0] = timeperiods[0]+ "Z";
timeperiods[timeperiods.length-1] = timeperiods[timeperiods.length-1] + "Z"
// Recommandations of the standard does not say in which order the different
// "timestep" can be in, so any order is possible.
// We take the first and the last timestamp
var startDate = moment(timeperiods[0], 'YYYY-MM-DDTHH:mm:SSZ');
var endDate = moment(timeperiods[timeperiods.length-1], 'YYYY-MM-DDTHH:mm:SSZ');
var hours = moment.duration(endDate.diff(startDate)).asHours()+1;
// TO-DO: Might need a fix.
// Not sure about the interval
interval= 1;
for (var j = 0; j < hours; j+=interval) {
var date = moment(startDate).add(j,"hours").valueOf();
// Sort the timesteps
timeperiodsSorted = timeperiods.sort();
// Iterate over the sorted timestep and insert them.
for(var timestep of timeperiodsSorted ) {
var date = moment(timestep, 'YYYY-MM-DDTHH:mm:SSZ').valueOf();
times.push(date);
}
......@@ -78,6 +75,10 @@ L.TimeDimension.Layer.WMS.FCOO = L.TimeDimension.Layer.WMS.extend({
_getRefTimeFromCapabilities: function(xml) {
var layers = $(xml).find('Layer');
var layerName = this._baseLayer.wmsParams.layers;
// At FCOO adjust the layerName if needed
layerName = this.adjustLayerName( layerName );
var layerNameElement = layers.find("Name").filter(function(index) {
return $(this).text() === layerName;
});
......@@ -92,12 +93,16 @@ L.TimeDimension.Layer.WMS.FCOO = L.TimeDimension.Layer.WMS.extend({
return refTime;
},
_parseTimesFromCapabilities: function(xml) {
var layers = $(xml).find('Layer');
var layers = $(xml).find('Layer');
var layerName= this._baseLayer.wmsParams.layers;
// At FCOO adjust the layerName if needed
layerName = this.adjustLayerName( layerName );
var layerNameElement = layers.find("Name").filter(function(index) {
return $(this).text() === layerName;
});
var times = null;
if (layerNameElement) {
var layer = layerNameElement.parent();
......@@ -112,7 +117,6 @@ L.TimeDimension.Layer.WMS.FCOO = L.TimeDimension.Layer.WMS.extend({
_getTimesFromLayerCapabilities: function(layer) {
var times = null;
console.log(layer);
var dimension = layer.find("Dimension[name='time']");
if (dimension && dimension.length && dimension[0].textContent.length) {
times = dimension[0].textContent.trim();
......@@ -124,6 +128,23 @@ L.TimeDimension.Layer.WMS.FCOO = L.TimeDimension.Layer.WMS.extend({
}
return times;
},
adjustLayerName: function( layerName ) {
// At FCOO we can have layers merged using "," between layers.
// For example: "uu_vv_nsbalt,uu_vv_idk"
// We use the first layer to get the times, because we
// assume that the user has verified that the times always are the
// same for the layers.
if( layerName.indexOf(",") > 0 ) {
//console.log("Old layer name to request : " + layerName );
var layerArray = layerName.split(",");
layerName = layerArray[0];
//console.log( "New layer to request : " + layerName );
}
return layerName;
},
_getLayerForTime: function(time) {
if (time == 0 || time == this._defaultTime || time == null || this._refTime == 0) {
......@@ -135,9 +156,8 @@ L.TimeDimension.Layer.WMS.FCOO = L.TimeDimension.Layer.WMS.extend({
var nearestTime = this._getNearestTime(time);
if (this._layers.hasOwnProperty(nearestTime)) {
return this._layers[nearestTime];
}
}
var wmsParams = this._baseLayer.options;
wmsParams.time = moment(nearestTime).utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
wmsParams.DIM_REFTIME = moment(this._refTime).utc().format('YYYY-MM-DDTHH:mm:ss[Z]');
......@@ -168,7 +188,11 @@ L.TimeDimension.Layer.WMS.FCOO = L.TimeDimension.Layer.WMS.extend({
this.hide();
}).bind(newLayer);
return newLayer;
},
},
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment