Visualizar edificios 3D con Cesium y 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.

Cesium y OSM Buildings

OSM Buildings

Acceder a los datos de millones de edificios de todo el mundo ahora es posible con OSM Buildings. Incluye geometría de la huella, altura, tipo, identificación de origen y otras propiedades de los edificios disponibles. Es un servicio gratuito, aunque con algunas limitaciones.

Cesium y OSM Buildings

OSM buildings dispone de una API propia que nos permite crear un mapa y acceder a los datos. Sin embargo en esta ocasión no vamos a utilizarla, emplearemos Cesium para construir el mapa pues nos ofrece algunas herramientas interesantes adicionales.

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 a partir de los datos de OSM Buildings. Lo primero es incorporar a nuestro código el enlace a Cesium:

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

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.

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 OSM Building escribimos:

Cesium nos facilita el método createOsmBuildings para crear  una nueva capa a partir de los datos de 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 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:

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 OSM buildings

Lo visto hasta el momento es muy interesante pero podemos hacer más cosas con OSM Buildings 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 OSM Buildings por esta otra:

Como se observa en las líneas anteriores estamos definiendo un nuevo estilo para la capa de 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».

Cesium y OSM Buildings

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

Si quieres aprender a crear visualizaciones 3D como estas inscríbete ya en nuestro curso online desarrollo de aplicaciones webmapping.

Let’s connect!

Date de alta en nuestra newsletter
y recibe este ebook gratuito

Y una vez al mes recibirás las últimas novedades del sector GIS y de nuestros cursos

Deja un comentario