OpenLayers Tutorial Pt
Introdução
OpenLayers é uma biblioteca JavaScript open-source, sob licença BSD, que permite construir páginas web contendo informação geo-espacial dinâmica e independente de servidor. Implementa uma API JavaSript, ainda em desenvolvimento, que permite a construção de aplicações geográficas web-based, disponibilizando APIs como o Google Maps ou o MSN Virtual Earth, desta feita, como software livre. Criado pela [www.metacarta.com MetaCarta], que continua a desempenhar um papel activo no suporte e gestão deste projecto, pertence desde de Novembro de 2007 à Open Source Geospatial Foundation, que apoia e promove o desenvolvimento cooperativo de tecnologias e dados geo-espaciais.
Antes de começar
O desenvolvimento do OpenLayers é feito tendo por base outras tecnologias. O domínio/conhecimento destas é relevante no processo de aprendizagem.
Ficam aqui algumas referências:
- Introdução ao JavaScript
- Programação em JavaScript
- Crockford's JavaScript page
- Introdução a JSON
- Debugging com o Firebug
Procuram-se outras referências em português
Para Programadores
O OpenLayers é uma biblioteca desenvolvida em JavaScript com o objectivo de exibir mapas e dados nele contidos nos navegadores Web mais modernos, sem qualquer tipo de dependência do lado do servidor. Implementa uma API em JavaScript (ainda em desenvolvimento) para a criação de aplicações geográficas baseadas em Web. É semelhante ao Google Maps e ao MSN Virtual Earth APIs, mas com uma grande diferença: O OpenLayers é software livre, desenvolvido pela comunidade de software Open Source.
OpenLayers torna-se um projecto da Fundação de [www.gis.com GIS] de fonte aberta.
Além disso, OpenLayers implementa métodos padrão de acessos a dados geográficos, como os protocolos WMS Web Mapping Service e WFS Web Feature Service. OpenLayers foi desenvolvida em JavaScript orientado aos objectos, usando componentes da Prototype.js e da biblioteca Rico. O código até hoje desenvolvido foi já submetido a centenas de testes de unidade, através da framework Test.AnotherWay.
TODO TODO TODO TODO
As a framework, OpenLayers is intended to separate map tools from map data so that all the tools can operate on all the data sources. This separation breaks the proprietary silos that earlier GIS revolutions have taught civilization to avoid. The mapping revolution on the public Web should benefit from the experience of history.
Como framework, OpenLayers destina-se a separar ferramentas mapa dos dados do mapa, para que todas as ferramentas podem operar em todas as fontes de dados. Esta separação quebra os silos de proprietários que anteriores GIS revoluções ensinaram civilização para evitar. A revolução de mapeamento na Web pública deve beneficiar da experiência da história.
"Olá Mundo" OpenLayers
Map e Layer são dois conceitos importantes na construção de um mapa com o API OpenLayers.
Um Map guarda informação acerca do mapa: projecção base, extensão, unidades, etc.
Dentro do Map a informação é disponibilizada via Layer's, que sendo a fonte de informação, define como esta deve ser requerida e apresentada.
O OpenLayers suporta a inserção de mapas em quase todas as tags html de tipo block-level, (como por exemplo TODO)
Para construir um visualizador OpenLayers numa página web, basta inseri-lo numa tag deste tipo incluindo uma tag script para incluir a biblioteca OpenLayers no código da página html.
<html>
<head>
<title>OpenLayers Example</title>
<script
src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
<div style="width:100%; height:100%" id="map"></div>
</body>
</html>
Cria-se o Map através do construtor OpenLaer.Map, que tem como o argumento o elemento HTML onde estará contido ou o seu ID
var map = new OpenLayers.Map('map');
O OpenLayers suporta vários data sources, WMS, Yahoo! Maps, WorldWind e etc.
Neste exemplo utiliza-se como Map um WMS da MetaCarta.
Para adicionar uma Layer ao Map, o construtor do Layer tem como parametros a URL do WMS server usado, e um objecto que contem os parametros a serem anexados ao pedido WMS.
var wms = new OpenLayers.Layer.WMS(
"http://labs.metacarta.com/wms/vmap0",
{'layers':'basic'} );
map.addLayer(wms);
Para apresentar o mapa é preciso definir o center e zoom level.
A função 'zoomToMaxExtent' permite fazer com que o mapa encaixe no tamanho da janela com o maior zoom possível.
Juntando todas as partes:
<html>
<head>
<title>OpenLayers Example</title>
<script
src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
<div style="width:100%; height:100%" id="map"></div>
<script defer="defer" type="text/javascript">
var map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
</body>
</html>
Tem-se o código HTML para vizualizar o primeiro Mapa.
Exemplos, passo a passo
http://openlayers.org/dev/examples/ e http://trac.openlayers.org/wiki/UserRecipes
Neste secção, vamos demonstrar alguns exemplos de como utilizar algumas das funcionalidades do OpenLayers.
- Utilizar o OpenLayers numa página Web, é simples e fácil. Para tal, basta incluir o seguinte código na página:
<iframe
src="http://openlayers.org/viewer/"
width="400" height="200"
scrolling="no"
marginwidth="0" marginheight="0"
frameborder="0">
</iframe>
- Para especificar, por exemplo, as coordenadas de latitude e longitude e o nível de zoom, utiliza-se os parâmetros URL, Center e Zoom:
<iframe
src="http://openlayers.org/viewer/?center=39.5,-7&zoom=6"
width="100%" height="300"
scrolling="no"
marginwidth="0" marginheight="0"
frameborder="0">
</iframe>
Estes exemplos utilizam mapas, recebendo-os dinamicamente de um servidor WMS.
Guia de Utilização
http://trac.openlayers.org/wiki/UserGuide
Adicionar um Overlay WMS
As Layers WMS tem a capacidade de sobrepor outras Layers WMS numa mesma projecção, definindo-se para tal como um Overlay.
Isto pode ser feito de diversas maneiras. Definir o parametro transparent como true é a melhor opção no caso WMS.
Como adicionar um Overlay WMS transparente a um Map.
var twms = new OpenLayers.Layer.WMS( "World Map",
"http://world.freemap.in/cgi-bin/mapserv?",
{ map: '/www/freemap.in/world/map/factbooktrans.map',
transparent: 'true', layers: 'factbook',
format: 'png'} );
map.addLayer(twms);
--->>>> imggtngstrtd2
Google Maps
Para criar um Google Map no OpenLayers é necessário incluir uma tag script Google Maps para o dominio em questão,
especificando a respectiva chave da Google Maps API.
Example script URL for Google Maps
<script src="http://maps.google.com/maps?file=api&v=2&key=YourKey"
type="text/javascript"></script>
Uma vez incluída a esta tag, basta adicionar um novo tipo de Layer ao Map:
Creating a Hybrid Map, and adding it to the map
var google = new OpenLayers.Layer.Google( "Google", { type: G_HYBRID_MAP } );
map.addLayer(google);
Neste exemplo é utilizado um mapa do tipo G_HYBRID_MAP, o G_SATELLITE_MAP também é suportado.
--->>>> imggtngstrtd1
Funcionalidades Avançadas
Exemplo de uma app já com muita cena :)
Fornecedores de Serviços
Features:
- Load map data from many sources:
Outros Recursos
http://dev.openlayers.org/apidocs/index/General.html
http://trac.openlayers.org/wiki/UML
Before Getting Started -- The Technologies Behind OpenLayers
We at !OpenLayers generally assume that everyone who comes to us is already a highly skilled web programmer. Such, however, is not always the case. Here we have assembled a few quick links to tutorials and the like on how to master the art of coding in !JavaScript, debug in Firebug, understand JSON, etc.
* Introduction to JavaScript by the people at mootools. * Four-part video series by Douglas Crockford on Programming in JavaScript * Crockford's JavaScript page * Introduction to JSON * Debugging with Firebug
Obter o Código
Aquando do lançamento de nova versão estável, esta fica disponível na página de download, a saber http://openlayers.org/download/.
Se a intenção for utilizar o OpenLayers em alguma aplicação web, pode ser incluido http://www.openlayers.org/api/OpenLayers.js na página em questão. Esta ligação disponibiliza a última versão estável existente.
Se está interessado na versão do momento, existe a possibilidade de a obter directamente do repositório de controlo de versões, no caso Subversion. Qualquer falha encontrada pode ser reportada em Submeter Falha. Não esquecer que o OpenLayers está continuamente em desenvolvimento e a respectiva correcção pode já ter sido submetida.
Para obter a versão em desenvolvimento do repositório Subversion:
svn checkout http://svn.openlayers.org/trunk/openlayers/
Qualquer pessoa pode ler o repositório. Se tiver um patch pode submetê-lo para a lista. As pessoas que contribuem frequentemente têm acesso de escrita.
Para mais informações, seguir até Download OpenLayers.