EnsinoBasicoOpenLayers Page History


OpenLayers 2

A biblioteca OpenLayers 2 da Linguagem JavaScript trabalha com camadas(layers). Algumas coisas básicas devem ser entendidas para trabalhar com OpenLayers2. Uma delas é saber a ordem de aparições na tela. A ordem é: mapa(mais ao fundo) -> layers editáveis -> features -> e geometrias. Exemplo:

OpenLayers2

Alguns termos precisam ser compreendidos. São eles:

Features: "Funcionalidade" ou uma "característica". É algo que tem uma "função".

Layers: As Layers são níveis ou camadas que criamos para melhor organizar nossos projetos.

Events: Os eventos são basicamente um conjunto de ações que são realizadas em um determinado elemento da página web.

Codificação

Criando um layer:

 var editingLayer = new OpenLayers.Layer.Vector('batata',{ styleMap: new OpenLayers.StyleMap({'default':{ // variable edition Layer. Stores feature of editing
          'strokeWidth': 2,// espessura da linha ou borda
'strokeColor': '#0094ff',// cor das bordas ou linha
'fillOpacity' : 0.5,//opacidade da cor de fundo
'fillColor': "#00fffa",//cor de fundo
'pointRadius': 7//caso editing Layer for um ponto, tem que ter esse campo, para tratalo de forma correta
        }})});

Recuperar ponto clicado:

Inicialmente deve-se adicionar um listener para o evento click do mapa, e linka-lo como uma função isso pode ocorrer em qualquer momento

map.events.on({"click": thematicmap.onClick,scope: map});//link da função

Caso queira remover esse listener posteriormente:

Salve a posição em uma variavel global

pos=map.events.listeners.click.length;
map.events.on({"click": thematicmap.onClick,scope: map});

Para quebrar o vetor de listener excluindo a posição que se deseja apagar, mantendo os demais. Exemplo abaixo:

map.events.listeners.click=
map.events.listeners.click.slice(0,pos).concat(map.events.listeners.click.slice((pos+1)))

Recuperando o click do mouse:

onClick : function(e){
        var ll=map.getLonLatFromPixel(e);
},

Após isso pode-se a posição pode ser usada de diversas maneiras

Criando um ponto:

var point=new OpenLayers.Geometry.Point(ll.lon,ll.lat);

Para adicionar uma geometria, como um poligono, cria-se um vetor de pontos, e então adicionamos-o ao layer e o layer será adicionado ao mapa

g=[];
var g[0]=point;//repita para todos
var teste = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LinearRing(g));                           
editingLayer.addFeatures([teste]);
map.addLayer(editingLayer);

Desta forma temos nossa geometria criada, adicionada em uma feature, a feature adicionada em um layer, e o layer adicionado em um mapa.

Os tipos de geometria mais comuns são:

LinearRing: um polígono não regular

Polygon: um polígono regular como um círculo ou triângulo

LineString: uma linha

Point: um ponto


Last edited by José Maria Villac Pinheiro