Curso IDE: SOS Datos Espacio-Temporales_T5

Vladimir Gutiérrez, PhD
www.vlado.es
Curso
Infraestructura de Datos espaciales (IDE)
“INTEGRACIÓN Y ACCESO ESTÁNDAR A
DATOS ESPACIO‐TEMPORALES”
_____
23 al 27 de Noviembre de 2015
Cuenca, Ecuador

TEMARIO
Introducción
Interoperabilidad de datos de sensores
Arquitectura Sensor Web Enablement (SWE)
Implementación de servicios Sensor Observation Service (SOS)
Implementación de un cliente SOS
2
3
4
5
2
1

3
5 Implementación de un cliente SOS
• Conceptos básicos de HTML
• Conceptos básicos de JavaScript
• Descarga de librerías para cliente SOS
• Depuración de aplicaciones web con Chrome / comunicación
• Implementar el cliente SOS.js

4
1) http://www.ideotalex.eu/sosclient/sos
1.1) http://www.ideotalex.eu/sosclient/
1.2) http://www.ideotalex.eu/OtalexC/PortalOtalex/Visor.html?language=es
2) http://ioossos.axiomalaska.com/i52n‐sos‐dev/service
2.1) http://ioossos.axiomalaska.com/i52n‐sos‐dev/client
3) http://gcoos.disl.org/cgi‐bin/oostethys_sos.cgi
4) http://sensorweb.demo.52north.org/52n‐sos‐webapp/service (v 2.0.0)
4.1) http://sensorweb.demo.52north.org/52n‐sos‐webapp/client
4.2) http://sensorweb.demo.52north.org/sensorwebclient‐webapp‐stable/
NOTA: confirmar ‐> es programación del lado Servidor
4.3) http://sensorweb.demo.52north.org/jsClient/#map
5) http://sensorweb.demo.52north.org:80/PegelOnlineSOSv2.1/sos (v 1.0.0)
5.1) http://sensorweb.demo.52north.org/PegelOnlineSOSv2.1/
5.2) http://sensorweb.demo.52north.org/PegelOnlineSOSv2.1/testClient.html
6) http://sensors.geonovum.nl/sos/service (v 2.0.0)
6.1) http://sensors.geonovum.nl/sos/client
6.2) http://sensors.geonovum.nl/sos‐js‐app/
6.3) http://sensors.geonovum.nl/jsclient/#map
6.4) http://sensors.geonovum.nl/heronviewer
NOTA: confirmar ‐> es: WMS/WFS

5
7) http://sosmet.nerc‐bas.ac.uk:8080/sosmet/sos
7.1) http://sosmet.nerc‐bas.ac.uk:8080/sosmet/testClient‐SOSv2.html
7.2) http://sosmet.nerc‐bas.ac.uk:8080/sosmet/testClient‐SOSv1.html
7.3) http://basmet.nerc‐bas.ac.uk/sos/examples/sos‐app‐test.html
8) http://129.252.37.90/cgi‐bin/difSOS.cgi
8.1) http://neptune.baruch.sc.edu/xenia/sos/difSOS.html
9) http://sdf.ndbc.noaa.gov/sos/server.php
9.1) http://sdf.ndbc.noaa.gov/sos/test.shtml
10) http://opendap.co‐ops.nos.noaa.gov/ioos‐dif‐sos/SOS
10.1) http://opendap.co‐ops.nos.noaa.gov/ioos‐dif‐sos/
11) http://sos.irceline.be/sos
11.1) http://sos.irceline.be/
12) http://www.envirocloud.se/52n‐sos‐webapp/service
12.1) http://www.envirocloud.se/52n‐sos‐webapp/client
12.2) http://www.envirocloud.se/Ozon/
13) http://gis.uazuay.edu.ec/OpenLayers‐2.12/sos/index.php

6
Conceptos básicos de HTML: Hola mundo
<HTML>
<HEAD>
<TITLE>
Un pequeño Hola
</TITLE>
</HEAD>
<BODY>
<H1>Hola</H1>
<P>Este es un “Hola mundo" mínimo en
HTML.</P>
</BODY>
</HTML>
‐ Crear directorio “pruebas” en “C:Tomcat8_028webapps”
‐ Guardar ‐> prueba1.html
dentro de: C:Tomcat8_028webappspruebas
NOTA: antes de presionar el botón guardar (en block de notas)
en “Tipo“ seleccionar “Todos los archivos”

7
<HTML>
<HEAD>
<link rel="stylesheet" href="http://localhost:8080/pruebas/SOS.Styles.css"
type="text/css"/>
<script type="text/javascript"
src="http://localhost:8080/pruebas/SOS.js"></script>
<script type="text/javascript">
function init()
{
var a = 1;
var b = "hola mundo desde js"
alert(b);
}
</script>
<TITLE>
Un pequeño Hola
</TITLE>
</HEAD>
<BODY onload="init()">
<H1>Hola</H1>
<P>Este es un "Hola mundo" mínimo en HTML.</P>
</BODY>
</HTML>
‐ Guardar ‐> prueba2.html
dentro de: C:Tomcat8_028webappspruebas
NOTA: antes de presionar el botón guardar (en block de notas)
en “Tipo“ seleccionar “Todos los archivos”

8
‐ Cliente Servidor

9
‐ Inspeccionar elemento

10‐ Sources

11
‐ Sources

12
http://www.ideotalex.eu/OtalexC/PortalOtalex/Visor.html?language=es

13

14

15
http://www.ideotalex.eu/sosclient/sos?SERVICE=SOS&REQUEST=GetCapabilities
&ACCEPTVERSIONS=1.0.0

16

17

18

19
3 Arquitectura Sensor Web Enablement (SWE)

20
http://www.ideotalex.eu/sosclient/sos?service=SOS&version=1.0.0&request=GetObser
vation&offering=AEMET&procedure=urn%3Aogc%3Aobject%3Afeature%3ASensor%3A
aemet‐caceres‐
4245X&observedProperty=urn%3Aogc%3Adef%3Aphenomenon%3AOGC%3A1.0.30%3
ATempMed&responseFormat=text%2Fxml%3Bsubtype%3D%22om%2F1.0.0%22

21
http://www.url‐encode‐decode.com/

22
http://gis.uazuay.edu.ec/OpenLayers‐2.12/sos/index.php
‐ ¿La única petición estándar SOS es el GetCapabilities y no funciona?
‐ El URL de acceso al servició no existe
‐ ¿La forma de obtener los datos?
‐ R: Parece que el BackEnd se conecta directamente a una BD

23
http://blog.jquery.com/2011/09/01/jquery‐1‐6‐3‐released/
Librería jQuery

24
http://blog.jqueryui.com/2010/11/jquery‐ui‐1‐8‐6/
Librería jQuery UI 1.8.6

25
https://code.google.com/p/flot/downloads/detail?name=flot‐0.7.zip&can=2&q=
Librería flot 0.7

26
https://github.com/openlayers/openlayers/releases/tag/release‐2.12
Librería OpenLayers 2 v2.12

27
https://github.com/52North/sos‐js
Librería sos‐js

28
http://basmet.nerc‐bas.ac.uk/js/sos/proj4js/lib/proj4js‐combined.js
Librería proj4js

29
http://basmet.nerc‐bas.ac.uk/js/sos/flot/jquery.flot.axislabels.min.js
Librería axislabels

30
Ubicación física de las librerías (después de descomprimir algunos)

31
Ubicación física de las librerías (después de descomprimir algunos)

32
Ubicación física de ejemplos en base a “sos.js”

33
OpenLayers: eje SOS

34

35
http://localhost:8080/libs/OpenLayers/examples/sos.html

36
SOS.js: eje sos‐core‐test.html
http://localhost:8080/SOS‐examples/sos‐core‐test.html

37

38

39

40
* eje: HTML + JS
52n‐sos
localhost

41

42

43
* eje: Depuración de aplicaciones web / comunicación

44

45

46

47

48

49

50

51

52

53

54

55

56
SOS.js: eje sos‐table‐test.html
http://localhost:8080/SOS‐examples/sos‐table‐test.html

57

58

59

60

61

62

63
PRÁCTICA: Implementar versión completa del cliente SOS‐js:

64
1) Detener Apache Tomcat
2) Respaldar la BD “sos”
3) Eliminar la BD “sos”
4) Crear una nueva BD “sos”
5) Restaurar el archivo “SOSSERVERESP.backup”
6) Iniciar Apache Tomcat
7) Refrescar la cache de en 52‐North
8) Editar el archivo del cliente sos completo
9) Editar el archivo SOS.js
10) Editar el archivo SOS‐UI.js

65
11) Renombrar el archivo (cliente‐sos.html) y ubicarlo en otro directorio (clientes):
http://localhost:8080/clientes/cliente‐sos.html

66
12) Ver la opción “Plot”
13) Seleccionar otro rango de tiempo en el control “Time”

67
14)  Ver la opción “Table”
15)  Seleccionar otro rango de tiempo en el control “Time”
16) Trabajo extra: Traducir las etiquetas (Offerings, Observed Properties, Controls, Metadata, Help).
Agregar una imagen de su organismo en el encabezado, mejorar el texto de descripción del cliente,
modificar el tema (colores), aumentar el tamaño del mapa, agregar más  opciones de capa base
(google‐earth, OSM), agregar más capas de overlay (IDE Nac.), etc.

Curso IDE: SOS Datos Espacio-Temporales_T5

Recomendados

Recomendados

Más contenido relacionado

Similar a Curso IDE: SOS Datos Espacio-Temporales_T5

Similar a Curso IDE: SOS Datos Espacio-Temporales_T5 (20)

Más de Vladimir Gutierrez, PhD

Más de Vladimir Gutierrez, PhD (20)

Último

Último (9)

Curso IDE: SOS Datos Espacio-Temporales_T5