GeoExt 3: enriquece tus visores webmapping de OpenLayers

¿Que es GeoExt 3?

GeoExt 3 es un conjunto de herramientas, basadas en JavaScript, para crear aplicaciones web mapping. Combina la funcionalidad SIG de OpenLayers con la interfaz de usuario de la librería ExtJS, proporcionada por Sencha.

GeoExt es una librería de código abierto que permite crear aplicaciones GIS similares a las de escritorio, pero en la web.

Allá por noviembre de 2012 hablábamos de GeoExt 2 como solución para enriquecer las aplicaciones webmapping construidas con OpenLayers 2.

La versión 3 de GeoExt es la sucesora de la serie GeoExt 2.x y está construido sobre las nuevas librerías de OpenLayers 4 y ExtJS 6.

OpenLayers 3 supuso una reescritura completa de la liberia webmapping, con un nuevo diseño del código de de la API, por lo que la versión actualil de GeoExt (la 2.x) no es compatible con openLayers 3. Los cambios que afectan a GeoExt son enormes y es necesario construir la nueva liberrñia de GeoExt sobre unos buenos cimientos.

GeoExt 3 se está desarrollando activamente y no se ha liberado aún. No hay características y funciones completas, ni se ha testeado completamente.

El objetivo es implementar las próximas versiones de GeoExt como ExtJS-Package.

OpenLayers 3 muestra los datos geoespaciales en cualquier navegador web de escritorio moderno o móvil. Al igual que OpenLayers 2, es compatible con una gran variedad de tipos de datos y capas. Pero a diferencia de la anterior versión, se construye desde cero basándose en las últimas tecnologías de navegación como HTML5, WebGL y CSS3.

Sin embargo OpenLayers carece de una rica interfaz de usuario. Para solucionar esto contamos con la librería Ext JS.

La combinación de OpenLayers 3 y GeoExt 3 es la combinación perfecta para crear una aplicación web mapping.

GeoExt 3 está construido sobre las librerías OpenLayers 4.3 y ExtJS 6.2.0.

¿Cómo se utiliza?

En primer lugar es necesario añadir las librerías css a la cabecera de nuestra web:

y las librerías js:

Dentro del script ya podremos utilizar las clases propias de la librería GeoExt:

Las 106 líneas de código del archivo panel.js las podemos ver aquí.

Vamos a ver algunas líneas de este código para ver como trabajan juntas las librerías de OpenLayers y de GeoExt:

En el primer bloque se crea el mapa con OpenLayes 3, mediante el uso de clase ol.Map. En el segundo bloque (mapComponent) se crea el Mapa de GeoExt que contiene el mapa que se acaba de crear con OpenLayers y en el tercer bloque (mapPanel) se crea el panel de capas.

Un ejemplo de lo que podemos hacer con GeoExt 3

Cuando creamos un mapa web con OpenLayers 3 obtenemos un visor como este:

ejemplo de mapa creado con openlayers3 capa de d3

Pero con algunas líneas más de código podemos conseguir una aplicación web de mapas con más funcionalidades:

ejemplo de mapa creado con geoext3
Mapa creado con GeExt que muestra dos paneles de capas. El panel izquierdo es creado pasando una colecciónde OpenLayers (ol.Collection) con objetos geográficos (ol.Feature). El panel derecho se crea a partir de una capa vectorial existente y también  ilumina el objeto que es seleccionado.

Más ejemplos

Mapa de GeoExt

Mapa de localización

Panel de árbol con leyendas

Impresión

Ventanas emergentes

Mostrar capas en paneles para interacturar (la última imagen de este artículo)

Documentación

Documentación con previsualización en vivo: http://geoext.github.io/geoext3/master/docs/

GeoExt 3 en github: https://github.com/geoext/geoext3

Todo el mundo puede probar y ayudar a crear la nueva versión de GeoExt.

Let’s connect!

Date de alta en nuestro newsletter
y recibe este ebook gratuito

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

2 comentarios en “GeoExt 3: enriquece tus visores webmapping de OpenLayers”

  1. hola saludos …
    En base a este tema tengo algunas dudas que talves puedas aclarame…
    que tan estable esta para trabajar geoExt3 con openlayer 3 ahorita. que tanto se puede utilizar estas librerias actualmente o es mejor usar openlayer2 con geoext2; y cual es la versión actual de openlayer3 ahorita la 3.2.0 o esta es una beta aun.

    gracias

    • Hola Elvis, Por el momento GeoExt 3 se encuentra en versión beta, por lo que es recomendable continuar con la versión 2 de Openlayers y GeoExt 2. Sin embargo la versión 3 de OpenLayers ya es estable y va por la versión 3.16, es decir avanza de forma consistente, por lo que el desarrollo nuevo conviene realizarlo con esta nueva arquitectura y aprender a trabajar con las nuevas clases, propiedades y métodos. Saludos!

Los comentarios están cerrados.