¿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:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GeoExt.component.Map Example</title>
<link rel="stylesheet" type="text/css" href="http://openlayers.org/en/master/css/ol.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css"/>
</head>
y las librerías js:
<body>
<div id='description'></div>
<script src="http://openlayers.org/en/master/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js">
</script>
Dentro del script ya podremos utilizar las clases propias de la librería GeoExt:
<script src="panel.js"></script> </body> </html>
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:
olMap = new ol.Map({
layers: [group, layer3],
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
mapComponent = Ext.create('GeoExt.component.Map', {
map: olMap
});
mapPanel = Ext.create('Ext.panel.Panel', {
region: 'center',
border: false,
layout: 'fit',
items: [mapComponent]
});
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:
Pero con algunas líneas más de código podemos conseguir una aplicación web de mapas con más funcionalidades:
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.
Licenciado en Geografía. Máster en Sistemas de Información Geográfica. Consultor GIS desde el año 2004. En MappingGIS desde el año 2012 para ayudarte a impulsar tu perfil GIS y diferenciarte de la competencia. Echa un vistazo a todos nuestros cursos de SIG online.
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!