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