Visualizar edificios 3D con Cesium OSM Buildings

Los avances tecnológicos aplicados a la cartografía hacen que cada vez sea más frecuente el uso de mapas 3D. Actualmente se dispone de cantidades ingentes de datos y de dispositivos capaz de procesarlos eficazmente lo que permite el paso de los mapas de dos dimensiones a 3D. Una de las aplicaciones que tiene un mayor grado de desarrollo es la referente a los datos de los edificios de las ciudades. Ahora mismo ya hay bases de datos libres que nos dan acceso a los datos de millones de edificios de todo el mundo con un cantidad de datos abrumadora. Una de las bases de datos de edificios más completa es la de OSM Buildings. Podemos visualizar los edificios contenidos en esta base de datos mediante Cesium. Veamos cómo hacerlo.

¿Qué es Cesium OSM Buildings?

Acceder a los datos de millones de edificios de todo el mundo ahora es posible con Cesium OSM Buildings. Cesium OSM Buildings es una capa de edificios 3D derivada de OpenStreetMap, que cubre todo el mundo. Contiene más de 350 millones de edificios con datos por función como nombre, dirección, si un edificio es comercial o residencial, y más.

En este momento se hace necesario comentar la polémica que existe en torno al término OSM Building entre Cesium y OSM Buildings. Cesium utiliza el término Cesium OSM Buildings en su producto, parece ser que por temas de SEO y marketing, apropiándose del término (que no está registrado) OSM Building.

Esto no ha gustado nada a los desarrolladores de OSM Building, afirmando:

Cada día que mantenemos OSM Buildings en funcionamiento, apoyamos a un competidor multimillonario (Cesium)

Cesium OSM Buildings es una capa de edificios 3D que cubre todo el mundo. Está disponible como un conjunto de teselas 3D en Cesium ion, listo para usar en aplicaciones personalizadas con CesiumJS o cualquier cliente que admita mosaicos 3D.

Cesium

Como ya indicamos en otra entrada de este blog, Cesium es una herramienta para crear mapas 3D en la web. Dispone de dos aplicaciones básicas:

• Cesium ion: es la encargada de almacenar y procesar nuestros datos y especialmente de los mapas de tiles 3D.
• CesiumJS: es una librería JavaScript que es la herramienta para crear y publicar los mapas.

El tándem Cesium ion- CesiumJS es lo que lo convierte en una herramienta tan potente para el tratamiento de los datos 3D.

CesiumJS

Como hemos indicado antes vamos a utilizar CesiumJS para crear un mapa 3D de edificios. Lo primero es incorporar a nuestro código el enlace a Cesium:

  <script src="https://cesium.com/downloads/cesiumjs/releases/1.71/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.71/Build/Cesium/Widgets/widgets.css" rel="stylesheet">

A continuación, debemos crear un contenedor para alojar el mapa:

 <div id="cesiumContainer" style="width: 800px; height:600px"></div>

Ahora podemos comenzar a desarrollar el mapa. Si vamos a utilizar los recursos de Cesium ion necesitaremos indicar nuestra clave personal de Cesium que habremos obtenido al crear la cuenta.

 Cesium.Ion.defaultAccessToken = 'Tu clave';

    var viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider : new Cesium.CesiumTerrainProvider({
        url : Cesium.IonResource.fromAssetId(1),
        })
    });

En el código anterior estamos utilizando Cesium.Viewer que es el elemento de la librería que nos crea un mapa de Cesium. Como primer parámetro le indicamos el contenedor que aloja el mapa (cesiumContainer) y a continuación indicamos las opciones. Deseamos visualizar la capa Cesium Terrain, como base para nuestro mapa por lo tanto creamos una instancia a CesiumTerrainProvider. Este método recibe como opción la url del recurso que  nos proporciona Cesium ion.

Hasta el momento tenemos una vista del globo terráqueo de Cesium con la capa Terrain. Para añadir la capa la capa de Cesium OSM Building escribimos:

 viewer.scene.primitives.add(Cesium.createOsmBuildings());

Cesium nos facilita el método createOsmBuildings para crear  una nueva capa a partir de los datos de Cesium OSM Buildings. Esa nueva escena que estamos creando la añadimos a nuestra vista. El resultado es un mapa con la capa Terrain sobre la que podemos ver los edificios en 3D:

Configurando una vista en Cesium

De momento hemos creado el mapa de Cesium y añadido la capa de Cesium OSM Building pero en una vista global. Vamos a localizar el mapa en un lugar de interés, para ello definimos unas coordenadas geográficas con la ubicación deseada y definimos otros parámetros de la siguiente forma:

viewer.camera.flyTo({ 
    destination : Cesium.Cartesian3.fromDegrees(-3.7070 , 40.41829, 800), 
      orientation : { 
       heading : Cesium.Math.toRadians(270.0), 
       pitch : Cesium.Math.toRadians(-10.0), 
      } 
     });

La cámara en Cesium hace referencia a la vista de una escena en el mapa. Es un termino muy apropiado pues indica claramente cual es su función. Se trata de elegir una ubicación (destination) que proporcionamos indicando las coordenadas geográficas (-3.7070 , 40.41829), que se corresponden con la longitud y latitud de la ciudad de Madrid (España).  También necesitamos indicar la altura en que se sitúa la cámara (800 metros). Para este dato hemos tenido en cuenta la altitud de la ciudad de Madrid que es de aproximadamente 650 metros en la zona seleccionada. Aunque hay muchas otras opciones las básicas son las que incluimos en el código anterior. Definimos la orientación de la cámara con dos parámetros:

• heading, hace referencia a la orientación respecto al norte. En nuestro ejemplo deseamos que la vista se dirija hacia el oeste desde el punto que hemos definido antes.
• pitch, indica grado de inclinación de la cámara. Deseamos que la cámara que como indicamos anteriormente está situada a 800 metros, se oriente hacia el suelo. Por eso damos un valor de -10.0.

Como resultado de lo anterior obtenemos una vista del mapa centrada sobre el teatro Real de Madrid.

Dar estilo a los edificios de Cesium OSM Buildings

Lo visto hasta el momento es muy interesante pero podemos hacer más cosas con Cesium aprovechando los datos que nos facilita de cada edificio. Una de las posibilidades es cambiar el color de los edificios en función de sus atributos. Para hacer eso cambiamos la escena que habíamos creado antes para Cesium OSM Buildings por esta otra:

viewer.scene.primitives.add(Cesium.createOsmBuildings({
      style: new Cesium.Cesium3DTileStyle({
        color: {
          conditions: [
            ["${feature['building']} === 'hospital'", "color('#0000FF')"],
            ["${feature['building']} === 'school'", "color('#00FF00')"],
            ["${feature['name']} === 'Teatro Real'", "color('#A52A2A')"],
            [true, "color('#ffffff')"]
          ]
        }
      })
    }));

Como se observa en las líneas anteriores estamos definiendo un nuevo estilo para la capa de Cesium OSM Buildings. Concretamente indicamos un color para las features que tienen como atributo «hospital» y «school». Además podemos seleccionar un edificio concreto mediante su nombre, como este ejemplo en donde cambiamos el color del «Teatro Real».

A continuación incluimos el código al completo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.71/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.71/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer" style="width: 800px; height:600px"></div>
  <script>
       
    Cesium.Ion.defaultAccessToken = 'Tu clave';

    var viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider : new Cesium.CesiumTerrainProvider({
        url : Cesium.IonResource.fromAssetId(1),
        })
    });
     
    //viewer.scene.primitives.add(Cesium.createOsmBuildings());

    viewer.scene.primitives.add(Cesium.createOsmBuildings({
      style: new Cesium.Cesium3DTileStyle({
        color: {
          conditions: [
            ["${feature['building']} === 'hospital'", "color('#0000FF')"],
            ["${feature['building']} === 'school'", "color('#00FF00')"],
            ["${feature['name']} === 'Teatro Real'", "color('#A52A2A')"],
            [true, "color('#ffffff')"]
          ]
        }
      })
    }));

   viewer.camera.flyTo({ 
    destination : Cesium.Cartesian3.fromDegrees(-3.7070 , 40.41829, 800), 
      orientation : { 
       heading : Cesium.Math.toRadians(270.0), 
       pitch : Cesium.Math.toRadians(-10.0), 
      } 
     }); 

   
  </script>
</body>
</html>

Jose Luis García Grandes

Tutor del curso online de Análisis GeoEspacial con Python y de los cursos online de webmapping. Echa un vistazo a todos nuestros cursos de SIG online.