Autor: TRW (Página 3 de 4)

Si conoces mis artículos de #WarTraces, verás que utilizo imágenes satélite de la Agencia Espacial Europea. Hoy os cuento cómo descargar y manipular estas imágenes de la misión Sentinel 2, así como de Landsat, ya que el tratamiento es similar para ambos.

Lo haremos con QGIS, para lo cual deberás descargar e instalar este programa con el módulo de GRASS GIS incluido.

Registro en plataformas.

Necesitaremos crearnos una cuenta para poder acceder a ambas fuentes de datos, rellenando un formulario y confirmando la cuenta por correo electrónico.

Copernicus Open Access Hub

https://scihub.copernicus.eu/dhus/#/self-registration

NASA Earthdata Search

https://urs.earthdata.nasa.gov/users/new

Descarga de datos.

Diferenciemos según la plataforma utilizada.

Copernicus Open Access Hub

Accedemos a su visor de datos y nos logueamos con las credenciales creadas.

https://scihub.copernicus.eu/dhus/

Ahora, dibujaremos el polígono delimitador de la zona de interés. Cada punto del rectángulo se marca haciendo click derecho, y cerramos el polígono con doble click derecho.

A continuación, pulsamos el botón de filtro de la barra de búsqueda y seleccionamos la casilla de la misión Sentinel-2 (también podremos delimitar las fechas de la consulta, pero por defecto se ordenará de más reciente a más antiguo).

Por último, aparecerán los productos disponibles para nuestra consulta, los cuales podremos previsualizar o descargar en un fichero .zip comprimido.

NASA Earthdata Search

Igual que antes, deberemos loguearnos primero en su visor de datos.

https://search.earthdata.nasa.gov/search

Podremos definir también una zona de interés mediante las herramientas de geometría de la barra lateral.

Filtramos los productos, por ejemplo seleccionando "Imagery", y seleccionamos HLS Landsat en el catálogo.

En este caso, deberemos seleccionar las bandas que queramos descargar y que veremos a continuación.

Imagen TCI (true colour o color verdadero)

Simplificando (mucho), los satélites capturan imágenes en distintos rangos de longitudes de onda, denominados bandas.

Además, las imágenes o fotografías digitales que usamos para representar la realidad como las ve el ojo humano suelen estar definidas por tres capas de datos: una para el color rojo (Red), otra para el color verde (Green), y otra para el azul (Blue), definiendo en cada una de estas capas un valor para cada pixel con la cantidad de ese color. La combinación de todos los píxeles es lo que simula una imagen similar a la realidad.

TIP! Haz la prueba y haz mucho zoom a cualquier imagen y verás el mosaico de píxeles que la forma.

Utilizaremos las bandas capturadas por los satélites dentro de la longitud de onda visible para generar una imagen tal y como la veríamos desde el espacio.

Sentinel 2

En el caso de Sentinel 2, podemos mostrar directamente una imagen de color verdadero descargando el producto L1C y empleando la capa _TCI.jp2 ubicada en la ruta /GRANULE/DATA_CODE_NAME/IMG_DATA/

La imagen TCI se verá de la siguiente forma:

Landsat

TIP! https://gisgeography.com/landsat-8-bands-combinations/

Para Landsat, deberemos combinar las diferentes bandas capturadas individualmente por el satélite dentro de la longitud de onda visible. Estas son:

RED	B04
GREEN	B03
BLUE	B02

Acudimos a QGIS, y usamos la función i.group del módulo GRASS que combinará las capas seleccionadas en una nueva capa multibanda RGB.

Para facilitar la tarea, yo renombro las capas para ordenarlas de la siguiente manera, asegurándote que el script las lee correctamente:

Quedando así:

En este caso no se parece nada a la imagen anterior o a la realidad, así que ajustamos las propiedades para extraer más color de los datos:

• En primer lugar nos aseguramos de leer toda la información de las bandas usando los valores mínimo y máximo reales, en lugar de los estimados.

• Solo con esto mejora bastante la imagen, pero le falta algo de brillo y de color.

• Ajustamos ahora los parámetros de renderizado de color:

Y ya queda algo mucho más realista:

Capa SWIR (short wave infra-red)

Utilizando las bandas de longitud de onda infra-roja, podemos ver más allá de lo que ve el ojo humano, o incluso a través de ciertos objetos, como es el caso de ciertas nubes o el humo.

Durante los incendios del verano, vi cómo Copernicus utilizaba estas imágenes para delimitar la extensión del fuego, y pensé que servirían para localizar el impacto de las bombas que oculta el humo que desprenden. Y así fue cómo se me ocurrió utilizarlo para #WarTraces.

Sentinel 2

Usamos el procedimiento anterior, combinando para este caso las siguientes bandas:

RED	B12
GREEN	B8A
BLUE	B04

Landsat

Realizamos una nueva combinación, en este caso usando las bandas siguientes:

RED	B07
GREEN	B06
BLUE	B04

Conclusión

Como nota final, es importante destacar el tamaño de pixel, ya que afectará al detalle de la imagen (resolución):

• Sentinel 2: 10 metros.
• Landsat: 30 metros.

Por otro lado, Landsat cuenta con imágenes desde 2013, mientras que Sentinel solo dispone de imágenes desde 2015.

Además, puedes previsualizar todas estas capas y combinaciones con visores web como EO Browser de Sentinel Hub.

Si te atascas o quieres comentar, te espero en 🐦 Twitter!

🐦 @RoamingWorkshop

Si has usado software GIS de escritorio, te sorprenderá saber que muchas de esas herramientas geoespaciales también están disponibles para tus mapas web mediante una librería javascript gratuita y de código abierto.

Hoy te enseño TurfJS. Pulsa el botón 🌤 del mapa incrustado y verás una de sus muchas posibilidades: la interpolación por inverso de la distancia al cuadrado o IDW.

Instalación

TurfJS cuenta con una práctica web que nos explica todas las funciones disponibles, así como la configuración inicial:

https://turfjs.org/getting-started

Para usar Turf sólo necesitamos enlazar la librería a nuestro mapa usando el enlace CDN que dan en su web:

<script src='https://unpkg.com/@turf/turf@6/turf.min.js'></script>

Mapa base

Puedes crear un mapa base, por ejemplo, con Leaflet. Además, TurfJS utiliza sintaxis JSON, por lo que es altamente compatible con las funciones geoJSON de Leaflet.

TIP! Leaflet ha sido recientemente actualizado a la versión 1.9.1. Este post todavía no está actualizado y utiliza la versión 1.7.1.

Yo voy a reciclar este ejemplo de uno de mis primeros posts con algunos cambios:

• Añado el enlace a la librería Turf en el <head>.
• Defino los marcadores en una matriz o array de datos, similar a como se obtendrían de una fuente de datos en formato JSON:

https://www.w3schools.com/js/js_arrays.asp

var markers=[
{"name":"Estacion1",
"lat":25.77,
"lon":-80.13,
"dato":26.4},
{"name":"Estacion2",
"lat":25.795,
"lon":-80.21,
"dato":29.8},
{"name":"Estacion3",
"lat":25.70,
"lon":-80.275,
"dato":31.35}
];

TIP! Los valores numéricos NO irán "entrecomillados", o de lo contrario Turf los reconocerá como String (en Leaflet no ocurre).

• Añado los marcadores al mapa con un bucle, usando la función forEach(), muy habitual para estos casos:

https://www.w3schools.com/jsref/jsref_foreach.asp

markers.forEach(function(m){
    var marker=L.marker([m.lat, m.lon]).addTo(map);
    marker.bindTooltip("<b>"+m.name+"</b><br>"+m.dato).openTooltip();
});

//ASÍ AÑADÍAMOS UN MARCADOR ÚNICO A LEAFLET
//var marker = L.marker([25.77, -80.13]).addTo(map);
//marker.bindTooltip("<b>Estacion1</b><br>m.dato").openTooltip();

Quedando así:

y siendo éste su código:

<head>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
  integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
  crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
  integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
  crossorigin=""></script>
<script src='https://unpkg.com/@turf/turf@6/turf.min.js'></script>
</head>

<style>
#map{border-radius: 30px;}
</style>

<body>
<div id="map" style="height:500px;"></div>
</body>

<script>
var map = L.map('map').setView([25.75, -80.2], 12);
L.tileLayer("http://a.tile.openstreetmap.org/{z}/{x}/{y}.png", {/*no properties*/
}).addTo(map);

var markers=[
{"name":"Estacion1",
"lat":25.77,
"lon":-80.13,
"dato":26.4},
{"name":"Estacion2",
"lat":25.795,
"lon":-80.21,
"dato":29.8},
{"name":"Estacion3",
"lat":25.70,
"lon":-80.275,
"dato":31.35}
];

markers.forEach(function(m){
    var marker=L.marker([m.lat, m.lon]).addTo(map);
    marker.bindTooltip("<b>"+m.name+"</b><br>"+m.dato).openTooltip();
});
</script>

Interpolación IDW con TurfJS

En la forma anterior, los datos se pueden usar muy fácilmente con TurfJS.

Una de las herramientas más interesantes que facilita Turf es la interpolación de los datos en una malla regular.

https://turfjs.org/docs/#interpolate

Esto lo hace empleando uno de los métodos más habituales: el inverso de la distancia al cuadrado (IDW) o inverse distance weighting para una potencia de 2.

Seguimos el ejemplo que nos da la web de TurfJS:

1. Convertir los datos a una capa de puntos de Turf, una FeatureCollection:

https://turfjs.org/docs/#featureCollection

//vector de puntos vacío
var points=[];

//bucle para rellenar el vector de puntos con los datos
markers.forEach(function(m){
    points.push(turf.point([m.lon, m.lat],{name: m.name, dato: m.dato}));
});

//convertir a featureCollection de Turf
points=turf.featureCollection(points);

TIP! Fíjate que Turf recibe las coordenadas en longitud-latitud, en lugar del habitual latitud-longitud!

2. Definir las opciones de la interpolación, entre las que podemos elegir las siguientes:
   • gridType: o tipo de malla
     • points (puntos)
     • square (cuadrados)
     • hex (hexágonos)
     • triangle (triángulos)
   • property: propiedad (o campo) del objeto de puntos que contiene los valores a interpolar.
   • units: unidades espaciales usadas en la interpolación
     • miles: millas
     • kilometers: kilómetros
     • radians: radianes
     • degrees: grados
   • weight: peso o potencia a la que se eleva la distancia, habitualmente 2, aunque valores más altos darán un resultado más suavizado.

//opciones de interpolación: malla rectangular de la variable 'dato' en kilómetros usando potencia de 2

var options = {gridType: 'square', property: 'dato', units: 'kilometers', weight: 2};

3. Por último, generar la malla interpolada y añadirla al mapa, siendo el valor numérico el tamaño de las celdas de la malla interpolada (0.5 Km):

//crear malla de Turf
var malla=turf.interpolate(points, 0.5, options);

//añadir a Leaflet
L.geoJSON(malla).addTo(map);

Siendo este el resultado (nada concluyente):

Dar formato a la malla y mostrar valores

Aunque no lo parezca, la interpolación está hecha, aunque no se está mostrando correctamente.

Voy a añadir una escala de color que represente los datos, y también a mostrar los valores al pasar por encima de las celdas. Para ello, modificamos las propiedades del objeto geoJSON de Leaflet:

• style: función para modificar el estilo de los objetos, evaluando su valor.
• onEachFeature: función que se añade a cada objeto para interactuar con él.

https://leafletjs.com/reference.html#geojson

https://leafletjs.com/examples/choropleth/

L.geoJSON(malla,{
  style:function(feature){
  var val=feature.properties.dato;
  if(val>30){
    return {fillColor: "orangered", fillOpacity: 0.5, weight:0};
  }else if(val>28 && val < 30){
    return {fillColor: "yellowgreen", fillOpacity: 0.5, weight:0};
  }else if(val>26 && val < 28){
    return {fillColor: "darkgreen", fillOpacity: 0.5, weight:0};
  }
},
onEachFeature:function(feature,layer){
  layer.on({
  mouseover:function(e){
    val=e.target.feature.properties.dato.toFixed(2);
    e.target.bindTooltip(val).openTooltip();
  }
  });
}
}).addTo(map);

Quedando así:

Y aquí el código completo:

<head>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
  integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
  crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
  integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
  crossorigin=""></script>
<script src='https://unpkg.com/@turf/turf@6/turf.min.js'></script>
</head>

<style>
#map{border-radius: 30px;}
</style>

<body>
<div id="map" style="height:500px;"></div>
</body>

<script>
var map = L.map('map').setView([25.75, -80.2], 12);
L.tileLayer("http://a.tile.openstreetmap.org/{z}/{x}/{y}.png", {/*no properties*/
}).addTo(map);

var markers=[
{"name":"Estacion1",
"lat":25.77,
"lon":-80.13,
"dato":26.4},
{"name":"Estacion2",
"lat":25.795,
"lon":-80.21,
"dato":29.8},
{"name":"Estacion3",
"lat":25.70,
"lon":-80.275,
"dato":31.35}
];

markers.forEach(function(m){
    var marker=L.marker([m.lat, m.lon]).addTo(map3);
    marker.bindTooltip("<b>"+m.name+"</b><br>"+m.dato).openTooltip();
});

//Datos para interpolación de Turf
//vector de puntos vacío
var points=[];
//bucle para rellenar el vector de puntos con los datos
markers.forEach(function(m){
points.push(turf.point([m.lon, m.lat],{name: m.name, dato: m.dato}));
});
//convertir a featureCollection de Turf

points=turf.featureCollection(points);

//opciones de interpolación
var options = {gridType:"square",property:"dato",units:"kilometers",weight:2};

//crear malla de Turf
var malla=turf.interpolate(points, 0.5, options);

//añadir a Leaflet
malla=L.geoJSON(malla,{
  style:function(feature){
  var val=feature.properties.dato;
  if(val>30){
    return {fillColor: "orangered", fillOpacity: 0.5, weight:0};
  }else if(val>28 && val < 30){
    return {fillColor: "yellowgreen", fillOpacity: 0.5, weight:0};
  }else if(val>26 && val < 28){
    return {fillColor: "darkgreen", fillOpacity: 0.5, weight:0};
  }
},
onEachFeature:function(feature,layer){
  layer.on({
  mouseover:function(e){
    val=e.target.feature.properties.dato.toFixed(2);
    e.target.bindTooltip(val).openTooltip();
  }
  });
}
}).addTo(map);

</script>

Aplicaciones

Como ejemplo aplicado a datos reales, he modificado la librería leafMET para incorporar la interpolación y añadido isobandas.

Es el mapa que has visto al inicio y que puedes abrir en pantalla completa:

https://theroamingworkshop.cloud/leafMET/leafMET+Turf.html

Además, el código está disponible en github como variante de leafMET:

https://github.com/TheRoam/leafMET/tree/leafMET+Turf

Y eso es todo! Espero que te sea útil!

Cualquier duda o comentario te espero en 🐦 Twitter!

🐦 @RoamingWorkshop

En este post explicaba directamente cómo añadir las estaciones de AEMET con ciertos datos, usando mi plugin leafMET para Leaflet (disponible en github):

https://github.com/TheRoam/leafMET

Vamos a detenernos ahora en el detalle de cómo funciona la API y cómo acceder a todos los datos disponibles.

Acceso a la API

Para usar la API necesitamos una clave de acceso, o API key. Accedemos a la página de AEMET OpenData y hacemos click en el botón "Solicitar" debajo de Obtención de API key.

A continuación se nos pedirá una dirección de correo electrónico para enviarnos dicha clave.

Nos enviarán un primer correo de confirmación, y a continuación recibiremos un segundo correo con la clave de acceso. La copiamos y seguimos.

Documentación y ejemplos

Volvemos a la página de AEMET OpenData y entramos al Acceso Desarrolladores.

Nos interesa la documentación dinámica, que muestra todas las peticiones de datos disponibles y que podemos probar directamente desde allí.

Podemos pulsar sobre cada tema y se mostrará la sintaxis a usar para cada petición de datos.

Vamos a desplegar observación-convencional y, dentro, /api/observacion/convencional/todas.

Veremos un icono de aviso rojo a la derecha, donde podemos introducir la API key y probar la petición.

Ahora pulsamos el botón Try it out! y nos dará:

• un ejemplo de petición curl
• la URL de la petición
• el cuerpo, código y encabezados de la respuesta

Si abrimos la dirección URL que nos ofrece el campo "datos" veremos el listado completo de datos de todas las estaciones. A mi me sale todo este chorizo de JSON:

Cargando...

Los campos más interesantes son los siguientes:

• idema: ID o código de la estación.
• lat y lon: coordenadas de latitud y longitud.
• alt: altitud de la estación.
• fint: fecha del intervalo (horario) de los datos.
• prec: precipitación registrada en ese periodo.
• vv: velocidad del viento en la estación.
• ta: temperatura ambiente en la estación

Petición de datos para web mediante javascript

Estructura HTML

Voy a desarrollar un ejemplo incrustado para acceder a los datos y hacer uso de ellos. Simplemente creo un documento .html con un botón de solicitud y una línea de texto y una función de solicitud:

Solicitar

Pulsa el botón para solicitar los datos

<html>
<body>
<button id="solicitud" onclick="solicitar()">Solicitar</button>
<p id="texto">Pulsa el botón para solicitar los datos</p>
</body>
<script>
function solicitar(){
document.getElementById("texto").innerHTML="Todavía no he programado eso..";
}
</script>
</html>

TIP! Copia y pega este código en un documento de texto con extensión .html para abrirlo en tu navegador.

Solicitud HTTP

Realizamos la solicitud de datos con javascript usando el objeto XMLHttpRequest. En w3schools nos ponen un ejemplo muy simple:

https://www.w3schools.com/js/js_ajax_http.asp

Como vimos usando la documentación dinámica, después de hacer la solicitud, recibimos un enlace para acceder a los datos, lo cual es otra solicitud, así que debemos anidar dos solicitudes así:

<script>
function solicitar(){
// Definir texto de carga
document.getElementById("texto").innerHTML="Cargando datos...";
// Definir la API Key
var AK=tUApiKey;
// Definir URLs de solicitud
var URL1="https://opendata.aemet.es/opendata/api/observacion/convencional/todas";
var URL2="";

// Crear objetos XMLHttpRequest
const xhttp1 = new XMLHttpRequest();
const xhttp2 = new XMLHttpRequest();

// Definir función de respuesta a la primera solicitud:
// Queremos acceder a la URL del campo "datos"
xhttp1.onload = function() {
  // 1º Pasamos la respuesta a JSON:
  URL2=JSON.parse(this.responseText);
  // 2º Obtenemos el campo "datos":
  URL2=URL2.datos;  
  // 3º Hacemos la nueva petición:
  xhttp2.open("GET", URL2);
  xhttp2.send();
}

// Definir función de respuesta a la segunda solicitud:
// Modificaremos la línea de texto de la página con información descargada
xhttp2.onload = function() {
  // 1º Pasamos la respuesta a JSON (se trabaja mejor así):
  var datos=JSON.parse(this.responseText);

  // 2º Obtenemos la longitud del objeto JSON
  // Esto equivale a registros horarios individuales por estaciones
  var registros=datos.length;

  // 3º Obtenemos la fecha del primer registro.
  // Le daremos un formato más legible ya que está en ISO
  var fechaini=datos[0].fint;
  fechaini=new Date(fechaini+"Z");
  fechaini=fechaini.toLocaleDateString()+" "+fechaini.toLocaleTimeString();

  // 4º Obtenemos la fecha del último registro
  // Le damos el mismo formato
  var fechafin=datos[(datos.length-1)].fint;
  fechafin=new Date(fechaini+"Z");
  fechafin=fechafin.toLocaleDateString()+" "+fechafin.toLocaleTimeString();

  // 5º Unimos la información en la línea de texto
  document.getElementById("texto").innerHTML="Se han descargado <b>"+registros+"</b> registros desde el <b>"+fechaini+"</b> hasta el <b>"+fechafin+"</b>. <a href='"+URL2+"' target='_blank'>Ver todos los datos.</a>";
}

// Enviar la solicitud
xhttp1.open("GET", URL1+"/?api_key="+AK);
xhttp1.send();

}
</script>

Veamos el resultado a continuación:

Solicitar

Pulsa el botón para solicitar los datos

Y ya está listo! De esta forma puedes obtener las coordenadas y los valores de las distintas variables meteorológicas horarias de AEMET para usarlas en una tabla o en un mapa web como hemos visto para Leaflet.

Como siempre, deja tus dudas o comentarios en Twitter! 🐦

El pasado julio, la revista Nature publicaba un Modelo Digital de Superficies en alta definición de la nueva orografía creada por el volcán Tajogaite de La Palma durante su erupción en el año 2021. Un trabajo espectacular del Istituto Nazionale di Geofisica e Vulcanologia junto con el Instituto Vulcanológico de Canarias.

Lo habitual es ver y trabajar con estos ficheros en algún programa de SIG como QGIS o ArcGIS, pero ¿cómo lo acercamos al resto de usuarios ?¿No sería mejor verlo directamente en 3D y visitarlo virtualmente?

Aquí es donde me topé con CesiumJS: un visor de mapas en 3D al estilo del famoso [G] Earth, pero de código abierto, gratuito y altamente personalizable para hacer tus propios proyectos.

Crear cuenta de Cesium ion

Para utilizar CesiumJS es necesario registrar una cuenta para crear un código de acceso o Access Token.

Además, registrándonos podremos subir nuestros propios ficheros y personalizar las vistas 3D que crearemos. Verás que en mi caso he subido el Modelo Digital de Superficies y la imagen satélite que usa el visor. Dejo aquí los enlaces por si quieres usar los mismos:

• Modelo Digital de Superficies del volcán de La Palma de enero de 2022.
  Formato geoTIFF con paso de malla de 0'2 metros.
  https://portal.opentopography.org/dataspace/dataset?opentopoID=OTDS.032022.4083.1#panel_head_files
• Ortofoto satélite 50cm enero 2022 del IDE Canarias
  https://idecan1.grafcan.es/ServicioWMS/ErupcionLP2021?SERVICE=WMS&request=GetMap&version=1.1.1&layers=ORTO_14012022_SAT50&format=image%2Fjpeg&transparent=true&width=1200&height=800&srs=EPSG:4326&bbox=-17.93,28.58,-17.83,28.65

TIP! Puedes usar el servicio WMS en tu visor GIS para obtener una ortofoto completa, o descargar la que uso yo para este ejemplo (270 MB con resolución de 1m)

Incorporar CesiumJS a tu web.

Para usar CesiumJS configuramos un fichero .html como ya viene siendo habitual.

En este caso voy a copiar directamente uno de sus ejemplos ya que apenas tiene unas 25 líneas:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Include the CesiumJS JavaScript and CSS files -->
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.97/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.97/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
    // Your access token can be found at: https://cesium.com/ion/tokens.
    // This is the default access token from your ion account
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1MTYwNGM0Yi1iYzlkLTRkMTUtOGQyOS04YjQxNmUwZDQ0YjkiLCJpZCI6MTA0Mjc3LCJpYXQiOjE2NjAxMDk4MzR9.syNWeKPLWA2eMrEh4K9hvkyp1oGdbLMaL0Ozk1kaksk';
    // Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
    const viewer = new Cesium.Viewer('cesiumContainer', {
      terrainProvider: Cesium.createWorldTerrain()
    });    
    // Add Cesium OSM Buildings, a global 3D buildings layer.
    const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());   
    // Fly the camera to San Francisco at the given longitude, latitude, and height.
    viewer.camera.flyTo({
      destination : Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),
      orientation : {
        heading : Cesium.Math.toRadians(0.0),
        pitch : Cesium.Math.toRadians(-15.0),
      }
    });
  </script>
 </div>
</body>
</html>

<body style="margin:0;width:100vw;height:100vh;">
<div style="height:100%;" id="cesiumContainer"></div>

viewer.timeline.container.style.visibility = "hidden";
viewer.animation.container.style.visibility = "hidden";

viewer.camera.flyTo({
    destination : Cesium.Cartesian3.fromDegrees(-17.8195, 28.6052, 3000),
    orientation : {
    heading : Cesium.Math.toRadians(-85.0),
    pitch : Cesium.Math.toRadians(-30.0),
    }
});

<html lang="en">
<head>
<meta charset="utf-8">

<script src="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body style="margin:0;width:100vw;height:100vh;">
<div style="height:100%;" id="cesiumContainer"></div>
<script>
    // Your access token can be found at: https://cesium.com/ion/tokens.
    // Replace `your_access_token` with your Cesium ion access token.

    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1MTYwNGM0Yi1iYzlkLTRkMTUtOGQyOS04YjQxNmUwZDQ0YjkiLCJpZCI6MTA0Mjc3LCJpYXQiOjE2NjAxMDk4MzR9.syNWeKPLWA2eMrEh4K9hvkyp1oGdbLMaL0Ozk1kaksk';

    // Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
    const viewer = new Cesium.Viewer('cesiumContainer', {
      //terrainProvider: Cesium.createWorldTerrain()//terreno original
		terrainProvider: new Cesium.CesiumTerrainProvider({//terreno modificado
			url: Cesium.IonResource.fromAssetId(1255858),
		}),	  
    });    
	
	// Esconder widgest inferiores
	viewer.timeline.container.style.visibility = "hidden";
	viewer.animation.container.style.visibility = "hidden";
	
	// Add Sentinel2 imagery
	const layer = viewer.imageryLayers.addImageryProvider(
	  new Cesium.IonImageryProvider({ assetId: 1256129 })
	);
    // Add Cesium OSM Buildings, a global 3D buildings layer.
    const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());   
    // Fly the camera to San Francisco at the given longitude, latitude, and height.
    viewer.camera.flyTo({
      destination : Cesium.Cartesian3.fromDegrees(-17.8195, 28.6052, 3000),
      orientation : {
        heading : Cesium.Math.toRadians(-85.0),
        pitch : Cesium.Math.toRadians(-30.0),
      }
    });
  </script>
</div>
</html>