OpenLayers com bibliotecas JavaScript GeoExt e ExtJS

Publicado: 19/09/2012 em Programação
Tags:, ,

1) Baixar e descompactar a biblioteca OpenLayers
$ wget -c http://openlayers.org/download/OpenLayers-2.12.zip
$ unzip OpenLayers-2.12.zip

2) Baixar e descompactar a biblioteca GeoExt
Icon da biblioteca GeoExt
$ wget -c https://github.com/downloads/geoext/geoext/GeoExt-1.1.zip
$ unzip GeoExt-1.1.zip

3) Baixar e desempacotar a bibliteca ExtJS
Baixar do sitio http://www.sencha.com/products/extjs3/download/
$ unzip ext-3.4.0.zip

4) Colocar as três bibliotecas descompactadas no diretório em que está publicado o web server
No caso de ser o root o dietório do web server, então o GeoExt.js estará em http://localhost/GeoExt/lib/GeoExt.js e ext-all.js estará em http://localhost/ext-3.4.0/ext-all.js. Estaremos assumindo neste exemplo que a web page inicial do site estará no root do web server, isto é, em http://localhost/pagina_inicial.html.

Após a instalação das bibliotecas, a estrutura de diretórios será a seguinte:

.
├── [drwxr-xr-x root root ] ext-3.4.0
│   ├── [drwxr-xr-x root root ] adapter
│   ├── [drwxr-xr-x root root ] docs
│   ├── [drwxr-xr-x root root ] examples
│   ├── [drwxr-xr-x root root ] pkgs
│   ├── [drwxr-xr-x root root ] resources
│   ├── [drwxr-xr-x root root ] src
│   ├── [drwxr-xr-x root root ] test
│   └── [drwxr-xr-x root root ] welcome
├── [drwxr-xr-x root root ] GeoExt
│   ├── [drwxr-xr-x root root ] docs
│   ├── [drwxr-xr-x root root ] examples
│   ├── [drwxr-xr-x root root ] lib
│   ├── [drwxr-xr-x root root ] resources
│   └── [drwxr-xr-x root root ] script
├── [drwxr-xr-x root root ] OpenLayers-2.12
└── [drwxr-xr-x root root ] theme
└── [drwxr-xr-x root root ] default

4)Entendendo um pouco mais a GeoExt
4.1) O que é a biblioteca GeoExt?
GeoExt reúne o “know how” geoespacial do OpenLayers com a experiente interface de usuário “ExtJS” para ajudar o usuário a construir na web aplicativos poderosos GIS em JavaScript ao estilo dos existentes para desktop (criação de aplicativos webmapping com interfaces ricas). GeoExt estende a ExtJS (uma rica biblioteca de widgets para interface de usuário e classes auxiliares). O componente chave da GeoExt é a biblioteca de mapeamento OpenLayers, a qual executa as principais funções relacionadas com o mapa de cada aplicação “GeoExt-based”.

A documentação das propriedades, métodos e eventos da biblioteca GeoExt pode ser encontrada em http://geoext.org/lib/index.html
Um conjunto de exemplos de uso desta biblioteca pode ser encontrado em http://geoext.org/examples.html

4.2) Colocar GeoExt em funcionamento
Para colocar Ext em funcionamento numa página é necessário ter alguma coisa parecida com a forma abaixo no <head> de uma página HTML que esteja publicada no web server:

<script src=”ext-3.4.0/adapter/ext/ext-base.js” type=”text/javascript”></script>
<script src=”ext-3.4.0/ext-all.js”  type=”text/javascript”></script>
<link rel=”stylesheet” type=”text/css” href=”ext-3.4.0/resources/css/ext-all.css”></link>

Isso irá carregar o código e estilos para Ext. Os caminhos devem estar de acordo com a instalação realizada.

5) Entendendo um pouco mais a ExtJS
Ext é uma biblioteca puro JavaScript para construção de aplicações web interativas utilizando scripts Ajax, DHTML e DOM. Está publicada sob licença GPL v3.

A documentação da biblioteca pode ser encontrada em http://docs.sencha.com/ext-js/3-4/
Um conjunto de exemplos de uso desta biblioteca pode ser encontrado em http://dev.sencha.com/deploy/ext-3.4.0/examples/

6) Um exemplo simples

<html>
<head>
<title> A Basic GeoExt Page </title>
<script src="ext-3.4.0/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="ext-3.4.0/ext-all.js"  type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="ext-3.4.0/resources/css/ext-all.css"></link>
<script src="OpenLayers-2.12/OpenLayers.js" type="text/javascript"></script>
<script src="GeoExt/lib/GeoExt.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="GeoExt/resources/css/geoext-all-debug.css"></link>
//
<script type="text/javascript">
Ext.onReady(function() {
var map = new OpenLayers.Map();
var layer = new OpenLayers.Layer.WMS(
"Global Imagery",
"http://maps.opengeo.org/geowebcache/service/wms",
{layers: "bluemarble"}
);
map.addLayer(layer);
//
new GeoExt.MapPanel({
renderTo: 'gxmap',
height: 400,
width: 600,
map: map,
title: 'A Simple GeoExt Map'
});
});
</script>
</head>
<body>
<div id="gxmap"></div>
</body>
</html>

Assim, será mostrada a seguinte imagem quando for acessada a página http://localhost/
Imagem renderizada usando GeoExt

Deixe um comentário, pois isto é muito motivante para continuarmos este trabalho

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s