{"id":1319,"date":"2022-09-06T21:00:29","date_gmt":"2022-09-06T20:00:29","guid":{"rendered":"https:\/\/theroamingworkshop.cloud\/b\/?p=1319"},"modified":"2022-10-24T20:02:24","modified_gmt":"2022-10-24T19:02:24","slug":"cesiumjs-el-visor-gratuito-de-mapas-en-3d-para-tu-web","status":"publish","type":"post","link":"https:\/\/theroamingworkshop.cloud\/b\/1319\/cesiumjs-el-visor-gratuito-de-mapas-en-3d-para-tu-web\/","title":{"rendered":"CesiumJS: el visor gratuito de mapas en 3D para tu web"},"content":{"rendered":"\n<p>El pasado julio, la revista Nature publicaba un <a rel=\"noreferrer noopener\" href=\"https:\/\/www.nature.com\/articles\/s41597-022-01551-8\" target=\"_blank\">Modelo Digital de Superficies en alta definici\u00f3n<\/a> de la nueva orograf\u00eda creada por el volc\u00e1n Tajogaite de La Palma durante su erupci\u00f3n en el a\u00f1o 2021. Un trabajo espectacular del <a rel=\"noreferrer noopener\" href=\"https:\/\/ingv.it\" target=\"_blank\">Istituto Nazionale di Geofisica e Vulcanologia<\/a> junto con el <a rel=\"noreferrer noopener\" href=\"https:\/\/involcan.org\" target=\"_blank\">Instituto Vulcanol\u00f3gico de Canarias<\/a>.<\/p>\n\n\n\n<p>Lo habitual es ver y trabajar con estos ficheros en alg\u00fan programa de SIG como QGIS o ArcGIS, pero \u00bfc\u00f3mo lo acercamos al resto de usuarios ?\u00bfNo ser\u00eda mejor verlo directamente en 3D y visitarlo virtualmente?<\/p>\n\n\n\n<p>Aqu\u00ed es donde me top\u00e9 con <a rel=\"noreferrer noopener\" href=\"https:\/\/cesium.com\/platform\/cesiumjs\/\" target=\"_blank\">CesiumJS<\/a>: un visor de mapas en 3D al estilo del famoso [G] Earth, pero de c\u00f3digo abierto, gratuito y altamente personalizable para hacer tus propios proyectos.<\/p>\n\n\n\n<div style=\"border:1px solid black;border-radius:5px;padding:5px 5px 5px 5px;font-size:12px;font-family:'Verdana';\">Demo del visor CesiumJS con la nueva cartograf\u00eda del volc\u00e1n Tajogaite con imagen satelital de IDE Canarias. Clicka en el mapa para interactuar con \u00e9l, o \u00e1brelo en su <a href=\"https:\/\/theroamingworkshop.cloud\/demos\/tajogaite\" target=\"_blank\" rel=\"noopener\">versi\u00f3n completa<\/a>.<br><br>\n<iframe src=\"https:\/\/theroamingworkshop.cloud\/demos\/tajogaite\" style=\"border:none;width:100%;height:300px\"><\/iframe><\/div>\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\nwindow.setTimeout(fillmenu,2000);\n\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"cuenta-cesium-ion\">Crear cuenta de Cesium ion<\/h2>\n\n\n\n<p>Para utilizar CesiumJS es necesario <a rel=\"noreferrer noopener\" href=\"https:\/\/cesium.com\/ion\/signup\/\" target=\"_blank\">registrar una cuenta<\/a> para crear un c\u00f3digo de acceso o <strong>Access Token<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium3.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"534\" height=\"389\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium3.png\" alt=\"\" class=\"wp-image-1321\" srcset=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium3.png 534w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium3-300x219.png 300w\" sizes=\"auto, (max-width: 534px) 100vw, 534px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>Adem\u00e1s, registr\u00e1ndonos podremos subir nuestros propios ficheros y personalizar las vistas 3D que crearemos. Ver\u00e1s que en mi caso he subido el Modelo Digital de Superficies y la imagen sat\u00e9lite que usa el visor. Dejo aqu\u00ed los enlaces por si quieres usar los mismos:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Modelo Digital de Superficies del volc\u00e1n de La Palma de enero de 2022.<\/strong><br>Formato geoTIFF con paso de malla de 0'2 metros.<br><a href=\"https:\/\/portal.opentopography.org\/dataspace\/dataset?opentopoID=OTDS.032022.4083.1#panel_head_files\">https:\/\/portal.opentopography.org\/dataspace\/dataset?opentopoID=OTDS.032022.4083.1#panel_head_files<\/a><\/li><li><strong>Ortofoto sat\u00e9lite 50cm enero 2022 del IDE Canarias<\/strong><br><a href=\"https:\/\/idecan1.grafcan.es\/ServicioWMS\/ErupcionLP2021?SERVICE=WMS&amp;request=GetMap&amp;version=1.1.1&amp;layers=ORTO_14012022_SAT50&amp;format=image%2Fjpeg&amp;transparent=true&amp;width=1200&amp;height=800&amp;srs=EPSG:4326&amp;bbox=-17.93,28.58,-17.83,28.65\">https:\/\/idecan1.grafcan.es\/ServicioWMS\/ErupcionLP2021?SERVICE=WMS&amp;request=GetMap&amp;version=1.1.1&amp;layers=ORTO_14012022_SAT50&amp;format=image%2Fjpeg&amp;transparent=true&amp;width=1200&amp;height=800&amp;srs=EPSG:4326&amp;bbox=-17.93,28.58,-17.83,28.65<\/a><\/li><\/ul>\n\n\n\n<p style=\"border-left:3px solid orange;padding-left:5px;font-size:14px;\"><i><b>TIP! <\/b>Puedes usar el <a href=\"https:\/\/idecan1.grafcan.es\/ServicioWMS\/ErupcionLP2021?SERVICE=WMS\" target=\"_blank\" rel=\"noopener\">servicio WMS<\/a> en tu visor GIS para obtener una ortofoto completa, o <a href=\"https:\/\/theroamingworkshop.cloud\/demos\/tajogaite\/IDECanarias_20220114_1m.tif\" target=\"_blank\" rel=\"noopener\">descargar<\/a> la que uso yo para este ejemplo (270 MB con resoluci\u00f3n de 1m)<\/i><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium4.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"902\" height=\"617\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium4.png\" alt=\"\" class=\"wp-image-1322\" srcset=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium4.png 902w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium4-300x205.png 300w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium4-768x525.png 768w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium4-676x462.png 676w\" sizes=\"auto, (max-width: 902px) 100vw, 902px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"incorporar-cesium-js\">Incorporar CesiumJS a tu web.<\/h2>\n\n\n\n<p>Para usar CesiumJS configuramos un fichero .html como ya viene siendo habitual.<\/p>\n\n\n\n<p>En este caso voy a copiar directamente uno de sus <a rel=\"noreferrer noopener\" href=\"https:\/\/cesium.com\/learn\/cesiumjs-learn\/cesiumjs-quickstart\/\" target=\"_blank\">ejemplos<\/a> ya que apenas tiene unas 25 l\u00edneas:<\/p>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <!-- Include the CesiumJS JavaScript and CSS files -->\n  <script src=\"https:\/\/cesium.com\/downloads\/cesiumjs\/releases\/1.97\/Build\/Cesium\/Cesium.js\"><\/script>\n  <link href=\"https:\/\/cesium.com\/downloads\/cesiumjs\/releases\/1.97\/Build\/Cesium\/Widgets\/widgets.css\" rel=\"stylesheet\">\n<\/head>\n<body>\n  <div id=\"cesiumContainer\"><\/div>\n  <script>\n    \/\/ Your access token can be found at: https:\/\/cesium.com\/ion\/tokens.\n    \/\/ This is the default access token from your ion account\n    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1MTYwNGM0Yi1iYzlkLTRkMTUtOGQyOS04YjQxNmUwZDQ0YjkiLCJpZCI6MTA0Mjc3LCJpYXQiOjE2NjAxMDk4MzR9.syNWeKPLWA2eMrEh4K9hvkyp1oGdbLMaL0Ozk1kaksk';\n    \/\/ Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.\n    const viewer = new Cesium.Viewer('cesiumContainer', {\n      terrainProvider: Cesium.createWorldTerrain()\n    });    \n    \/\/ Add Cesium OSM Buildings, a global 3D buildings layer.\n    const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());   \n    \/\/ Fly the camera to San Francisco at the given longitude, latitude, and height.\n    viewer.camera.flyTo({\n      destination : Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),\n      orientation : {\n        heading : Cesium.Math.toRadians(0.0),\n        pitch : Cesium.Math.toRadians(-15.0),\n      }\n    });\n  <\/script>\n <\/div>\n<\/body>\n<\/html>\n\n\n\n<p>Como ver\u00e1s, las partes fundamentales son las siguientes:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>enlaces a las librer\u00edas de CesiumJS en el <code>&lt;head&gt;<\/code><\/li><li>un elemento <code>&lt;div&gt;<\/code> con id <code>\"cesiumContainer\"<\/code> dentro del <code>&lt;body&gt;<\/code><\/li><li>el c\u00f3digo de acceso dentro de la variable <code>Cesium.Ion.defaultAccessToken<\/code>. Introduce aqu\u00ed la tuya.<\/li><li>una variable de visor llamada <code>\"viewer\"<\/code><\/li><li>la configuraci\u00f3n inicial del visor, especificando las coordenadas iniciales, y los \u00e1ngulos de inclinaci\u00f3n X y Z.<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n  &lt;meta charset=\"utf-8\"&gt;\n  &lt;!-- Include the CesiumJS JavaScript and CSS files --&gt;\n  &lt;script src=\"https:\/\/cesium.com\/downloads\/cesiumjs\/releases\/1.97\/Build\/Cesium\/Cesium.js\"&gt;&lt;\/script&gt;\n  &lt;link href=\"https:\/\/cesium.com\/downloads\/cesiumjs\/releases\/1.97\/Build\/Cesium\/Widgets\/widgets.css\" rel=\"stylesheet\"&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;div id=\"cesiumContainer\"&gt;&lt;\/div&gt;\n  &lt;script&gt;\n    \/\/ Your access token can be found at: https:\/\/cesium.com\/ion\/tokens.\n    \/\/ This is the default access token from your ion account\n    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1MTYwNGM0Yi1iYzlkLTRkMTUtOGQyOS04YjQxNmUwZDQ0YjkiLCJpZCI6MTA0Mjc3LCJpYXQiOjE2NjAxMDk4MzR9.syNWeKPLWA2eMrEh4K9hvkyp1oGdbLMaL0Ozk1kaksk';\n    \/\/ Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.\n    const viewer = new Cesium.Viewer('cesiumContainer', {\n      terrainProvider: Cesium.createWorldTerrain()\n    });    \n    \/\/ Add Cesium OSM Buildings, a global 3D buildings layer.\n    const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());   \n    \/\/ Fly the camera to San Francisco at the given longitude, latitude, and height.\n    viewer.camera.flyTo({\n      destination : Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),\n      orientation : {\n        heading : Cesium.Math.toRadians(0.0),\n        pitch : Cesium.Math.toRadians(-15.0),\n      }\n    });\n  &lt;\/script&gt;\n &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p style=\"border-left:3px solid orange;padding-left:5px;font-size:14px;\"><i><b>TIP! <\/b>Tambi\u00e9n puedes <a href=\"https:\/\/cesium.com\/downloads\/\" target=\"_blank\" rel=\"noopener\">descargar las librer\u00edas de CesiumJS<\/a> y usarlas de forma local o en tu servidor.<\/i><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"a\u00f1adir-terreno\">A\u00f1adir un terreno personalizado<\/h2>\n\n\n\n<p>Seguimos los <a href=\"https:\/\/cesium.com\/learn\/3d-tiling\/ion-tile-terrain\/\" target=\"_blank\" rel=\"noreferrer noopener\">pasos de la p\u00e1gina de Cesium<\/a>:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>En tu cuenta de Cesium ion, a\u00f1adimos un nuevo terreno en <strong>Add data<\/strong>.<\/li><\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium5.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"271\" height=\"124\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium5.png\" alt=\"\" class=\"wp-image-1324\"\/><\/a><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\"><li>Seleccionamos el fichero y elegimos el tipo de datos <strong>Raster Terrain<\/strong><\/li><\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/Cesium6-1.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"502\" height=\"228\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/Cesium6-1.png\" alt=\"\" class=\"wp-image-1326\" srcset=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/Cesium6-1.png 502w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/Cesium6-1-300x136.png 300w\" sizes=\"auto, (max-width: 502px) 100vw, 502px\" \/><\/a><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\"><li>Dentro de las opciones de terreno, elegimos como terreno base <strong>Main Sea Level<\/strong> y dejamos el resto por defecto.<\/li><\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium7.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"504\" height=\"366\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium7.png\" alt=\"\" class=\"wp-image-1327\" srcset=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium7.png 504w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium7-300x218.png 300w\" sizes=\"auto, (max-width: 504px) 100vw, 504px\" \/><\/a><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\"><li>Al subirse el fichero, ya nos aparecer\u00e1 un <strong>extracto de c\u00f3digo<\/strong> para usar este nuevo terreno.<\/li><\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium8.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"549\" height=\"765\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium8.png\" alt=\"\" class=\"wp-image-1328\" srcset=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium8.png 549w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium8-215x300.png 215w\" sizes=\"auto, (max-width: 549px) 100vw, 549px\" \/><\/a><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"a\u00f1adir-ortofoto\">A\u00f1adir ortofoto<\/h2>\n\n\n\n<p>Repetimos lo anterior, en este caso subiendo el fichero de imagen sat\u00e9lite y eligiendo el tipo de datos <strong>Raster Imagery<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium9.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"510\" height=\"387\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium9.png\" alt=\"\" class=\"wp-image-1329\" srcset=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium9.png 510w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium9-300x228.png 300w\" sizes=\"auto, (max-width: 510px) 100vw, 510px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>En este caso, tambi\u00e9n se nos indica un extracto de c\u00f3digo para utilizar dicha imagen.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium10.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"550\" height=\"727\" src=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium10.png\" alt=\"\" class=\"wp-image-1330\" srcset=\"https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium10.png 550w, https:\/\/theroamingworkshop.cloud\/b\/wp-content\/uploads\/2022\/09\/cesium10-227x300.png 227w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/a><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"personalizar-visor\">Personalizando el visor final<\/h2>\n\n\n\n<p>A\u00f1adimos todo esto a nuestro fichero .html y lo personalizamos a nuestro gusto. Por ejemplo podemos:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Ajustar los elementos contenedores para que ocupen toda la pantalla:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;body style=\"margin:0;width:100vw;height:100vh;\"&gt;\n&lt;div style=\"height:100%;\" id=\"cesiumContainer\"&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Esconder los controles inferiores:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>viewer.timeline.container.style.visibility = \"hidden\";\nviewer.animation.container.style.visibility = \"hidden\";<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Modificar las coordenadas de la vista inicial para centrarla en nuestro emplazamiento:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>viewer.camera.flyTo({\n    destination : Cesium.Cartesian3.fromDegrees(-17.8195, 28.6052, 3000),\n    orientation : {\n    heading : Cesium.Math.toRadians(-85.0),\n    pitch : Cesium.Math.toRadians(-30.0),\n    }\n});<\/code><\/pre>\n\n\n\n<p>El resultado ya lo habr\u00e1s visto en varias ocasiones:<\/p>\n\n\n\n<iframe src=\"https:\/\/theroamingworkshop.cloud\/demos\/tajogaite\" style=\"border:none;width:100%;height:300px\"><\/iframe>\n\n\n\n<p>Y su c\u00f3digo completo es este:<\/p>\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\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;\"&gt;\n&lt;div style=\"height:100%;\" id=\"cesiumContainer\"&gt;&lt;\/div&gt;\n&lt;script&gt;\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 = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1MTYwNGM0Yi1iYzlkLTRkMTUtOGQyOS04YjQxNmUwZDQ0YjkiLCJpZCI6MTA0Mjc3LCJpYXQiOjE2NjAxMDk4MzR9.syNWeKPLWA2eMrEh4K9hvkyp1oGdbLMaL0Ozk1kaksk';\n\n    \/\/ Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.\n    const viewer = new Cesium.Viewer('cesiumContainer', {\n      \/\/terrainProvider: Cesium.createWorldTerrain()\/\/terreno original\n\t\tterrainProvider: new Cesium.CesiumTerrainProvider({\/\/terreno modificado\n\t\t\turl: Cesium.IonResource.fromAssetId(1255858),\n\t\t}),\t  \n    });    \n\t\n\t\/\/ Esconder widgest inferiores\n\tviewer.timeline.container.style.visibility = \"hidden\";\n\tviewer.animation.container.style.visibility = \"hidden\";\n\t\n\t\/\/ Add Sentinel2 imagery\n\tconst layer = viewer.imageryLayers.addImageryProvider(\n\t  new Cesium.IonImageryProvider({ assetId: 1256129 })\n\t);\n    \/\/ Add Cesium OSM Buildings, a global 3D buildings layer.\n    const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());   \n    \/\/ Fly the camera to San Francisco at the given longitude, latitude, and height.\n    viewer.camera.flyTo({\n      destination : Cesium.Cartesian3.fromDegrees(-17.8195, 28.6052, 3000),\n      orientation : {\n        heading : Cesium.Math.toRadians(-85.0),\n        pitch : Cesium.Math.toRadians(-30.0),\n      }\n    });\n  &lt;\/script&gt;\n&lt;\/div&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>Y esto es todo! Ver\u00e1s que puedes crear infinidad de aplicaciones web inmersivas con terrenos detallados por los usuarios y m\u00e1s precisos que los gen\u00e9ricos.<\/p>\n\n\n\n<p>\u00bfSe te ocurre qu\u00e9 m\u00e1s hacer con CesiumJS? Cu\u00e9ntalo en Twitter \ud83d\udc26<\/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","protected":false},"excerpt":{"rendered":"<p>El pasado julio, la revista Nature publicaba un Modelo Digital de Superficies en alta definici\u00f3n de la nueva orograf\u00eda creada por el volc\u00e1n Tajogaite de La Palma durante su erupci\u00f3n en el a\u00f1o 2021. Un trabajo espectacular del Istituto Nazionale di Geofisica e Vulcanologia junto con el Instituto Vulcanol\u00f3gico de Canarias. Lo habitual es ver [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1320,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26],"tags":[],"class_list":["post-1319","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-map-es","post-preview"],"_links":{"self":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/1319","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=1319"}],"version-history":[{"count":4,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/1319\/revisions"}],"predecessor-version":[{"id":1586,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/posts\/1319\/revisions\/1586"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/media\/1320"}],"wp:attachment":[{"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/media?parent=1319"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/categories?post=1319"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theroamingworkshop.cloud\/b\/wp-json\/wp\/v2\/tags?post=1319"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}