Tutorial desarrollo de un mapa 3D interactivo con Sofia2

image1

En el siguiente tutorial vamos a ver cómo realizar un mapa 3d interactivo en Sofia2. Para ello, vamos a utilizar la potente tecnología de visualización en nodejs CesiumJS.

image2

Usaremos el API JavaScript de Sofia2 para acceder a varias ontologías que representan 3 tipos de puntos en el mapa sobre la geografía de España, con sus datos asociados:

  • Playas: GSMA_PointOfInterest_Beach
  • Museos: GSMA_PointOfInterest_Museum
  • Parkings: GSMA_OffStreetParking_Destino

Las instancias de estas ontologías estarán georreferenciadas por lo que tendrán un atributo de tipo geometry que representará la posición.

El primer paso, será descargarnos e instalarnos NodeJS y CesiumJS que servirá como base para poder empezar a trabajar. Desde los siguientes enlaces, podemos descargarnos ambas herramientas:

Una vez que tenemos el CesiumJS instalado correctamente, podemos arrancarlo con el siguiente comando:


node server.js

Dentro de la carpeta Apps se podrán ver todas las aplicaciones y ejemplos que vienen con CesiumJS. Podremos navegar por las mismas con el servidor arrancado desde nuestro navegador, con lo que podremos acceder a través de la url y el puerto por defecto que tiene: localhost:8080

image3

image4

Con todo lo anterior hecho, vamos a crear un nuevo HTML que alojará el visor 3D DGSMA.html y un subdirectorio para los archivos necesarios “datosGSMA” del mismo. Quedará la siguiente estructura:

image5

Dentro de la carpeta de datosGSMA tendremos varios subdirectorios:

image6

  • Conexión: script en lenguaje javascript para la conexión con Sofia2, donde se alojan los datos de conexión, así como las diferentes queries que se lanzarán a la plataforma para recuperar los datos necesarios del ejemplo.
  • Css: hoja de estilos para el ejemplo
  • Imágenes: archivos de imagen tanto para los iconos como para el fondo

Todo el código e imágenes, lo podéis descargar desde el github de la plataforma https://github.com/Sofia2/Sofia2-3DViewer

Dentro del archivo HTML principal tendremos varias partes interesantes que vamos a explicar a continuación:

image7

Cómo se ve en la imagen, tendremos un contenedor completo que alojará el mapa en el fondo con un identificador “cesiumContainer”. Este elemento, englobará al mapa que estará en el fondo de la página.

También, tenemos otras partes de estructura interesantes, como los paneles lateral e inferior donde alojaremos los gráficos de los parkings, así como un panel overlay que se nos mostrará durante la carga del visor 3D. Como se puede ver en las importaciones de librerías en la parte de la cabecera, los gráficos están construidos en SVG sobre D3 a través de la librería NVD3 http://nvd3.org/.

Otras partes a destacar son la propia carga del visor de CesiumJS:

image8

La función startup se llamará al inicio de la carga del visor con todas las opciones necesarias para el mismo, que se dibujarán en el div completo de fondo con todos los elementos visuales e interactivos que dispone la demo. A la vez que se cargan estos datos se realizará la conexión contra Sofia2, la cual se realiza desde el js de la carpeta conexión conexionAdministrador.js

En este archivo se puede ver la conexión “Join” con la plataforma sofia2

image9

Así como las diferentes queries que se lanzan para recuperar los datos necesarios que se dibujan en el mapa.

image10

Volviendo al código principal, para combinar los datos de Sofia2 con los de CesiumJS tendremos que construir las entidades de visualización de CesiumJS. Estas entidades, son las estructuras que usa CesiumJS para dibujar diferentes elementos tanto interactivos como no en el mapa. Por cada tipo de datos a mostrar (playas, parkings y museos) se rellenarán los datos necesarios desde las instancias recuperadas por el API JS incluida la posición de los mismos en el mapa. En esta parte también se incluran las referencias correspondientes a las imágenes de los marcadores.

image11

Una vez creadas y dadas de alta esas entidades en CesiumJS, el propio motor se encargará de colocar estos elementos en el mapa, así como actuar mostrando un overlay con los datos al hacer clic en cualquiera de los marcadores.

Para poder mostrar y ocultar estos marcadores, poseemos el panel lateral, donde al hacer clic en una capa de datos podremos ponerlos o quitarlos del mapa.

image12

A parte de las interacciones con las diferentes capas (las cuales se actualizarán creando o destruyendo las diferentes entidades en el motor), se realizará un “vuelo” en el mapa a las nuevas localizaciones incluidas o al mapa general (al desmarcar). La clave de esto es la función flyTo de la cámara del viewer que realizará un suave vuelo a la posición pasada por parámetro.

image13

Por último, en la parte de gráficos, como ya hemos comentado se ha usado nvd3 (librería sobre D3) por lo que una vez recuperados los datos necesarios de Sofia2, podremos hacer la llamada a la librería de nvd3 que se encargará de pintar tanto el gráfico de tipo Pie como el gráfico de tipo barra con los datos de los diferentes parkings.

image14

image15

Tutorial desarrollo de un mapa 3D interactivo con Sofia2

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s