Manejo de eventos del mouse con OpenLayers con un buen Diseño[/caption]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
[codesyntax lang="html4strict"]
<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>[/codesyntax]
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
[codesyntax lang="javascript"]
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));
}
});[/codesyntax]
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
Las ultimas lineas de la funcion iniciar, se encargan de agregar los eventos al mapa.
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
[codesyntax lang="java5"]
defaultHandlerOptions:
{
'single': true,
'double': false
}
[/codesyntax]
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:
[caption id="" align="aligncenter" width="640"]
Manejo de eventos del mouse con OpenLayers[/caption]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:
0 comentarios :
Publicar un comentario