Difference between revisions of "OpenLayers Tutorial Pt"

From OSGeo
Jump to navigation Jump to search
 
(80 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
[[Image:openlayer.org.png|thumb|right|370px|Possibilidade de comunicação do OpenLayers através de diversos protocolos.]]
 +
 +
 +
== Introdução ==
 +
 
[[OpenLayers]] é uma biblioteca JavaScript open-source, sob [[Berkeley Software Distribution|licença BSD]], que permite construir páginas web contendo  
 
[[OpenLayers]] é uma biblioteca JavaScript open-source, sob [[Berkeley Software Distribution|licença BSD]], que permite construir páginas web contendo  
 
informação geo-espacial dinâmica e independente de servidor.  
 
informação geo-espacial dinâmica e independente de servidor.  
−
Implementa uma API JavaSript, ainda em desenvolvimento, que  
+
Implementa uma [[OpenLayers_API|API JavaSript]], ainda em desenvolvimento, que  
−
permite a construção de aplicações geográficas web-based, disponilbilizando APIs  
+
permite a construção de aplicações geográficas ''web-based'', disponibilizando APIs  
−
como o Google Maps e o MSN Virtual Earth, desta feita, como software livre.  
+
como o [http://code.google.com/apis/maps/index.html Google Maps] ou o [http://dev.live.com/virtualearth/ MSN Virtual Earth], desta feita, como software livre.
−
Criado pela MetaCarta, que continua a desempenhar um papel activo no suporte e  
+
Criado pela [http://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  
+
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.
 
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 para a utilização do ''OpenLayers''.
 +
 +
Ficam aqui algumas referências:
 +
* [http://blog.mootools.net/2007/6/5/help-i-dont-know-javascript Introdução ao JavaScript]
 +
* [http://video.yahoo.com/watch/111593/1710507 Programação em JavaScript]
 +
* [http://javascript.crockford.com/ Crockford's JavaScript page]
 +
* [http://www.json.org/ Introdução a JSON]
 +
* [http://getfirebug.com/logging.html ''Debugging'' com o Firebug]
 +
<small>Procuram-se outras referências em português</small>
 +
 +
== 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 [http://code.google.com/apis/maps/index.html/ Google Maps] e ao [http://dev.live.com/virtualearth/ MSN Virtual Earth APIs], mas com uma grande diferença: O ''OpenLayers'' é software livre e desenvolvido pela comunidade de software ''Open Source''.
 +
 +
Além disso, ''OpenLayers'' implementa métodos padrão de acessos a dados geográficos, como os protocolos [[Web Map Service]] (WMS) e [[Web Feature Service]] (WFS). ''OpenLayers'' foi desenvolvida em ''JavaScript'' orientado aos objectos, usando componentes da ''Prototype.js'' e da biblioteca [http://openrico.org/ Rico]. O código até hoje desenvolvido foi já submetido a centenas de testes de unidade, através da ''framework'' [http://straytree.com/TestAnotherWay/doc/index.html Test.AnotherWay].
 +
 +
== Exemplos simples, passo a passo ==
 +
 +
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:
 +
 +
<pre>
 +
<iframe
 +
      src="http://openlayers.org/viewer/"
 +
      width="400" height="200"
 +
      scrolling="no"
 +
      marginwidth="0" marginheight="0"
 +
      frameborder="0">
 +
</iframe>
 +
</pre>
 +
 +
[[Image:qckttrlex1.png]]
 +
 +
* 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'':
 +
 +
<pre>
 +
<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>
 +
</pre>
 +
 +
[[Image:qckttrlex2.png]]
 +
 +
Estes exemplos utilizam mapas, recebendo-os dinamicamente de um servidor WMS.
 +
 +
== "Olá Mundo" OpenLayers ==
 +
 +
''Map'' (Mapa) e ''Layer'' (Camada), 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 ''tag HTML'' de tipo ''block-level''.
 +
 +
Para construir um visualizador [[OpenLayers]] numa página web, basta inseri-lo numa ''tag'' deste tipo
 +
incluindo uma ''tag'' ''script'' para incluir a [[OpenLayers_API|biblioteca OpenLayers]] no código da página ''HTML''.
 +
 +
 +
<pre>
 +
<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>
 +
</pre>
 +
 +
 +
Cria-se o ''Map'' através do construtor ''OpenLayer.Map'', que tem como o argumento o elemento HTML onde estará contido ou o seu ID
 +
 +
<pre>
 +
    var map = new OpenLayers.Map('map');
 +
</pre>
 +
 +
 +
O [[OpenLayers]] suporta várias origens de dados 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 parâmetros a URL do WMS servidor usado, e um objecto que contem os parâmetros a serem anexados ao pedido WMS.
 +
 +
 +
<pre>
 +
    var wms = new OpenLayers.Layer.WMS(
 +
        "http://labs.metacarta.com/wms/vmap0",
 +
        {'layers':'basic'} );
 +
    map.addLayer(wms);
 +
</pre>
 +
 +
Para apresentar o mapa é preciso definir o ponto centra e nível de zoom.
 +
 +
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:
 +
<pre>
 +
<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>
 +
</pre>
 +
 +
Tem-se o código HTML para visualizar o primeiro Mapa.
 +
 +
== Fornecedores de Serviços ==
 +
 +
No [http://mapas.igeo.pt/ m@pas on-line] podem ter acesso a um catálogo de serviços [[Web Map Service]] WMS e [[Web Feature Service]] WFS portugueses. A oferta disponível ao público é bastante vasta.
 +
 +
== Outros Recursos ==
 +
 +
* [http://www.igeo.pt/ Instituto Geográfico Português]
 +
* [http://www.igeoe.pt/ Instituto Geográfico do Exército]
 +
* [http://snig.igeo.pt/Portal/ Sistema Nacional de Informação Geográfica]
 +
* [http://scrif.igeo.pt/ Rede de Informação de Situações de Emergência]
 +
* [http://geo.algarvedigital.pt/ Mapa interactivo do Algarve - Algarve Digital]
 +
* [http://www.valedominhodigital.pt/portal/page/portal/Portal_Regional Vale do Minho Digital]
 +
* [http://trac.openlayers.org/ OpenLayers]
 +
* [http://udig.refractions.net/ GIS Framework para o Eclipse]
 +
 +
== 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/ 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 [http://trac.openlayers.org/wiki/FilingTickets 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 [http://subversion.tigris.org Subversion]:
 +
 +
<pre>
 +
svn checkout http://svn.openlayers.org/trunk/openlayers/
 +
</pre>
 +
 +
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é [http://trac.openlayers.org/wiki/HowToDownload Download OpenLayers].
 +
 +
[[Category:Portugal]]

Latest revision as of 09:17, 27 October 2008

Possibilidade de comunicação do OpenLayers através de diversos protocolos.


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 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 para a utilização do OpenLayers.

Ficam aqui algumas referências:

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 e desenvolvido pela comunidade de software Open Source.

Além disso, OpenLayers implementa métodos padrão de acessos a dados geográficos, como os protocolos Web Map Service (WMS) e Web Feature Service (WFS). 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.

Exemplos simples, passo a passo

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>

Qckttrlex1.png

  • 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>

Qckttrlex2.png

Estes exemplos utilizam mapas, recebendo-os dinamicamente de um servidor WMS.

"Olá Mundo" OpenLayers

Map (Mapa) e Layer (Camada), 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 tag HTML de tipo block-level.

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 OpenLayer.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árias origens de dados 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 parâmetros a URL do WMS servidor usado, e um objecto que contem os parâmetros 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 ponto centra e nível de zoom.

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 visualizar o primeiro Mapa.

Fornecedores de Serviços

No m@pas on-line podem ter acesso a um catálogo de serviços Web Map Service WMS e Web Feature Service WFS portugueses. A oferta disponível ao público é bastante vasta.

Outros Recursos

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.

Retrieved from "http://wiki.osgeo.org/w/index.php?title=OpenLayers_Tutorial_Pt&oldid=31428"