Visualizador de mapas con librería GeoExt


La librería GeoExt es una herramienta utilizada para construcción de aplicaciones web de mapas basada en javascript. Para comenzar a utilizarla la podemos descargar de la siguiente dirección:

http://www.geoext.org/

Una vez descomprimido el archivo, tendremos varios archivos que son los siguientes:

Esta carpeta incluye ejemplos de como poder utilizar la librería, para nuestro caso necesitaremos únicamente la carpeta “script” que tendremos que pegar en nuestro sitio web. Creamos una carpeta y dentro de ella creamos un archivo index.html vacío y pegamos la carpeta “script” que venía en la librería de GeoExt. La forma de trabajar será la presentación en un lado y la programación del mapa por otro, por lo que tendremos que generar un tercer archivo con extensión .js Por el momento tendríamos que tender lo siguiente:

Comenzamos por editar la página en donde situaremos el mapa, por lo que en el encabezado <head> del html colocaremos las siguientes líneas de código que harán las llamadas a los diferentes archivos, nótese que en la línea marcada en rojo es donde se llama a la carpeta “script”

<head>
<title>Ejemplo de GeoExt</title>
<script type=”text/javascript” src=”http://extjs.cachefly.net/builds/ext-cdn-771.js”></script&gt;
<link rel=”stylesheet” type=”text/css” href=”http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css&#8221; />
<link rel=”stylesheet” type=”text/css” href=”http://extjs.cachefly.net/ext-2.2.1/examples/shared/examples.css&#8221; />
<script src=”http://openlayers.org/api/2.8/OpenLayers.js”></script&gt;
<script type=”text/javascript” src=”script/GeoExt.js”></script>
<script type=”text/javascript” src=”mapa.js”></script>
</head>

Dentro del cuerpo <body> del archivo en donde se colocará el mapa es necesario llamar al div que hace referencia

<div id=”mappanel”></div>

En este punto nuestro archivo de presentación index.html debería tener la siguiente forma:

Ya con este archivo nos vamos a la construcción de archivo de mapa, que será “mapa.js” que estará dentro de la carpeta con el archivo index.html. Crearemos el archivo y comenzaremos con la programación.

Iniciamos con la declaración de variable de tipo mapa

var mapPanel;

Luego procederemos a la creación del mapa en sí con la siguiente linea

Ext.onReady(function() {

var map = new OpenLayers.Map();

Tendremos que agregarle la capa de información, en este caso será con geoserver en el portal de SEGEPLAN que provee esos servicios para Guatemala. Luego terminamos añadiendola al mapa

var layer = new OpenLayers.Layer.WMS(
“Carreteras IGN 2010”,
http://demo.opengeo.org/geoserver/wms&#8221;,
{layers: ‘carreteras’}
);
map.addLayer(layer);

Se procede a generar el panel que contendrá el mapa, el cual contiene el tamaño título, etc. Es IMPORTANTE definir las coordenadas de las capas en tipo latitud y longitud.

mapPanel = new GeoExt.MapPanel({
title: “Ejemplo GeoExt”,
renderTo: “mappanel”,
height: 400,
width: 600,
map: map,
center: new OpenLayers.LonLat( -90 , 15),
zoom: 6
});
});

Con esto ya tenemos realizado nuestro mapa, y el archivo “mapa.js” debería tener esta forma

Hay que verificar que nuestros archivos estén de la siguiete forma:

Cuando todo esté en orden tendremos una página como la siguiente, en donde se presenta la información obtenida través de un servicios WMS.

Anuncios

5 comentarios el “Visualizador de mapas con librería GeoExt

  1. Hola Emmanuel, ya realice este tutorial, es muy completo, además de las funciones básicas yo quiero agregarle dos botones uno impresión y otro de identificador (i), he visto los ejemplo de Geoext y descargado los .js de impresión pero no se cómo llamarlos a la vista, agradezco la colaboración.
    Carlos Fabio

    • Saludos Carlos,

      Para agregar el módulo de impresión debes modificar tu servidor de mapas, en el caso de GeoExt están utilizando GeoServer por lo que inicialmente hay que agregarle el módulo de impresión, puedes echarle un vistazo

      http://docs.geoserver.org/stable/en/user/community/printing/

      Luego, para activar el módulo en tu aplicación puedes ver en el archivo .html del ejemplo que hacen un llamado al servidor con esta línea

      src=”http://demo.opengeo.org/geoserver/pdf/info.json?var=printCapabilities”
      (esto va dentro de un script de java)

      De allí en adelante ya te pueden funcionar bien los ejemplos de impesión con tu propio servidor. Ahora con lo del botón de información (i), lo que puedes hacer es buscar ejemplos sobre “GetFeatureInfo” de OpenLayers. Ya que en ese caso GeoExt solo te servirá para desplegar información pero no para hacer el llamado a la información deseada.

  2. Esta libreria tambien sirve para visualizar mapas de extension Garmin? por otro lado yo necesito marcar un punto en el mapa haciendo click, y que este se marque con algun dibujo donde hice el click y me devuelva las coordenadas x,y con respecto al mapa no al mapPanel,es posible? gracias

    • Hola Carlita

      La librería GeoExt te funciona como puente entre la librería ExtJS que es para la presentación al usuario y OpenLayers que es la librería para manejo de información espacial. Lo que quieres hacer se puede hacer siempre y cuando programes OpenLayers para poder consumir la información de Garmin, aunque lo mejor es exportar la información a un formato estandar y libre por la compatibilidad de las herramientas. Ahora con lo que mencionas de hacer un dibujo y que se quede también es posible utilizando una capa de vectores en OpenLayers.

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