OpenLayers: eventos

Publicado: 11/07/2013 em Programação, Serviços IP
Tags:, ,

1. Introdução
Eventos são o coração do JavaScript. São impulsos que desencadeiam reações. Cada classe capaz de emitir eventos é responsável por gerenciar seus “listeners” (aquelas funções que devem ser notificadas quando um evento é disparado) e também por emitir eventos sob certas circunstâncias. Por exemplo, é possível disparar eventos para quando o zoom do mapa mudar, quando um layer for carregado ou quando uma feature for adicionada ao layer. Eventos tem o significado de “algo está acontecendo” e deve ter um tratamento.

Mas como funciona mesmo os eventos no OpenLayers?
Para explicar de uma maneira fácil, vamos exemplificar através do tipo de evento “zoomend” da classe OpenLayers.Map. Para este tipo de evento, todas as vezes que o mapa muda seu zoom, ele é reponsável por disparar (trigger) o evento do tipo “zoomend”, e daí todos seus listeners serão notificados deste novo evento.

Para ajudar em todos estes processos, o OpenLayers possui a classe OpenLayers.Event, que cuida dos “registering listeners” e simplifica a ação de acionamento do evento para todos estes listeners (obs: um evento pode acionar vários listeners). Simplificadamente, esta classe permite:

  • definir o evento;
  • registrar os listeners;
  • acionar os eventos para notificar-se todos os listeners.

Quando um evento acontece, o mecanismo de gerenciamento de eventos do OpenLayers sempre chama a função listener passando um parâmetro “event”. Este objeto passado contém as informações que foram escritas pela classe que disparou o evento, mais as seguintes 3 propriedades que são sempre adicionadas automaticamente:

  •  type: contém o tipo do evento (exemplos: move, zoomend, etc);
  • object: aponta para o objeto que disparou o evento;
  •  element: o elemento DOM relacionado ao evento.

A construção é a seguinte:

register: function ( type, obj, func_listener, priority )

2. Tipos de eventos e forma de utilização
Os eventos são o que conduz as interações no OpenLayers, que, como dito anteriormente, possui sua própria classe Openlayers.Event. No OpenLayers existem dois tipos de eventos utilizados:

  • Browser Events: por exemplo, clicking do mouse no mapa.
  • Map Events: por exemplo, zooming do mapa para alguma coordenada.

Neste post estaremos interessados em explorar este segundo tipo de evento, onde existem duas formas de se utilizar os “Map Events” (que ao final realizam a mesma coisa):

  • no instante da criação do mapa já se adicionar os eventos;
  • definir os eventos em um instante posterior àquele da criação do mapa.

a) no instante da criação do mapa já se adicionar os eventos.
Para isto utilizaremos a propriedade eventListeners, tanto na classe OpenLayers.Map como na classe OpenLayers.Layer. Esta é a forma apropriada de se utilizar um Map Event desde que já se saiba no instante da criação do objeto mapa quais os eventos que se deseja adicionar ao mapa.
Exemplo:


// Criar as funções que serão chamadas pelos eventListeners
function movimento_listener(e){alert(
                   'Tipo do evento= ' + e.type + 
                   '\nClasse que disparou o evento= ' + e.object.CLASS_NAME +
                   '\nElement DOM= ' + e.element);};
function layer_listener(e){alert(
                   'Tipo do evento= ' + e.type + 
                   '\nClasse que disparou o evento= ' + e.object.CLASS_NAME +
                   '\nElement DOM= ' + e.element);};                  
// Criar o objeto mapa informando a propriedade eventListener. Neste caso, dois listeners.
map = new OpenLayers.Map('map_id',{
      eventListeners:{
                      'moveend': movimento_listener,
                      'changelayer': layer_listener
}});

 
OBS:
i) A propriedade eventListener é estruturada através de par key:value (eventType:listenerFunction);
ii) Os objetos eventListeners serão registrados com a classe OpenLayers.Events.on.

b) definir os eventos em um instante posterior àquele da criação do mapa.
Para isto utilizaremos a propriedade “events”. Esta forma de se utilizar o Map Event tem a diferença em relação a primeira forma pelo fato que definimos o tipo de evento em um instante posterior àquele da criação do objeto mapa. Existem dois métodos construtivos, mas que proporcionam o mesmo resultado:

Método-1: utilizando o método “register”
Exemplo:


// As funções listeners são as mesmas do último exemplo acima. 
// Não foram replicadas aqui. 
// Adicionar os eventos ao mapa que fora criado anteriormente,
//  uma instrução por tipo de evento.
map_name.events.register('moveend',map_name,movimento_listener);
map_name.events.register('changelayer',map_name,layer_listener);

 

OBS: no campo da propriedade object poderiamos utilizar “null” ou “this”, e o OpenLayers assumiria o próprio escopo de execução da instância (“this”).

Método-2: utilizando o método “on”
É um conveniete método para registrar listeners dentro de um escopo comum. Internamente, este método chama o método “register”.


Exemplo:
  // As funções listeners são as mesmas do último exemplo acima. Não copiadas aqui. 
  // Adicionar os eventos ao mapa que fora criado anteriormente, todos os eventos de uma única vez.
map_name.events.on({
	'moveend':movimento_listener,
	'changelayer':layer_listener
});

 

3. Map event Types
Temos falado em tipos de eventos mais ainda não expomos quais os tipos de eventos suportados. Na verdade cada classe que tem a propriedade “events” define um array com os tipos de eventos possíveis para aquela classe. Por exemplo, os tipos de eventos suportados pela classe OpenLayers.Map versão 2.12 são:
EVENT_TYPES: [“preaddlayer”, “addlayer”, “preremovelayer”, “removelayer”, “changelayer”, “movestart”, “move”, “moveend”, “zoomend”, “mouseover”, “mouseout”, “mousemove”, “changebaselayer”]

Já para a classe OpenLayers.Layer versão 2.12 temos:
EVENT_TYPES: [“loadstart”, “loadend”, “visibilitychanged”, “move”, “moveend”, “added”, “removed”]

Para a classe OpenLayers.Layer.Vector versão 2.12, além dos tipos suportados para a classe OpenLayers.Layer, adicionalmente também suporta:
EVENT_TYPES: [“beforefeatureadded”, “beforefeaturesadded”, “featureadded”, “featuresadded”, “beforefeatureremoved”, “beforefeaturesremoved”, “featureremoved”, “featuresremoved”, “beforefeatureselected”, “featureselected”, “featureunselected”, “beforefeaturemodified”, “featuremodified”, “afterfeaturemodified”, “vertexmodified”, “vertexremoved”, “sketchstarted”, “sketchmodified”, “sketchcomplete”, “refresh”]

Uma forma outra forma prática de ver os eventos suportados pelas classes do OpenLayers é utilizando o Firebug executando comandos através de seu console:
– para a classe OpenLayers.Map: “map.events.listeners”;
– para a classe Openlayers.Layer: “nome_layer.events.BROWSER_EVENTS” (neste caso encontra-se os tipos de eventos “Browser Events”).
Obs: vale salientar que este array de tipos de eventos suportados pode mudar a cada versão de OpenLayers, o que trará impacto sobre os programas desenvolvidos.

Referências:
1- OpenLayers: API Documentation
2- OpenLayers Library Documentation
Veja Também:
3- Um pouco de OpenLayers, Geoserver e PostGis

Anúncios

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