En esta guía hablaremos sobre como manejar eventos del ratón, tales mousemove y mouseClick, esto con el fin de poder capturar las coordenadas del mouse para realizar las acciones que nosotros queramos (guardarlas en una base de datos, un archivo, mostrarla en un texto, etc).
Pagina index.html
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> <script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script> <script type="text/javascript" src="js/OpenLayers_base.js"></script> <style type="text/css"> .smallmap { width: 929px; height: 300px; } </style> </head> <body <body onLoad="iniciar()"> <h3>Nuestro primer mapa con OpenLayers</h3> <div id="mapa" class="smallmap"> </div> <h4>Coordenadas: </h4> <input name="coordenadas" type="text" id="coordenadas" size="50"></input> </body> </html>
Como vera, esta ves lo que hice fue escribir todo el código javascript escrito en las guías pasadas, y colocarlo en un archivo llamado OpenLayers_base, y luego enlazarlo en la pagina. Todo esto con el fin de tener un mayor orden.
OpenLayer_base.js
var mapa,capa,controls;var centerWGS84, centerOSM; var projWGS84, projSphericalMercator; function iniciar() { //Para tener coordenadas estandar projWGS84 = new OpenLayers.Projection("EPSG:4326"); projSphericalMercator = new OpenLayers.Projection("EPSG:900913"); //Centrar el mapa en el punto dado centerWGS84=new OpenLayers.LonLat(-74.061674,4.661464); //Transformar coordenadas anteriores centerOSM = transformToSphericalMercator(centerWGS84); //Creacion del mapa mapa=new OpenLayers.Map("mapa"); //Creacion de capas capa=new OpenLayers.Layer.OSM("Capa OSM"); //Adicion de capas al mapa mapa.addLayer(capa); //Centro el mapa en la posicion dada mapa.setCenter(centerOSM, 15); //Adicion de controles al mapa //Evento para el movimiento del mouse mapa.events.register("mousemove", mapa, mouseMoveHandler); //Control para el click del mouse en el mapa var click = new OpenLayers.Control.Click(); mapa.addControl(click); click.activate(); } //Funcion que registrar el movimiento del mouse function mouseMoveHandler(e) { var position = this.events.getMousePosition(e); var lonlat = mapa.getLonLatFromPixel(position); //alert(lonlat); $("#coordenadas").attr('value','Evento MouseMove: '+transformMouseCoords(lonlat)); } function transformMouseCoords(lonlat) { var newlonlat=transformToWGS84(lonlat); var x = Math.round(newlonlat.lon*10000)/10000; var y = Math.round(newlonlat.lat*10000)/10000; newlonlat = new OpenLayers.LonLat(x,y); return newlonlat; } function transformToWGS84( sphMercatorCoords) { // Transforma desde SphericalMercator a WGS84 // Devuelve un OpenLayers.LonLat con el pto transformado var clon = sphMercatorCoords.clone(); // Si no uso un clon me transforma el punto original var pointWGS84= clon.transform( new OpenLayers.Projection("EPSG:900913"), // to Spherical Mercator Projection; new OpenLayers.Projection("EPSG:4326")); // transform from WGS 1984 return pointWGS84; } function transformToSphericalMercator( wgs84LonLat) { // Transforma desde SphericalMercator a WGS84 // Devuelve un OpenLayers.LonLat con el pto transformado var clon = wgs84LonLat.clone(); // Si no uso un clon me transforma el punto original var pointSphMerc= clon.transform( new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984 new OpenLayers.Projection("EPSG:900913")); // to Spherical Mercator Projection; return pointSphMerc; } //Es un evento que se activa cuando se da clic sobre el mapa OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { defaultHandlerOptions: { 'single': true, 'double': false, 'pixelTolerance': 0, 'stopSingle': false, 'stopDouble': false }, 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); }, trigger: function(e) { //Convierto la posicion del mouse, a coordenadas var lonlat = mapa.getLonLatFromPixel(e.xy); alert("Evento MouseClick: "+transformMouseCoords(lonlat)); } });
El archivo esta dividido en las siguiente funciones:
- iniciar: Se encarga de instanciar los objetos requeridos y agregar los controles al mapa
- mouseMoveHandler: Función que es llamada cuando se produce el movimiento del mouse
- transformMouseCoords,transformToWGS84,transformToSphericalMercator: Son funciones implementadas para poder obtener convertir las coordenadas a las estándar, debido a que la capa OSM trabaja con otro sistema de medición.
- OpenLayers.Control.Click: Es el evento que se encarga de manejar el Click del mouse
En OpenLayers.Control.Click, nos permite realizar unas configuraciones para poder administrar el evento clic del mouse dentro del mapa, las mas destacada, por ejemplo es
defaultHandlerOptions: { 'single': true, 'double': false }
Donde single, si el valor es true, se ejecutara el código dentro del parámetro trigger si se hizo un solo clic con el mouse. Si double es true se ejecutara el código dentro del parámetro trigger si se hizo doble clic con el mouse.
Al final nos queda algo como esto:
Si desean descargar el código fuente de Manejo de eventos del mouse con OpenLayers con un buen Diseño, den clic en el siguiente enlace
Y eso es todo por el momento, en las siguiente guías encontraran mas información sobre como iniciarse en OpenLayers:
- Crear un mapa con OpenLayers
- Manejo de eventos del mouse con OpenLayers
- Manejo de marcadores con OpenLayers
- Manejo de Features ( figuras ) con OpenLayers
0 comentarios :
Publicar un comentario