Creando una interfaz con OpenLayers 3 y GeoExt 3 para visualizar nuestros mapas

En esta entrada quiero continuar con el desarrollo de Sistemas de Información Geográfica en Software Libre, ahora vamos a ver la capa de presentación con dos soluciones que son comúnmente combinadas para mostrar interfaces avanzadas como lo son OpenLayers3 y GeoExt3 que trabaja directamente con ExtJS 6.

OpenLayers muestra los datos geoespaciales en cualquier navegador web de escritorio moderno o móvil, es compatible con una gran variedad de tipos de datos y capas su código fuentes esta basado las últimas tecnologías de navegación como HTML5, WebGL y CSS3 además de ser de código abierto bajo una derivación de la licencia BSD

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

geoext-logo_transp_11

OpenLayers 3 y GeoExt 3 es la combinación perfecta para crear una aplicación web mapping. GeoExt 3 es un conjunto de herramientas, basadas en JavaScript, para crear aplicaciones web mapping. Combina la funcionalidad SIG de OpenLayers 3 con la interfaz de usuario de la librería ExtJS, proporcionada por Sencha, es la librería de código abierto perfecta que nos permitirá crear aplicaciones GIS similares a las de escritorio, pero en la web.

¿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:

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

En nuestro archivo map.js tenemos el siguiente código:

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

openlayers2

Para enriquecer más nuestro mapa vamos a consumir servicios geojson para mostrar puntos con unos iconos

Veamos el siguiente segmento de código

Podemos ver un ejemplo de cómo se visualizan los puntos que hemos creado:

openlayers1

 

Para más información puedes visitar la pagina oficial donde hay muchos ejemplos para comenzar:

  1. OpenLayers
  2. GeoExt3

Como podemos ver, con unas cuantas lineas de código hemos logrado crear una interfaz muy completa y amigable, más adelante estaré mostrando mejores ejemplos.

Puedes ver el código completo en

http://www.joseluisestevez.com.ve/mexico_city/

Si la información te a parece útil puedes comentar o dejarme unos bits.

 

10 thoughts on “Creando una interfaz con OpenLayers 3 y GeoExt 3 para visualizar nuestros mapas

  1. Abraham Coiman

    ¿Sabes dónde puedo ubicar un tutorial, libro o manual de GeoExt?

    • Hola Abraham, en realidad es difícil conseguir información de GeoExt, yo estoy en el desarrollo de algo con esta solución, en lo que termine publico algunos tips para ampliar los conocimientos de este framework

  2. Hola Yeyo me encanta los tutoriales que nos brindas..
    una consulta para que yo pueda trabajar desde mi propio servidor como configurar el Geoserver ligado a estas dos grandes herramientas como es GeoExt y Openlayer3…
    la verdad no tuve buenos resultados con el Openlayer 2 y muchas complicaciones.. te lo agradeceria mucho por favor que me dieras referencia de ello

    • Hola Paola, OpenLayers3 es una versión escrita desde cero y no es compatible con OpenLayers2 mi experiencia con OL3 ha sido muy buena y esta brinda muchos ejemplos desde la pagina oficial, por eso te la recomiendo. Saludos

  3. hola me perdonen mi lenguaje español, ¿cómo le sumamos la GeoExt librería?
    Yo sé qué poner en el fichero src:

    Ext.Loader.setConfig({
    enabled: true,
    paths: {
    ‘GeoExt’: ‘./src’
    }
    });

  4. Hola muy buena información,
    Por favor puedes indicarme cuando ya liberan la versión de Geoext 3 ? ,
    me da mucho temor utilizar si todavía no está liberada ni probada, y si utilizo solamente Openlayers 3 no me ayuda xq necesito la funcionalidad de ExtJs.
    Otra opción sería utilizar Geoext 2 pero me tocaría retroceder a Open layers 2 por favor dame tu recomendación.

  5. Hola, soy nueva con el openlayers 3, y no he logrado cargar un archivo .map en este nuevo openlayers3. no se que función usar en la definición? he probado muchas.
    pero no se observa ningún resultado en mi navegador. tengo mis capas shp que las llamo desde mi archivo .map de mapserver.
    he buscado por la web sin encontrar algo que me ayude

    • Hola Nelly, gracias por tu cometario, openlayers3 es una versión nueva y no es compatible con la versión 2 si es que tu .map lo levantabas con esa. De igual forma te recomiendo que verifiques los datos de cada shp para verificar que estes colocando la proyección correcta