//
you're reading...
OpenLayers

Capturar la posición del Click con OpenLayers

Seguro que alguno de vosotros os encontráis en estos momentos desarrollando vuestro visor de mapas con la magnifica libreria OpenLayers, y os encontráis ante el dilema de querer saber en que posición clickais. Esta información nos puede ser valiosa por multiples cuestiones, una de ellas, porque sí. Así que os voy a explicar brevemente como hacerlo, claro, en el caso de que todavía no hayáis adquirido OpenLayers 2.10 Beginner’s Guide

Para ello primero definiremos un OpenLayers.Control.Click y crearemos un Handler de este Click, no voy a entrar en detalle más que del singleclick, que es el que nos interesa, aunque podemos con este manejador tratar los diferentes tipos de click.


OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
 defaultHandlerOptions: {
 ‘single’: true,
 ‘double’: false,
 ‘pixelTolerance’: 0,
 ‘stopSingle’: false,
 ‘stopDouble’: false
 },
 // inicializamos el manejador con las opciones
 initialize: function(options) {
 this.handlerOptions = OpenLayers.Util.extend(
 {}, this.defaultHandlerOptions
 );
 OpenLayers.Control.prototype.initialize.apply(
 this, arguments
 );
 this.handler = new OpenLayers.Handler.Click(
 this, {
 ‘click’: this.trigger
 }, this.handlerOptions
 );
 },
 // creamos una funcion que se dispare en el click
 trigger: function(e) {
 var lonlat = map.getLonLatFromViewPortPx(e.xy);

// sacamos un popup que nos muestre las coordenadas
 alert(“Ud pincho sobre… ” + lonlat.lon + “,” +
 + lonlat.lat);
 }

});

como veis es muy sencillo, simplemente tenemos: El control y el manejador (con su inicialización y su trigger).

Para usarlo simplemente nos creamos un objeto click con nuestro nuevo control  y lo añadimos a nuestro objeto map.


click = new OpenLayers.Control.Click();
 map.addControl(click);

Después para activarlo solo tendremos que:


click.activate();

¿A que ha sido fácil? ¡pues ale, a OpenLayear!

Advertisement

Comentarios

Aún no hay comentarios.

Deja un comentario

Fill in your details below or click an icon to log in:

Logo de WordPress.com

You are commenting using your WordPress.com account. Log Out / Cambiar )

Twitter picture

You are commenting using your Twitter account. Log Out / Cambiar )

Facebook photo

You are commenting using your Facebook account. Log Out / Cambiar )

Connecting to %s

Categorías

Archivos

Seguir

Get every new post delivered to your Inbox.