3 votos

user142605 avatar

Serie temporal de folletos

Preguntado el 6 de Mayo, 2019
Cuando se hizo la pregunta
912 visitas
Cuantas visitas ha tenido la pregunta
1 Respuestas
Cuantas respuestas ha tenido la pregunta
Resuelta
Estado actual de la pregunta

Estoy tratando de crear un código usando leaflet y estoy teniendo problemas para animar una serie de imágenes de radar meteorológico usando WMS. Mi código es el siguiente:

<!DOCTYPE html>

<html>

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.css" />

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.js">

    </script>

    <div id="map" style='width: 943px; height: 480px;'></div>

    <link rel="stylesheet" href="https://cdn.rawgit.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.control.min.css"
    />

</head>

<body>

    <script type="text/javascript" src="https://cdn.rawgit.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.min.js">

    </script>

    <script type="text/javascript" src="https://cdn.rawgit.com/nezasa/iso8601-js-period/master/iso8601.min.js">

    </script>

    <script>
        //make the map

      var wmsLayerRadarRrai4kmLink = 'https://geo.weather.gc.ca/geomet?'

      var wmsLayerRadarRrai4km = L.tileLayer.wms(wmsLayerRadarRrai4kmLink, {
        layers: 'RADAR_RRAI',
        version: '1.1.0',
        format: 'image/png',
        transparent: true
        //opacity: .75
      });

      var wmsLayerRadarRrai4kmTD = L.timeDimension.layer.wms(wmsLayerRadarRrai4km, {
      });

      var map = L.map('map', {
        center: [49.9, -97.215],
        zoom: 5,
        fullScreenControl: true,
        timeDimension: true,
        timeDimensionControl: true,
        timeDimensionOptions: {
        },
        timeDimensionControlOptions: {
          autoPlay: true, 
          playerOptions: {
          loop: true,
          timeSteps: 1,
          }
        }
      });

      //get the wms layers

      var proxy = 'server/proxy.php'

      //group wms layers

      var overlayMaps = {
        "Radar Rain 4km": wmsLayerRadarRrai4kmTD
      };

    //get basemaps using tileLayer

      var basemapDark =  L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}  {r}.png', {
          attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy;<a href="https://carto.com/attributions">CARTO</a>',
          subdomains: 'abcd',
        maxZoom: 19
      });

      var basemapLight = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          maxZoom: 19,
          attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      });

      //group basemaps

      var baseMaps = {
        "Light": basemapLight,
        "Dark": basemapDark
      };

      L.control.layers(baseMaps, overlayMaps).addTo(map);

      L.control.timeDimension
    </script>
</body>

</html>

La capa inicial por defecto se cargará, pero una vez que la capa de tiempo se activa/reproduce, no se muestra nada más. Parece que está tomando el componente de tiempo correcto de la GetCapabilities, así que no estoy seguro de cuál es el problema.

Preguntado el 6 de Mayo, 2019 por user142605

Respuesta

¿Demasiados anuncios?

4voto

hood avatar
hood Puntos 16

Parece que el plugin Leaflet TimeDimension y https://geo.weather.gc.ca/geomet El servicio WMS no se lleva muy bien.

El plugin TimeDimension utiliza getCapabilities para obtener las series temporales del servicio WMS. La respuesta tiene 14MB. El plugin analiza esta respuesta para obtener los tiempos de las llamadas de series temporales al servicio WMS ( time parámetro).

Obviamente, algo falla en este análisis. He comprobado las llamadas a las series temporales en el depurador y todas devuelven el estado 500 - Internal server error . Ejemplo de una de estas llamadas:

https://geo.weather.gc.ca/geomet?&service=WMS&request=GetMap&layers=RADAR_RRAI&styles=&format=image%2Fpng&transparent=true&version=1.1.0&time=2019-05-07T14%3A20%3A00.000Z&width=256&height=256&srs=EPSG%3A3857&bbox=-11271098.44281895,6261721.357121641,-10018754.171394622,7514065.628545967

El tiempo en esta convocatoria es 2019-05-07T14:20:00.000Z .

He comprobado getCapabilities respuesta y elegí una de las veces que encontré allí. La hora era 2019-05-07T17:00:00Z . Con este tiempo obtuve una respuesta válida.

EDITAR: Algunas investigaciones posteriores mostraron que el único problema está en el formato de tiempo que se pasa al servicio WMS. El plugin TimeDimension utiliza el formato ISO-8601 YYYY-MM-DDTHH:mm:ss.sssZ , pero el servicio WMS espera un tiempo sin cientos de segundos YYYY-MM-DDTHH:mm:ssZ .

Como el plugin TimeDimension no ofrece ninguna opción o método para formatear la hora, la única solución es anular el método _createLayerForTime de L.TimeDimension.Layer.WMS que prepara la solicitud de WMS:

L.TimeDimension.Layer.WMS.include({
  _createLayerForTime: function(time){
      var wmsParams = this._baseLayer.options;
      // original 
      // wmsParams.time = new Date(time).toISOString();
      // hacked
      wmsParams.time = new Date(time).toISOString().slice(0, 19)+'Z';
      return new this._baseLayer.constructor(this._baseLayer.getURL(), wmsParams);
  }
});

El código completo se vería así:

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.css" />
    <link rel="stylesheet" href="https://cdn.rawgit.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.control.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/nezasa/iso8601-js-period/master/iso8601.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.min.js"></script>
</head>

<body>
    <div id="map" style='width: 943px; height: 480px;'></div>
    <script>
      L.TimeDimension.Layer.WMS.include({
        _createLayerForTime: function(time){
            var wmsParams = this._baseLayer.options;
            wmsParams.time = new Date(time).toISOString().slice(0, 19)+'Z';
            return new this._baseLayer.constructor(this._baseLayer.getURL(), wmsParams);
        }
      });

      var wmsLayerRadarRrai4kmLink = 'https://geo.weather.gc.ca/geomet?'

      var wmsLayerRadarRrai4km = L.tileLayer.wms(wmsLayerRadarRrai4kmLink, {
        layers: 'RADAR_RRAI',
        version: '1.3.0',
        format: 'image/png',
        transparent: true
      });

      var wmsLayerRadarRrai4kmTD = L.timeDimension.layer.wms(wmsLayerRadarRrai4km, {
      });

      var map = L.map('map', {
        center: [49.9, -97.215],
        zoom: 5,
        fullScreenControl: true,
        timeDimension: true,
        timeDimensionControl: true,
        timeDimensionOptions: {
        },
        timeDimensionControlOptions: {
          autoPlay: false, 
          playerOptions: {
          loop: false,
          timeSteps: 1,
          }
        }
      });

      var overlayMaps = {
        "Radar Rain 4km": wmsLayerRadarRrai4kmTD
      };

      var basemapDark =  L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}  {r}.png', {
          attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy;<a href="https://carto.com/attributions">CARTO</a>',
          subdomains: 'abcd',
        maxZoom: 19
      });

      var basemapLight = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          maxZoom: 19,
          attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      });

      var baseMaps = {
        "Light": basemapLight,
        "Dark": basemapDark
      };

      L.control.layers(baseMaps, overlayMaps).addTo(map);
      L.control.timeDimension;
    </script>
</body>

</html>
Respondido el 7 de Mayo, 2019 por hood (16 Puntos )

Preguntas relacionadas

Preguntas Destacadas

Etiquetas mas usadas

En nuestra red

i-Ciencias.com

I-Ciencias es una comunidad de estudiantes y amantes de la ciencia en la que puedes resolver tus problemas y dudas.
Puedes consultar las preguntas de otros usuarios, hacer tus propias preguntas o resolver las de los demás.

Powered by:

Yandex
X