INTRODUCCIÓN A GeoExt
Deacuerdo al sitio [Link], GeoExt son unas librerias libres que permiten de-
sarrollar aplicaciones similares a aplicaciones de escritorio en la Web.
Se trata básicamente de un «framework» que combina las funcionalidades de Open-
Layers con las librerias de interfaz de usuario ExtJs, desarrolladas por Sencha
([Link]
GeoExt 3 es un conjunto de herramientas, basadas en JavaScript, para crear aplica-
ciones 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.
El objetivo es implementar las próximas versiones de GeoExt como ExtJS-Package.
OpenLayers 3 muestra los datos geoespaciales en cualquier navegador web de escri-
torio moderno o móvil. Al igual que OpenLayers 2, es compatible con una gran varie-
dad 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.
A continuación solo se presentará la lógica como funciona esta combinación de libre-
rias.
Ejemplo:
<html>
<head>
<script type="text/javascript" src="GeoExt/ext-3.4.1/adapter/ext/[Link]"></script>
<script type="text/javascript" src="GeoExt/ext-3.4.1/[Link]"></script>
<link rel="stylesheet" type="text/css" src="ext-3.4.1/resources/css/[Link]"></script>
<script type="text/javascript" src="[Link]
[Link]"></script>
<script type="text/javascript" src="GeoExt/lib/[Link]"></script>
<link rel="stylesheet" type="text/css" href="GeoExt/resources/css/[Link]"></link>
<script type="text/javascript">
var app, items = [], controls = [];
Ext.BLANK_IMAGE_URL = "GeoExt/ext-3.4.1/resources/images/default/[Link]";
[Link](function() {
app = new [Link]({
layout: "border",
items: items
});
});
[Link]({
xtype: "gx_mappanel",
ref: "mapPanel",
region: "center",
map: {
numZoomLevels: 20,
controls: controls
},
extent: [Link]([-74.02722,40.684221,-73.907005,40.878178]),
layers: [new [Link]("OpenLayers WMS","[Link]
ver/wms?service=WMS",{layers: "tiger:tiger_roads",src : 'EPSG:4326'})]
});
[Link](
new [Link](),
new [Link](),
new [Link](),
new [Link]()
);
</script>
</script>
</head>
<body>
</body>
</html>
El ejemplo anterior, funcionará siempre y cuando se descarguen las librerias que
acompañan a este documento. Al final del mismo se describe como se instalan.
Por el momento se va a dar u a explicación de cómo funciona esta aplicación.
Como se ha visto anteriormente, Lo primero que se realiza es cargar las librerias Ja-
vaScript y las hojas de estilo básicas necesarias para lograr que esto funcione.
<script type="text/javascript" src="GeoExt/ext-3.4.1/adapter/ext/[Link]"></script>
<script type="text/javascript" src="GeoExt/ext-3.4.1/[Link]"></script>
<link rel="stylesheet" type="text/css" src="ext-3.4.1/resources/css/[Link]"></script>
<script type="text/javascript" src="[Link]
></script>
<script type="text/javascript" src="GeoExt/lib/[Link]"></script>
<link rel="stylesheet" type="text/css" href="GeoExt/resources/css/[Link]"></link>
Es importante que se carguen en ese orden, de lo contrario es muy probable que la
aplicación deje de funcionar.
var app, items = [], controls = [];
Ext.BLANK_IMAGE_URL = "GeoExt/ext-3.4.1/resources/images/default/[Link]";
[Link](function() {
app = new [Link]({
layout: "border",
items: items
});
});
[Link]({
xtype: "gx_mappanel",
ref: "mapPanel",
region: "center",
map: {
numZoomLevels: 20,
controls: controls
},
extent: [Link]([-74.02722,40.684221,-73.907005,40.878178]),
layers: [new [Link]("OpenLayers WMS","[Link]
ver/wms?service=WMS",{layers: "tiger:tiger_roads",src : 'EPSG:4326'})]
});
[Link](
new [Link](),
new [Link](),
new [Link](),
new [Link]()
);
Cuando se carga la aplicación, se establece una imagen por defecto de fondo y sege-
neran un par de variables: items y controls.
items: Son los elementos que forman la interfaz de usuario.
controls: Se utiliza para declarar los controles de OpenLayers.
Posteriormente se llama a [Link](), el cuál nos permite, iniciar la ejecución de
la aplicación posterior a la carga de todas las librerias. Sin su presencia, la aplicación
puede iniciar antes y no funcionar por no encontrar cargados los componentes que ne-
cesita.
Posterior se llama a [Link](). Con un diseño de borde, Esto permite que la vi-
sualización abarque toda la pantalla del navegador.
[Link]({
xtype: "gx_mappanel",
ref: "mapPanel",
region: "center",
map: {
numZoomLevels: 20,
controls: controls
},
extent: [Link]([-74.02722,40.684221,-73.907005,40.878178]),
layers: [new [Link]("OpenLayers WMS","[Link]
ver/wms?service=WMS",{layers: "tiger:tiger_roads",src : 'EPSG:4326'})]
});
Las primera 3 propiedades no son propias de GeoExt: xtype le dice a Ext JS, a qué
constructor enviar el objeto de configuración. ref define una referencia relativa a un
contenedor (En este caso [Link] lo agrega). region es donde se desea ubicar el
mapa.
El resultado final es el siguiente:
Ejercicio:
Sustituir la capa tiger:tiger_roads por la capa tasmania y agregarle los controles
ScaleLine y MousePosition.
Enviar el código por la plataforma.
Instalación de las librerias:
Para poder ejecutar esta aplicación, se debe descargar el archivo [Link], que
acompaña a este documento.
Para instalarlo:
1.- Se copia al directorio donde se instalan las páginas web.
2.- Se descomprime en ese directorio
unzip [Link]
A partir de ahi, se genera el html que está al inicio de este documento dentro de este
directorio llamado GeoExt, ya que las librerias están direccionadas para que asi fun-
cionen.
