{"id":2207,"date":"2023-04-14T22:00:16","date_gmt":"2023-04-14T21:00:16","guid":{"rendered":"https:\/\/theroamingworkshop.cloud\/b\/?p=2207"},"modified":"2023-11-19T15:29:01","modified_gmt":"2023-11-19T14:29:01","slug":"el-impacto-de-un-incendio-forestal-en-3d-con-informacion-geografica-en-cesium-js","status":"publish","type":"post","link":"https:\/\/theroamingworkshop.cloud\/b\/2207\/el-impacto-de-un-incendio-forestal-en-3d-con-informacion-geografica-en-cesium-js\/","title":{"rendered":"El impacto de un incendio forestal en 3D con informaci\u00f3n geogr\u00e1fica en Cesium JS"},"content":{"rendered":"\n<p>Tras varios art\u00edculos sobre el uso de informaci\u00f3n sat\u00e9lite vamos a ver c\u00f3mo unirlo <em>(casi)<\/em> todo en un ejemplo pr\u00e1ctico e impactante. Y es que el tama\u00f1o de los \u00faltimos incendios ocurridos en Espa\u00f1a han llamado mucho mi atenci\u00f3n y no era capaz de hacerme una idea de lo brutales que han sido (aunque nada que ver con otros sitios como Chile, Australia, o EEUU). Pero hagamos el ejercicio sin gastar demasiados GB de informaci\u00f3n geogr\u00e1fica.<\/p>\n\n\n\n<p>Lo que quiero es <strong>mostrar la extensi\u00f3n del incendio ocurrido en Asturias<\/strong> en marzo, pero quiero tambi\u00e9n intentar mostrar <strong>el impacto retirando los \u00e1rboles afectados<\/strong> por el fuego. \u00a1Vamos all\u00e1!<\/p>\n\n\n\n<div id=\"menu\" style=\"padding:20px 20px 20px 20px; border-left:2px solid darkgrey;\">\n<p style=\"font-weight:bold;\">Contenido<\/p>\n<\/div>\n<script>\nvar text;\nvar element;\n\nfunction fillmenu(){\n\nfor (let i=0; i<window.document.getElementsByTagName(\"h2\").length; i++){\nelement = window.document.getElementsByTagName(\"h2\")[i];\ntext = \"\u25b9 \"+element.innerHTML;\nvar newelement = document.createElement(\"a\");\nnewelement.innerHTML=text;\nvar postid=window.document.getElementsByTagName(\"article\")[0].id;\nvar url = \"https:\/\/theroamingworkshop.cloud\/b\/?p=\"+postid.substr(5,postid.length)+\"#\"+element.id;\nnewelement.setAttribute(\"href\", url);\nnewelement.appendChild(document.createElement(\"br\"));\nwindow.document.getElementById(\"menu\").appendChild(newelement);\n}\n}\n\nif(window.location.href.includes(\"tag\")){\n\n}else{\nwindow.setTimeout(fillmenu,2000);\n}\n\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"descarga-de-datos\">Descarga de datos<\/h2>\n\n\n\n<p>Usar\u00e9 un <strong>Modelo Digital de Superficies<\/strong> (que incluye \u00e1rboles y estructuras), una <strong>ortofoto<\/strong> tomada durante el incendio, y un <strong>Modelo Digital del Terreno<\/strong> (al que han eliminado los \u00e1rboles y las estructuras) para reemplazarlo por las zonas afectadas por el incendio.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"modelos-del-terreno\">1. Modelos del terreno<\/h3>\n\n\n\n<p>Usar\u00e9 los modelos del genial <strong>IGN<\/strong>, descargando los productos <strong>MDS5<\/strong> y <strong>MDT5<\/strong> de la zona.<\/p>\n\n\n\n<p><a href=\"http:\/\/centrodedescargas.cnig.es\/CentroDescargas\/index.jsp\" target=\"_blank\" rel=\"noreferrer noopener\">http:\/\/centrodedescargas.cnig.es\/CentroDescargas\/index.jsp<\/a><\/p>\n\n\n\n<figure class=\"wp-block-gallery aligncenter has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/mds5.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"508\" height=\"484\" data-id=\"2233\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/mds5.png\" alt=\"\" class=\"wp-image-2233\"\/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/mdt5.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"513\" height=\"487\" data-id=\"2234\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/mdt5.png\" alt=\"\" class=\"wp-image-2234\"\/><\/a><\/figure>\n<\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ortofotos\">2. Ortofotos<\/h3>\n\n\n\n<p>Para la imagen sat\u00e9lite, finalmente me decanto por <strong>Landsat<\/strong> ya que contaba con una imagen despejada durante los \u00faltimos d\u00edas del incendio.<\/p>\n\n\n\n<p>Usar\u00e9 las im\u00e1genes tomadas el d\u00eda 17 de febrero de 2023 (antes del incendio) y del 6 de abril de 2023 (ya en sus \u00faltimos d\u00edas).<\/p>\n\n\n\n<p><a href=\"https:\/\/search.earthdata.nasa.gov\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/search.earthdata.nasa.gov<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/landsat.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1136\" height=\"605\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/landsat.png\" alt=\"\" class=\"wp-image-2235\"\/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"procesar-imagenes-satelite\">Procesar im\u00e1genes sat\u00e9lite<\/h2>\n\n\n\n<p>Usaremos el proceso <strong><em>i.group<\/em><\/strong> de GRASS en QGIS para agrupar las distintas bandas capturadas por el sat\u00e9lite en un \u00fanico r\u00e1ster RGB, tal y como vimos en este post:<\/p>\n\n\n\n<p><a href=\"https:\/\/theroamingworkshop.cloud\/b\/1725\/procesar-imagenes-satelite-de-landsat-o-sentinel-2-en-qgis\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/theroamingworkshop.cloud\/b\/1725\/procesar-imagenes-satelite-de-landsat-o-sentinel-2-en-qgis\/<\/a><\/p>\n\n\n\n<p>Tendremos que hacerlo para cada una de las regiones descargadas, cuatro en mi caso, que luego volveremos a unir usando el proceso <strong><em>Construir r\u00e1ster virtual<\/em><\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"color-verdadero\">1. Imagen de color verdadero (TCI)<\/h3>\n\n\n\n<p>Combinamos las bandas 4, 3, 2.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire5.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1114\" height=\"884\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire5.png\" alt=\"\" class=\"wp-image-2213\"\/><\/a><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"falso-color\">2. Imagen de falso color<\/h3>\n\n\n\n<p>Combinamos las bandas 5, 4, 3.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire6.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire6.png\" alt=\"\" class=\"wp-image-2214\" width=\"676\" height=\"537\"\/><\/a><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"tonalidad\">3. Ajuste de la tonalidad<\/h3>\n\n\n\n<p>Para obtener un mejor resultado, puedes regular los <strong>valores m\u00ednimos y m\u00e1ximos<\/strong> que se consideran en cada banda que compone la imagen. Estos valores se encuentran en el <strong>Histograma<\/strong> de las propiedades de la capa.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire7.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"918\" height=\"734\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire7.png\" alt=\"\" class=\"wp-image-2204\"\/><\/a><\/figure>\n<\/div>\n\n\n<p>Aqu\u00ed te dejo los valores que yo he usado para obtener el resultado de arriba:<\/p>\n\n\n\n<figure class=\"wp-block-table is-style-regular\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">Banda<\/th><th class=\"has-text-align-center\" data-align=\"center\">TCI min<\/th><th class=\"has-text-align-center\" data-align=\"center\">TCI max<\/th><th class=\"has-text-align-center\" data-align=\"center\">FC min<\/th><th class=\"has-text-align-center\" data-align=\"center\">FC max<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">1 Rojo<\/td><td class=\"has-text-align-center\" data-align=\"center\">-100<\/td><td class=\"has-text-align-center\" data-align=\"center\">1500<\/td><td class=\"has-text-align-center\" data-align=\"center\">-50<\/td><td class=\"has-text-align-center\" data-align=\"center\">4000<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">2 Verde<\/td><td class=\"has-text-align-center\" data-align=\"center\">0<\/td><td class=\"has-text-align-center\" data-align=\"center\">1500<\/td><td class=\"has-text-align-center\" data-align=\"center\">-100<\/td><td class=\"has-text-align-center\" data-align=\"center\">2000<\/td><\/tr><tr><td class=\"has-text-align-center\" data-align=\"center\">3 Azul<\/td><td class=\"has-text-align-center\" data-align=\"center\">-10<\/td><td class=\"has-text-align-center\" data-align=\"center\">1200<\/td><td class=\"has-text-align-center\" data-align=\"center\">0<\/td><td class=\"has-text-align-center\" data-align=\"center\">1200<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"extension-del-incendio\">Extensi\u00f3n del incendio<\/h2>\n\n\n\n<p>Como ves, la imagen en <strong>falso color<\/strong> nos muestra claramente la extensi\u00f3n del incendio. Con ella, vamos a generar un <strong>pol\u00edgono que delimite el alcance del incendio<\/strong>.<\/p>\n\n\n\n<p>Primero consultaremos los valores de la banda 1 (rojo) que ofrece mayor contraste para la <strong>zona del incendio<\/strong>. M\u00e1s o menos est\u00e1n en el <strong>rango 300-1300<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"45\" height=\"39\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire8.png\" alt=\"\" class=\"wp-image-2216\"\/><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"185\" height=\"157\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire9.png\" alt=\"\" class=\"wp-image-2215\"\/><\/figure>\n<\/div>\n\n\n<p>Usando el proceso <strong><em>Reclasificar por tabla<\/em><\/strong>, asignaremos el valor 1 a las celdas dentro del rango, y el valor 0 al resto.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire10.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1364\" height=\"693\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire10.png\" alt=\"\" class=\"wp-image-2218\"\/><\/a><\/figure>\n<\/div>\n\n\n<p>Vectorizamos el resultado con el proceso <strong><em>Poligonizar<\/em><\/strong> y, contrastando con la imagen sat\u00e9lite, seleccionamos aquellos pol\u00edgonos que correspondan con el incendio.<\/p>\n\n\n\n<figure class=\"wp-block-gallery aligncenter has-nested-images columns-default is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire12.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1089\" height=\"814\" data-id=\"2220\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire12.png\" alt=\"\" class=\"wp-image-2220\"\/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire13-1.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1023\" height=\"768\" data-id=\"2222\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire13-1.png\" alt=\"\" class=\"wp-image-2222\"\/><\/a><\/figure>\n<\/figure>\n\n\n\n<p>Usaremos la herramienta <strong><em>Disolver<\/em><\/strong> para unir todos los pol\u00edgonos en un elemento, y <strong><em>Suavizar<\/em><\/strong> para redondear ligeramente los contornos. <\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire14.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"818\" height=\"652\" data-id=\"2224\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire14.png\" alt=\"\" class=\"wp-image-2224\"\/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire15.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"781\" height=\"609\" data-id=\"2223\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire15.png\" alt=\"\" class=\"wp-image-2223\"\/><\/a><\/figure>\n<\/figure>\n\n\n\n<p>Ahora obtenemos su inverso. <strong><em>Extraemos la extensi\u00f3n<\/em><\/strong> de la capa Landsat y, posteriormente, hacemos la <strong><em>Diferencia<\/em><\/strong> con el pol\u00edgono del incendio.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-4 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire16.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1421\" height=\"652\" data-id=\"2225\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire16.png\" alt=\"\" class=\"wp-image-2225\"\/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire18.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1063\" height=\"841\" data-id=\"2226\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire18.png\" alt=\"\" class=\"wp-image-2226\"\/><\/a><\/figure>\n<\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"procesar-terreno\">Procesar terreno<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"combinar-datos-del-terreno\">1. Combinar los datos del terreno<\/h3>\n\n\n\n<p>Lo primero que haremos es combinar los distintos archivos que conforman los modelos en un archivo \u00fanico (un \u00fanico fichero MDS y un \u00fanico fichero MDT).<\/p>\n\n\n\n<p>Usamos el proceso <strong><em>GDAL - Miscel\u00e1nea r\u00e1ster - Construir r\u00e1ster virtual<\/em><\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire1.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1904\" height=\"888\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire1.png\" alt=\"\" class=\"wp-image-2210\"\/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"extraer-datos-del-terreno\">2. Extraer datos del terreno<\/h3>\n\n\n\n<p>Extraemos los datos que nos interesan de cada modelo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Del <strong>MDS<\/strong> extraemos la superficie afectada por el incendio, de modo que quitaremos los \u00e1rboles que hayan en \u00e9l.<\/li>\n\n\n\n<li>Con el <strong>MDT<\/strong> hacemos lo inverso: dejamos el terreno (sin \u00e1rboles) de la zona del incendio, para sustituir los huecos generados en el otro modelo.<\/li>\n<\/ul>\n\n\n\n<p>Usaremos el proceso <strong><em>Cortar r\u00e1ster por capa de m\u00e1scara<\/em><\/strong> empleando las capas generadas en el apartado anterior.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-5 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire19.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1313\" height=\"747\" data-id=\"2227\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire19.png\" alt=\"\" class=\"wp-image-2227\"\/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire20.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"859\" height=\"799\" data-id=\"2228\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire20.png\" alt=\"\" class=\"wp-image-2228\"\/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"785\" height=\"846\" data-id=\"2229\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/fire21.png\" alt=\"\" class=\"wp-image-2229\"\/><\/figure>\n<\/figure>\n\n\n\n<p>Finalmente unimos ambas capas r\u00e1ster, para que rellenen una a la otra, usando <strong><em>Construir r\u00e1ster virtual<\/em><\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"dale-vida-con-cesium-js\">Dale vida con Cesium JS<\/h2>\n\n\n\n<p>Ya deber\u00edamos tener un <strong>modelo de superficies sin \u00e1rboles en la zona del incendio<\/strong>, pero vamos a intentar verlo de forma interactiva.<\/p>\n\n\n\n<p>Ya mostr\u00e9 un ejemplo parecido, usando un Modelo Digital del Terreno personalizado, as\u00ed como una imagen sat\u00e9lite reciente, del volc\u00e1n Tajogaite de La Palma:<\/p>\n\n\n\n<p><a href=\"https:\/\/theroamingworkshop.cloud\/b\/1319\/cesiumjs-el-visor-gratuito-de-mapas-en-3d-para-tu-web\/\">https:\/\/theroamingworkshop.cloud\/b\/1319\/cesiumjs-el-visor-gratuito-de-mapas-en-3d-para-tu-web\/<\/a><\/p>\n\n\n\n<p>En este caso volver\u00e9 a usar <strong>Cesium JS<\/strong> para poder interactuar f\u00e1cilmente con el mapa (sigue el post anterior para ver c\u00f3mo subir tus ficheros personalizados al visor Cesium JS).<\/p>\n\n\n\n<p>Para esta ocasi\u00f3n he creado una <strong>pantalla dividida<\/strong> (usando dos instancias de CesiumJS) para poder comparar <strong>el antes y el despu\u00e9s del incendio<\/strong>. Aqu\u00ed tienes una vista previa:<\/p>\n\n\n\n<p><a href=\"https:\/\/theroamingworkshop.cloud\/demos\/cesiumJSmirror\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/theroamingworkshop.cloud\/demos\/cesiumJSmirror\/<\/a><\/p>\n\n\n\n<iframe src=\"https:\/\/theroamingworkshop.cloud\/demos\/cesiumJSmirror\" style=\"border:none;width:100%;height:300px\"><\/iframe>\n\n\n\n<p>Espero que te guste! Aqu\u00ed tienes el c\u00f3digo completo y el enlace a <strong><em>github<\/em><\/strong> para que puedas descargarlo. Y recuerda, comparte tus dudas o comentarios en twitter!<\/p>\n\n\n\n<p>\ud83d\udc26 <code><a rel=\"noreferrer noopener\" href=\"https:\/\/twitter.com\/roamingworkshop\" target=\"_blank\">@RoamingWorkshop<\/a><\/code><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:5%\">\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2023\/04\/github.png\" alt=\"\" class=\"wp-image-2237\" width=\"46\" height=\"43\"\/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:95%\">\n<p><a href=\"https:\/\/github.com\/TheRoam\/cesiumJSmirror\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/github.com\/TheRoam\/cesiumJSmirror<\/a><\/p>\n<\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n&lt;meta charset=\"utf-8\"&gt;\n&lt;title&gt;Cesium JS mirror v1.0&lt;\/title&gt;\n&lt;script src=\"https:\/\/cesium.com\/downloads\/cesiumjs\/releases\/1.96\/Build\/Cesium\/Cesium.js\"&gt;&lt;\/script&gt;\n&lt;link href=\"https:\/\/cesium.com\/downloads\/cesiumjs\/releases\/1.96\/Build\/Cesium\/Widgets\/widgets.css\" rel=\"stylesheet\"&gt;\n&lt;\/head&gt;\n&lt;body style=\"margin:0;width:100vw;height:100vh;display:flex;flex-direction:row;font-family:Arial\"&gt;\n&lt;div style=\"height:100%;width:50%;\" id=\"cesiumContainer1\"&gt;\n\t&lt;span style=\"display:block;position:absolute;z-Index:1001;top:0;background-color: rgba(0, 0, 0, 0.5);color:darkorange;padding:13px\"&gt;06\/04\/2023&lt;\/span&gt;\n&lt;\/div&gt;\n&lt;div style=\"height:100%;width:50%;background-color:black;\" id=\"cesiumContainer2\"&gt;\n\t&lt;span style=\"display:block;position:absolute;z-Index:1001;top:0;background-color: rgba(0, 0, 0, 0.5);color:darkorange;padding:13px\"&gt;17\/02\/2023&lt;\/span&gt;\n\t&lt;span style=\"display:block;position:absolute;z-Index:1001;bottom:10%;right:0;background-color: rgba(0, 0, 0, 0.5);color:white;padding:13px;font-size:14px;user-select:none;\"&gt;\n\t\t&lt;b&gt;&lt;u&gt;Cesium JS mirror v1.0&lt;\/u&gt;&lt;\/b&gt;&lt;br&gt;\n\t\t\u00b7 Use the &lt;b&gt;left panel&lt;\/b&gt; to control the camera&lt;br&gt;\n\t\t\u00b7 &lt;b&gt;Click+drag&lt;\/b&gt; to move the position&lt;br&gt;\n\t\t\u00b7 &lt;b&gt;Control+drag&lt;\/b&gt; to rotate camera&lt;br&gt;\n\t\t\u00b7 &lt;b&gt;Scroll&lt;\/b&gt; to zoom in\/out&lt;br&gt;\n\t\t&lt;span&gt;&lt;a style=\"color:darkorange\" href=\"https:\/\/theroamingworkshop.cloud\" target=\"_blank\"&gt;\u00a9 The Roaming Workshop &lt;span id=\"y\"&gt;&lt;\/span&gt;&lt;\/a&gt;&lt;\/span&gt;\n    &lt;\/span&gt;\n&lt;\/div&gt;\n&lt;script&gt;\n\t\/\/ INSERT ACCESS TOKEN\n    \/\/ Your access token can be found at: https:\/\/cesium.com\/ion\/tokens.\n    \/\/ Replace `your_access_token` with your Cesium ion access token.\n\n    Cesium.Ion.defaultAccessToken = 'your_access_token';\n\n\t\/\/ Invoke LEFT view\n    \/\/ Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.\n\n    const viewerL = new Cesium.Viewer('cesiumContainer1', {\n\t\tterrainProvider: new Cesium.CesiumTerrainProvider({\n\t\t\turl: Cesium.IonResource.fromAssetId(1640615),\/\/get your asset ID from \"My Assets\" menu\n\t\t}),\t  \n\t\tbaseLayerPicker: false,\n\t\tinfoBox: false,\n    });    \n\n\t\/\/ Add Landsat imagery\n\tconst layerL = viewerL.imageryLayers.addImageryProvider(\n\t  new Cesium.IonImageryProvider({ assetId: 1640455 })\/\/get your asset ID from \"My Assets\" menu\n\t);\n\t\n\t\/\/ Hide bottom widgets\n\tviewerL.timeline.container.style.visibility = \"hidden\";\n\tviewerL.animation.container.style.visibility = \"hidden\";\n\n    \/\/ Fly the camera at the given longitude, latitude, and height.\n    viewerL.camera.flyTo({\n      destination : Cesium.Cartesian3.fromDegrees(-6.7200, 43.175, 6000),\n      orientation : {\n        heading : Cesium.Math.toRadians(15.0),\n        pitch : Cesium.Math.toRadians(-20.0),\n      }\n    });\n    \n    \/\/ Invoke RIGHT view\n\n    const viewerR = new Cesium.Viewer('cesiumContainer2', {\n\t\tterrainProvider: new Cesium.CesiumTerrainProvider({\n\t\t\turl: Cesium.IonResource.fromAssetId(1640502),\/\/get your asset ID from \"My Assets\" menu\n\t\t}),\t  \n\t\tbaseLayerPicker: false,\n\t\tinfoBox: false,\n    });    \n\n\t\/\/ Add Landsat imagery\n\tconst layerR = viewerR.imageryLayers.addImageryProvider(\n\t  new Cesium.IonImageryProvider({ assetId: 1640977 })\n\t);\n\t\n\t\/\/ Hide bottom widgets\n\tviewerR.timeline.container.style.visibility = \"hidden\";\n\tviewerR.animation.container.style.visibility = \"hidden\";\n\n    \/\/ Fly the camera at the given longitude, latitude, and height.\n    viewerR.camera.flyTo({\n      destination : Cesium.Cartesian3.fromDegrees(-6.7200, 43.175, 6000),\n      orientation : {\n        heading : Cesium.Math.toRadians(15.0),\n        pitch : Cesium.Math.toRadians(-20.0),\n      }\n    });\n    \n    \/\/ Invoke camera tracker\n    \/\/define a loop\n    var camInterval=setInterval(function(){\n\n\t},200);\n    clearInterval(camInterval);\n    \n    document.onmousedown=trackCam();\n    document.ondragstart=trackCam();\n    \n    \/\/define loop function (read properties from left camera and copy to right camera)\n    function trackCam(){\n\t\tcamInterval=setInterval(function(){\n\t\t\tviewerR.camera.setView({\n\t\t\t\tdestination: Cesium.Cartesian3.fromElements(\n\t\t\t\t\t  viewerL.camera.position.x,\n\t\t\t\t\t  viewerL.camera.position.y,\n\t\t\t\t\t  viewerL.camera.position.z\n\t\t\t\t\t),\n\t\t\t\torientation: {\n\t\t\t\t\tdirection : new Cesium.Cartesian3(\n\t\t\t\t\t\tviewerL.camera.direction.x,\n\t\t\t\t\t\tviewerL.camera.direction.y,\n\t\t\t\t\t\tviewerL.camera.direction.z),\n\t\t\t\t\tup : new Cesium.Cartesian3(\n\t\t\t\t\t\tviewerL.camera.up.x,\n\t\t\t\t\t\tviewerL.camera.up.y,\n\t\t\t\t\t\tviewerL.camera.up.z)\n\t\t\t\t},\n\t\t\t});\n\t\t},50);\n\t};\n\t\/\/stop loop listeners (release mouse or stop scroll)\n\tdocument.onmouseup=function(){\n\t\tclearInterval(camInterval);\n\t};\n\tdocument.ondragend=function(){\n\t\tclearInterval(camInterval);\n\t};\n\t\n\t\/\/keep the copyright date updated\n\tvar y=new Date(Date.now());\n\tdocument.getElementById(\"y\").innerHTML=y.getFullYear();\n  &lt;\/script&gt;\n&lt;\/div&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Tras varios art\u00edculos sobre el uso de informaci\u00f3n sat\u00e9lite vamos a ver c\u00f3mo unirlo (casi) todo en un ejemplo pr\u00e1ctico e impactante. Y es que el tama\u00f1o de los \u00faltimos incendios ocurridos en Espa\u00f1a han llamado mucho mi atenci\u00f3n y no era capaz de hacerme una idea de lo brutales que han sido (aunque nada [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2232,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[72,607,26],"tags":[262,270,274,260,100,258,96,242,244,236,246,248,234,238,268,256,98,254,102,252,250,170,152,154,266,264,272,240],"class_list":["post-2207","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3des","category-demos","category-map-es","tag-3d","tag-3d-map-viewer","tag-cesium-js","tag-digital-surface-model","tag-digital-terrain-model","tag-dsm","tag-dtm","tag-forest","tag-forest-fire","tag-forestal","tag-imagen-satelite","tag-imagery","tag-incendio","tag-incendio-forestal","tag-map-viewer","tag-mds","tag-mdt","tag-modelo-digital-de-superficies","tag-modelo-digital-del-terreno","tag-orthophoto","tag-ortogoto","tag-satelite","tag-satellite","tag-satellite-imagery","tag-viewer","tag-visor","tag-visor-de-mapas-3d","tag-wildfire","post-preview"],"_links":{"self":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/2207","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/comments?post=2207"}],"version-history":[{"count":13,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/2207\/revisions"}],"predecessor-version":[{"id":2249,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/2207\/revisions\/2249"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/media\/2232"}],"wp:attachment":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/media?parent=2207"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/categories?post=2207"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/tags?post=2207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}