Introduccin al APIOpenLayers es una librera Javascript de uso
libre para acceder, manipular y mostrar mapas en pginas web.
OpenLayers proporciona un API que permite la creacin de clientes
web para acceder y manipular informacin geogrfica proveniente de
muy variadas fuentes.
OpenLayers permite incorporar mapas dinmicos en las pginas web.
Los mapas se pginas pueden dotar de diversos controles con
capacidades de zoom, panning, medida de distancias y muchas otras
herramientas ias herramientas. OpenLayers proporciona herramientas
para acceder a todo tipo de i informacin geogrfica proveniente de
muy variadas fuentes, por ejemplo Web Map Services, Web Feature
Services, Mapas comerciales, informacin genrica vectorial, etc.
informacin OpenLayers es un proyecto del Open Source Geospatial
Foundation (OSGeo). Es una librera en puro Javascript, de uso
totalmente libre bajo licencia BSD. Para poder utilizar las clases
proporcionadas por OpenLayers habr que incorporar una izar
refrencia al script de la librera en la cabecera de nuestro
documento HTML:
En este artculo se va a analizar la utilizacin bsica de
OpenLayers. Desarrollaremos utilizacin una pgina HTML que muestre
un mapa mundi obtenido desde el servicio de mapas del Instituto
Geogrfico Nacional (Espaa). Antes vamos a introducir algunas de las
clases que proporciona la API de OpenLayers. Todo gira alrededor de
la clase 'Map', en realidad 'OpenLayers.Map'. La clase 'Map' do '.
' encapsula el mapa que se mostrar en pantalla. Para ello habr que
crear una instancia ello de la clase. A este objeto creado, que
llamaremos ''mapa', se le aadirn capas de ', informacin, que
contendrn la referencia a los datos, y controles que permitirn
manipular como se muestra la informacin. Al constructor de la clase
'Map' hay que pasarle como primer argumento una referencia al
elemento de la pgina web donde queremos que se muestre el mapa. Lo
que se le pasa es el valor del atributo 'id' del elemento . En el
cdigo javascript aparecer:var mapa = new
OpenLayers.Map("mapa");
Y en el del cdigo HTML aparecer el elemento :
Ahora tenemos que aadir al mapa al menos una capa con
informacin. La informacin cartogrfica, los datos, se introducen a
travs de la clase OpenLayers.Layer. En realidad a travs de las
clases especializadas derivadas de la clase base OpenLayers.Layer.
Hay muchos tipos de capas especializadas para distintos tipos de
informacin. Por ejemplo hay una capa 'Vector'
(OpenLayers.Layer.Vector) que permite aadir features vectoriales.
Hay capas especializadas para aadir marcadores:
OpenLayers.Layer.Marker; Hay capas especializadas para acceder a
los servicios de mapas comerciales ms conocidos y tambin hay una
capa OpenLayers.Layer.OSM que permite acceder a los mapas de
OpenStreetMap (OSM). La clase Map tiene un atributo 'layers' que
guarda las referencias a las capas que se aaden al mapa. Las capas
se aaden al mapa a travs de sus mtodos addLayer() y addLayers(). En
el ejemplo que estamos construyendo utilizaremos una capa
OpenLayer.Layer.WMS que permite acceder a los Web Map Services.
Habr que pasarle al constructor de la capa el URL del servicio y
los parmetros de la peticin 'GetMap' que queramos especificar,
normalmente al menos el parmetro 'layers' y el parmetro
'projection' que se corresponde con el parmetro 'srs' de la peticin
'GetMap' . En nuestro caso accederemos al Mapa Base del servicio de
mapas del IDEE (Infraestructura de Datos Espaciales de Espaa). El
URL del servicio es: http://www.idee.es/wms/IDEE-Base/IDEE-Base? El
mapa base proporciona una capa denominada "Todas" que da acceso a
todas las capas en una. Esta es la capa que utilizaremos en nuestra
peticin. El primer parmetro pasado al constructor de la capa es un
String con un nombre descriptivo para la capa creada. Con todo
ello, la sentencia que crea la capa quedar:var capa = new
OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://www.idee.es/wms/IDEE-Base/IDEE-Base", {layers: 'Todas',
projection: 'EPSG:4230'} );
Habr que aadir la capa creada al mapa
mediante:mapa.addLayer(capa);
Finalmente utilizaremos el mtodo 'zoomToMaxExtent()' de la clase
Map para mostrar el mapa en pantalla:mapa.setZoomToMaxExtent();
Veamos ahora el cdigo html completo de la pgina que estamos
desarrollando: var mapa, capa; function init(){
mapa = new OpenLayers.Map('mapa'); capa = new
OpenLayers.Layer.WMS( "Mapa Base",
"http://www.idee.es/wms/IDEE-Base/IDEE-Base", {layers: 'Todas',
projection: 'EPSG:4230'} ); mapa.addLayer(capa);
mapa.zoomToMaxExtent(); } Hola Mundo (OpenLayers)
Vemos que la llamada a la funcin init(), que es la que crea el
mapa, se hace a partir del evento 'onload' del elemento . El
resultado de este cdigo lo puedes ver siguiendo el siguiente
enlace: http://www.ingemoral.es/pages/HolaMundo.html Podemos
observar que el mapa por defecto aade controles para zooming y
panning en la esquina superior izquierda. Al elemento le podemos
dar estilo CSS para posicionarlo, aadir recuadro, etc. Para
aprender ms acerca de OpenLayers lo mejor es descargarse la
libreria y sus cdigos fuente desde el lugar de descargas de
OpenLayers. La documentacin en linea de OpenLayers no es completa.
Dentro del paquete podemos ver los cdigos de cada una de las clases
con sus atributos y mtodos perfectamente documentados. Adems se
incluye una coleccin muy completa de ejemplos que sirven como
tutorial de cmo utilizar distintas tcnicas con las clases de
OpenLayers. Para aprender los conceptos bsicos acerca del acceso a
los Web Map Services se puede utilizar el tutorial incluido en
Descartes. Prximos artculos de este blog profundizarn en otros
aspectos de utilizacin de la librera.
El primer mapaLos mapas de OpenLayers se muestran a travs de
pginas Web, por tanto lo primero que hay que hacer para crear un
mapa es crear una pgina html donde albergaremos el resto de
elementos. Un esquema de pgina Web sencilla podra ser el siguiente:
Hola Mundo
Lo siguiente es aadir un elemento 'div' dentro del cual se
mostrar el mapa. El elemento 'div' elegido deber tener definido su
atributo 'id' y adems deber tener definidas al menos las
propiedades de estilo 'width' y 'height'. Hay que sealar que
'width' y 'height' se deben definir dentro de una clasula de estilo
CSS. Si asignamos la anchura y la altura del elemento div a travs
de las propiedades respectivas del elemento DOM el mapa no se
mostrar. Reproducimos el listado de la pgina Web donde hemos aadido
un elemento 'div' llamado 'divMapa'. En la cabecera de la pgina
hemos aadido una clausula de estilo donde hemos definido la anchura
y altura del elemento 'div'. Hola Mundo #divMapa { width: 100%;
height: 515px; border: solid 2px #808080; }
Ahora hay que aadir una pequea rutina javascript que utilice las
clases de OpenLayers para mostrar el mapa. Para poder utilizar las
clases de OpenLayers debemos cargar la librera en memoria. Esto se
hace aadiendo un al fichero 'openlayers.js' en la cabecera de la
pgina. El fichero 'openlayers.js' lo podemos tener nosotros en
nuestro dominio, lo que nos garantizar que siempre utilizamos la
misma versin, o podemos enlazar directamente con la versin ltima
disponible en el sitio de OpenLayers. Para hacer esto ltimo el
enlace que hay que aadir es el siguiente:
Una vez cargada la librera en memoria podemos acceder a las
clases de OpenLayers. Para mostrar un mapa OpenLayers utiliza la
clase OpenLayers.Map, a la que se le aaden una o ms capas, que es
lo que realmente se ve. El objeto OpenLayers.Map es el que mantiene
la proyeccin en la que estamos trabajando, el centro del mapa y el
nivel de zoom en cada momento. Adems el objeto Map tiene una serie
de controles. Hay controles que permiten hacer zoom; otros permiten
hacer panning o leer las coordenadas del cursor; hay controles que
permiten dibujar una linea u otra feature. Hay 38 controles
diferentes que se estudiarn en detalle en el captulo dedicado a
ello. La parte visible del mapa son las capas que vamos aadiendo al
mismo. OpenLayers dispone de una clase genrica OpenLayers.Layer de
la cual derivan los tipos especficos de capas adaptados a los
distintos tipos de fuentes de datos que maneja el programa. As
tenemos capas para acceder a los Web Map Services,
OpenLayers.Layer.WMS, o para guardar elementos vectoriales,
OpenLayers.Layer.Vector. Hay muchos ms tipos de capas que se vern
en detalle en los prximos captulos. Lo primero que hay que hacer es
crear un objeto OpenLayers.Map:var mapa = new
OpenLayers.Map("divMapa");
El parmetro 'divMapa' que le pasamos al constructor es el 'id'
asignado al elemento 'div' creado en la pgina html para mostrar el
mapa. Lo siguiente es crear una capa para mostrar. En el ejemplo
que nos ocupa accederemos al mapa mundi proporcionado por
Metacarta. Crearemos una capa OpenLayers.Layer.WMS mediante el
siguiente constructor:var capa = new OpenLayers.Layer.WMS(
"Metacarta", "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers:
'basic'} );
El primer parmetro pasado al constructor es un nombre
identificativo para la capa. El segundo parmetro es la direccin
'URL' del servicio de mapas. El tercer parmetro que admite el
constructor es una array con las opciones de la peticin GETMAP, de
acuerdo con las prescripciones del estandar OGC para servicios de
mapas. En este caso hemos definido el parametro 'LAYERS' de la
peticin, solicitando la capa 'basic' Slo queda aadir la capa al
mapa y fijar la posicin del centro del mapa y el nivel de zoom
inicial, lo que hacemos mediante el mtodo
OpenLayers.Map.zoomToMaxExtent(). Hay que sealar que la variable
del objeto OpenLayers.Map, en nuestro caso 'mapa', hay que
definirla como variable global. El listado completo de la rutina
javascript queda como sigue: // Definimos las variables globales
'mapa' y 'capa' var mapa, capa; // Definimos una funcin que
arranque al cargar la pgina window.onload= function() { // Creamos
el mapa var mapa = new OpenLayers.Map("divMapa");
// Creamos una capa var capa = new OpenLayers.Layer.WMS(
"Metacarta", "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers:
'basic'} ); // Aadimos la capa al mapa mapa.addLayer(capa); //
Fijamos centro y zoom mapa.zoomToMaxExtent(); }
Ahora ya podemos poner todo junto, con lo que la pgina html
quedar: Hola Mundo #divMapa { width: 100%; height: 515px; border:
solid 2px #808080; } // Definimos las variables globales 'mapa' y
'capa' var mapa, capa; // Definimos una funcin que arranque al
cargar la pgina window.onload= function() { // Creamos el mapa var
mapa = new OpenLayers.Map("divMapa"); // Creamos una capa var capa
= new OpenLayers.Layer.WMS( "Metacarta",
"http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'} ); //
Aadimos la capa al mapa mapa.addLayer(capa); // Fijamos centro y
zoom mapa.zoomToMaxExtent(); }
Puedes ver el ejemplo completo y funcionando en el siguiente
enlace:holaMundo.html
Tipos bsicos de datosOpenLayers est construida sobre Javascript
y por tanto dispone de los mismos tipos de datos. En Javascript hay
cinco tipos de datos primitivos: Undefined, Null, Boolean, Number y
String. Adems se dispone de una coleccin de objetos nativos:
Object, Boolean, Error, SintaxError, Function, Number, EvalError,
TypeError, Array, Date, RangeError,URIError, String, RegExp, y
ReferenceError. OpenLayers ofrece unas clases con mtodos tiles para
operar con los tipos de datos bsicos:
OpenLayers.String
Esta clase proporciona los siguientes mtodos:
startsWidth (string, substr) : Comprueba si la cadena 'string'
comienza con la cadena 'substr'. Devuelve un Boolean contains( str,
substr): Comprueba si la cadena 'substr' est contenida dentro de la
cadena 'str'. Devuelve 'TRUE' en caso afirmativo y 'FALSE' en caso
negativo. trim(str): Devuelve una cadena en la que se han eliminado
todos los espacios que pudiera haber al principio o al final de la
cadena 'str' camelize(str): Camel-Case. Convierte una cadena a base
de guines en el convenio Camelize. Por ejemplo la cadena
'lat-punto' la convierte en latPunto y la cadena -latpunto en
'LatPunto'. Devuelve una cadena con las modificaciones, sin alterar
el original. isNumeric(str): Devuelve un Boolean si la caadena
corresponde a un nmero. Reconoce el formato exponencial para
nuemros reales. ( p. ej isNumeric("2.5e3") devuelve 'TRUE').
numericIf(str): Si la cadena 'str' es un valor numrico devuelve un
Number con ese valor. En otro caso devuelve un String con la misma
cadena recibida.
OpenLayers.Number
La clase OpenLayers.Number tiene dos propiedades que se utilizan
para dar formato a los nmeros: 'decimalSeparator' y
'thousandsSeparator'. Adems contiene las siguientes funciones para
manipular datos tipo Number:
limSigDigs(float, sig): Redondea el valor del Float 'float' al
nmero de decimales indicado por el Integer 'sig'. Devuelve un Float
con el nmero redondeado. format( num, dec, tsep, decsep): Devuelve
un String con el Float 'num' redondeado al nmero de decimales
indicados por el Integer 'dec'. Como separadores de millares y
decimales se utilizarn los String 'tsep' y 'decsep'
respectivamente.
OpenLayers.Function
OpenLayers.Array
OpenLayers.Date
Adems hay unas clases utilitarias:
OpenLayers.Class : Se usa como clase base para todas las dems.
OpenLayers.Element : Representa a un elemento DOM.
Hay otras clases de elementos simples:
OpenLayers.Pixel
Representa una posicin de pantalla. Tiene dos propiedades : 'x'
e 'y'. El constructor admite como parmetros los valores de las
coordenadas x e y:OpenLayers.Pixel( x: Number, y: Number);
La clase OpenLayers.Pixel tiene los siguientes mtodos de
utilidad:
toString() : Devuelve una cadena de la forma 'x=200.4,y=242.2',
supuestas estas las coordenadas del objeto clone() : Devuelve un
'clon', una instancia de OpenLayers.Pixel con idnticas x e y que el
original. equals (px: OpenLayers.Pixel) : Devuelve un Boolean
indicando si el Pixel pasado como argumento es equivalente al
objeto propietario del mtodo. add( dx: Number, dy: Number) :
Devuelve un OpenLayers.Pixel cuyas componentes son la suma de las
originales ms los incrementos 'dx' y 'dy'. offset( px:
OpenLayers.Pixel) : Devuelve un OpenLayers.Pixel cuyas coordenadas
son la suma del original mas las coordenadas del punto offset
OpenLayers.LonLat
Representa una posicin geogrfica identificada por sus
propiedades longitud, 'lon', y latitud 'lat'. Las dos nicas
propiedades especificas de la clase LonLat son 'lon' y 'lat' que
son del tipo Number y que se correspondern con las coordenadas de
un punto expresadas en las unidades de la proyeccin del mapa. As si
el mapa est trabajando en una proyeccin con coordenadas geogrficas,
el par representara una longitud y una latitud expresadas en grados
sexagesimales. En el caso de que el mapa est en otro tipo de
proyeccin, la pareja 'lon', 'lat' representar un punto en las
coordenadas y unidades de la proyeccin del mapa. Si nuestro mapa
utiliza la proyeccin Spherical Mercator, la pareja 'lon', 'lat'
sern las coordenadas de un punto en dicha proyeccin y expresadas en
metros. Para crear un objeto LonLat se le pasan al constructor la
pareja de datos 'lon' 'lat':var pto = new OpenLayers.LonLat( -3.54,
42.37);
Una vez creado un objeto de la clase OpenLayers.LonLat podremos
acceder a sus propiedades individuales de forma sencilla:var
longitud = pto.lon; var latitud = pto.lat;
La clase LonLat expone los siguientes mtodos:
toString(): Devuelve un String formateado con las coordenadas
del punto. toShortString(): Devuelve un String formateado con las
coordenadas del punto en formato compacto. clone(): Devuelve un
objeto LonLat con los mismos valores de 'lon' y 'lat'. add( inclon,
inclat): Devuelve un objeto LonLat cuyas coordenadas son el
resultado de sumar ordenadamente a las coordenadas del objeto
original los valores pasados en los parmetros 'inclon' y
'inclat'.
equal(otherLonLat): Este mtodo devuelve un Boolean que indica si
el objeto 'otherLonLat' pasado como parmetro tiene los mismos
valores de las propiedades 'lon' y 'lat' que el objeto original.
transform(sourceProy, destProy): En este mtodo los dos parmetros
que se pasan como argumentos son dos objetos OpenLayers.Proyection.
El mtodo modifica las coordenadas del LonLat original mediante la
aplicacin del cambio de coordenadas entre la proyeccin 'sourceProy'
y la proyeccin 'destProy'. El mtodo devuelve una referencia al
objeto original, con las coordenadas transformadas. (Este mtodo
modifica las coordenadas del objeto LonLat original).
wrapDateLine(maxExtent): fromString (str): Esta funcin crea un
objeto LonLat a partir de un String que tenga las coordenadas
separadas por una coma. Por ejemplo : 'var ll =
OpenLayers.LonLat.fromString("-3,43")'
OpenLayers.Size
Representa un tamao en dos dimensiones. Tiene dos propiedades
'w', anchura y 'h', altura. El constructor admite dos parmetros
Number que se corresponden con los valores de la anchura 'w' y la
altura 'h' del objeto 'Size' que se desea
construir:OpenLayers.Size( w: Number, h: Number)
La clase OpenLayers.Size expone los siguientes mtodos
pblicos:
toString() : Devuelve una Cadena (String) del tipo : 'w=55,h=66'
clone() : Devuelve un objeto OpenLayers.Size idntico al propietario
del mtodo equals( px: OpenLayers.Pixel) : Devuelve un Boolean que
nos indica si los objetos son equivalentes (misma anchura, misma
altura).
OpenLayers.Bounds
Representa una regin rectangular, identificada por sus
propiedades 'left', 'bottom', 'right' y 'top'.
OpenLayers.Icon
Encapsula un icono. Tiene propiedades 'url', 'size', 'px' y
'offset'. Tambin ofrece una propiedad 'calculateOffset' que permite
calcular el offset en funcin del tamao.
OpenLayers.Projection
Representa un cambio de coordenadas.
La clase OpenLayers.UtilLa clase OpenLayers.Util es una coleccin
de mtodos y propiedades utilitarios que permiten realizar
determinadas tareas frecuentes de un modo sencillo. La documentacin
de la clase la puedes encontrar en:
http://dev.openlayers.org/docs/files/OpenLayers/Util-js.html.
Desarrollamos a continuacin la explicacin de algunos de los mtodos
de la clase Util:
GetElement()
OpenLayers.Util.getElement( idElemento : String [, idElemento2 :
String, ... ] ) : [ domElement o Array[ domElements] ]
Admite como parmetro uno o ms id's correspondientes a elementos
del DOM que queremos seleccionar. Nos devuelve un elemento o un
Array con los elementos solicitados. El caso habitual con un solo
parmetro de entrada es equivalente a 'document.getElementById(
idElemento )' o al clsico '$('idElemento')'. Un ejemplo de
utilizacin sera:var element =
OpenLayers.Util.getElement("panelIzquierdo");
En este caso la variable 'element' recibira una referencia al
elemento del documento html cuyo id es 'panelIzquierdo'.
isElement()
OpenLayers.Util.isElement( elemento : Object ) : Boolean
Recibe como parmetro el elemento a analizar y devuelve 'TRUE' si
se trata de una instancia de la clase Element y 'FALSE' en caso
contrario.
extend()
OpenLayers.Util.extend( dest: Object, source: Object ) :
Object
Este mtodo copia las propiedades del objeto 'source' en el
objeto destino 'dest', sin modificar propiedades que no se
especifiquen en el objeto 'source'. Es muy til en situaciones en
las que creamos un objeto con las propiedades por defecto, y luego
con el mtodo 'extend()' afinamos el valor de las propiedades que
consideremos adecuado. Un ejemplo de utilizacin lo tenemos en la
creacin de un estilo de visualizacin para una Feature punto.
Podemos crear un estilo con los valores por defecto de la siguiente
manera:// Crear un objeto estilo con valores por defecto var
point_style = OpenLayers.Util.extend({},
OpenLayers.Feature.Vector.style['default']);
Ahora solo necesitamos modificar los valores de las propiedades
que queramos personalizar:point_style.strokeColor = "#000011";
point_style.fillColor = "#ffa500";
removeItem()
OpenLayers.Util.removeItem( miArray: Array, item: Object ) :
Array
Esta funcin recorre los elementos del Array 'miArray' y elimina
el elemento 'item' si existe. La funcin devuelve una referencia al
Array modificado. Para vaciar un Array hay que utilizar
'miArray.length = 0 '.
La clase OpenLayers.MapOpenLayers.Map es la clase fundamental de
la librera OpenLayers. Todo programa de OpenLayers tiene como
objeto crear un mapa que se viasualizar en pantalla. Los objetos de
la clase OpenLayers.Map son una coleccin de capas,
OpenLayers.Layer, que contienen la informacin que se quiere
mostrar, y controles, OpenLayers.Control, que permiten interactuar
con el usuario. El objeto Map tambin es el responsable de gestionar
la visualizacin del mapa en cuanto a Zoom y Panning se refiere. El
constructor de la clase Map tiene la siguiente
forma:OpenLayers.Map( div : [DOMElement/ String], options:
Object)
El primer parmetro es una referencia al elemento 'div' del
documento html destinado a contener el mapa. En lugar de una
referencia se puede pasar una cadena de texto con el 'id' del
elemento. El segundo parmetro es un Array de opciones en la forma
'key:value'. Las opciones son valores de las propiedades del objeto
'Map' que queramos fijar con un valor determinado en el
constructor. Un ejemplo de mapa sin opciones adicionales podra
ser:var map = new OpenLayers.Map("divMapa");
Podemos aadir las opciones adicionales directamente en el
constructor:var map = new OpenLayers.Map("divMapa", projection:
'EPSG:4326', units: 'm' } ); {
Pero tambin podemos preparar primero el objeto de opciones y
aadirlo luego al constructor por referencia:var opciones =
{projection: 'EPSG:4326', units: 'm'}; var map = new
OpenLayers.Map("divMapa", opciones);
La clase OpenLayers.Map expone una buena coleccin de propiedades
y mtodos.Propiedades del objeto Map
Bsicamente un objeto Map es una coleccin de capas (Layer) y
controles (Control). Veamos en primer lugar una serie de
propiedades que son colecciones de objetos pertenecientes al
mapa:
layers: La propiedad 'layers' es un Array de objetos
OpenLayers.Layer, que contiene la coleccin de capas del mapa. Para
gestionar la coleccin de capas se dispone de los mtodos:
addLayer(), addLayers(), removeLayer(), getNumLayers(),
getLayerIndex(), setLayerIndex(), raiseLayer(), setBaseLayer(),
getLayer(), getLayersBy(), getLayersByClass(), getLayersByName(),
setLayerZIndex(), resetLayersZIndex().
controls: Coleccin de controles asociados al mapa. Para manejar
la coleccin se utilizan los mtodos: addControl(), addControls(),
addControlToMap(), getControl(), getControlsBy(),
getControlsByClass() y removeControl(). Mtodos del objeto Map
Controles: IntroduccinLos controles se utilizan para interactuar
con el mapa. Permiten hacer zoom, mover el mapa, conocer las
coordenadas del cursor, dibujar features, etc En OpenLayers V2.10
hay 40 clases de controles para utilizar con los mapas. De ellos,
dos est desaconsejado su uso pues se van a suprimir en la prxima
versin de OpenLayers, la versin 3.0. Los controles descatalogados
son 'MouseDefaults' y 'MouseToolBar'. De los 38 controles
restantes, dos son nuevos de esta versin, 'SLDSelect' y
'WMTSGetFeatureInfo'. El resto vienen de versiones anteriores, si
bien el control 'OpenLayers.Control.Panel' ha sufrido
modificaciones en su funcionamiento respecto de anteriores
versiones. Todos los controles derivan de la clase
'OpenLayers.Control', y todos los controles se aaden al objeto
'OpenLayers.Map', directa o indirectamente. La clase
'OpenLayers.Map' tiene una propiedad 'controls' que guarda la lista
de controles del mapa. Para aadir un control al mapa se puede hacer
mediante el mtodo 'OpenLayers.Map.addControl()' o bien directamente
en el constructor de 'OpenLayers.Map'. El constructor de la clase
OpenLayers.Map permite aadir controles en el momento de la creacin
del mapa. Si no se indica nada, el mapa aade los siguientes
controles por defecto:
OpenLayers.Control.Navigation OpenLayers.Control.PanZoom
OpenLayers.Control.ArgParser OpenLayers.Control.Attribution
Esto es, si creamos el mapa con el siguiente constructor:var map
= new OpenLayers.Map("divMapa");
Automticamente quedan aadidos al mapa los controles por defecto
indicados. Podemos crear un mapa sin ningn control de la siguiente
manera:var map = new OpenLayers.Map("divMapa", {controls: [] }
);
Si lo que queremos es aadir una serie de controles elegidos por
nosotros habra que invocar el constructor del mapa de la siguiente
manera:var map = new OpenLayers.Map("divMapa", { controls: [ new
OpenLayers.Control.PanZoom(), new OpenLayers.Control.Attribution()
]} );
Tambin podemos crear un mapa sin controles y aadirselos
despus:
var map = new OpenLayers.Map("divMapa", { controls: []}); var
ctrlPanZoom = new OpenLayers.Control.PanZoom();
map.addControl(ctrlPanZoom); var ctrlAttribution = new
OpenLayers.Control.Attribution();
map.addControl(ctrlAttribution);
En ambos casos hemos creado un mapa con los controles 'PanZoom'
y 'Attribution'. Debemos cuidar siempre de aadir el control
'Attribution' para mostrar correctamente los Attribution de los
mapas que utilicemos. En OpenLayers las definiciones de estilo por
defecto de controles y otros elementos se declaran y definen en la
hoja de estilo
http://www.openlayers.org/api/theme/default/style.css. Podemos
aadir un enlace a dicha hoja de estilo en nuestro cdigo:
href="http://www.openlayers.org/api/theme/default/style.css"
Si echamos un vistazo al fichero vemos que se definen
propiedades de estilo para todo tipo de elementos que son faciles
de identificar por su nombre de clase. Tambin podemos personalizar
la posicin o el aspecto de los controles como se ver en captulos
posteriores La lista de controles que podemos utilizar es la
siguiente:
Controles generales o ArgParser o Attribution o Button o
Graticule o KeyboardDefaults o LayerSwitcher o OverviewMap o Panel
o PanPanel o PermaLink o SLDSelect (nuevo versin 2.10) o Snapping o
Split Zoom, Panning, Position o DragPan o MousePosition o
Navigation o NavigationHistory o NavToolBar o Pan o PanZoom o
PanZoomBar o ZoomBox o ZoomIn
ZoomPanel ZoomOut ZoomToMaxExtent Features o EditingToolbar o
DragFeature o DrawFeature o GetFeature o ModifyFeature o
SelectFeature o TransformFeature Medir o Measure o Scale o
ScaleLine Servicios de Mapas o WMSGetFeatureInfo o
WMTSGetFeatureInfo (nuevo versin 2.10)o o o
En prximos captulos iremos explicando la utilizacin detallada de
cada uno de estos controles.
La clase OpenLayers.ControlPropiedades:
id : (String) map : (OpenLayers.Map) El mapa al que pertenece el
control div : (DOMElement) Elemento 'div' que alberga el control
type : (Number) Especifica el comportamiento del control, dentro
del panel. Puede tomar los valores: o
OpenLayers.Control.TYPE_BUTTON :
Utilizacin de los controles
OpenLayers.Control.KeyboardDefaults
Este control permite hacer zoom mediante las teclas '+' y '-' y
mover el mapa con las teclas de flecha. Para activar el control
solo hay que crear una instancia de la clase
OpenLayers.Control.KeyboardsDefaults y aadirsela a la coleccin de
controles del mapa.var ctrl = new
OpenLayers.Control.KeyboardsDefaults(); map.addControl(ctrl);
En el siguiente enlace puedes ver un ejemplo de utilizacin del
control: Ejemplo OpenLayers.Control.KeyboardDefaults
OpenLayers.Control.Attribution
En OpenLayers la clase OpenLayers.Layer tiene una propiedad
llamada 'attribution' que es un String que se muestra en pantalla
cuando el mapa dispone del control OpenLayers.Control.Attribution.
El constructor de 'OpenLayers.Map' aade un control 'Attribution'
por defecto si no se especifica lista de controles en el
constructor. Si al crear el mapa aadimos nuestra propia lista de
controles debemos cuidar el detalle de aadir el control
OpenLayers.Control.Attribution El control 'Attribution' dispone
entre otras de las siguientes propiedades y mtodos que pueden ser
de utilidad:
draw() : Inicializa y dibuja el 'attribution'. Devuelve una
referencia al elemento 'div' que contiene el control. El valor de
retorno podramos utilizarlo para ajustar propiedades de estilo,
posicin, etc. updateAttribution() : Actualiza el 'attribution' en
pantalla. (El valor de la cadena attribution esta en
OpenLayers.Layer.attribution).
En OpenLayers las definiciones de estilo por defecto de
controles y otros elementos se declaran y definen en la hoja de
estilo http://www.openlayers.org/api/theme/default/style.css.
Podemos aadir un enlace a dicha hoja de estilo en nuestro cdigo:
href="http://www.openlayers.org/api/theme/default/style.css"
Si echamos un vistazo al fichero vemos que se definen
propiedades de estilo para todo tipo de elementos que son faciles
de identificar por su nombre de clase. El nombre de la clase que
controla el aspecto del control 'Attribution' es
'olControlAttribution'. Por defecto se define de la siguiente
manera:.olControlAttribution { font-size: smaller; right: 3px;
bottom: 4.5em; position: absolute; display: block; }
Podemos redefinir los valores a conveniencia, siempre respetando
la regla de oro: Colocar el attribution en un lugar visible del
mapa.
OpenLayers.Control.Scale
El control Scale muestra la escala actual del mapa, en forma de
ratio (1: 10000). El constructor tiene la siguiente
signatura:OpenLayers.Control.Scale ( element: DOMElement, options:
Object)
El aspecto y posicin del control Scale viene definido por su
atributo 'class' que es 'olControlScale'. Los valores de estilo por
defecto para este control los podemos encontrar en el fichero
style.css y son los siguientes:.olControlScale { right: 3px;
bottom: 3em; display: block; position: absolute; font-size:
smaller; }
Vemos que el control se situa en la esquina inferior derecha por
defecto. Estas posiciones las podemos modificar a nuestra
conveniencia personalizando las clusulas de estilo de la clase
'olControlScale'. El control Scale tiene una propiedad 'geodesic',
que es un Boolean que indica si las distancias se deben calcular
mediante geodsicas o cartesianas. Por defecto este valor es
'FALSE', valor que se recomienda para la utilizacin con mapas en
'EPSG:4326' (WGS84). En el caso de trabajar con mapas en Spherical
Mercator, 'EPSG:900913', se recomienda establecer el valor de
'geodesic' en 'TRUE'. En este caso, la escala se calcula en base al
tamao horizontal del pixel en el centro de la ventana de
visualizacin del mapa. El control Scale proporciona dos mtodos:
draw(): Dibuja el control. Devuelve el DOMElement donde se aloja
el control.
updateScale(): Recalcula y muestra la escala del mapa.
Para aadir el control Scale a un mapa debemos crear una
instancia del control y aadirsela a la coleccin de controles del
mapa.// Crear una instancia del control var ctrl = new
OpenLayers.Control.Scale(); // Aadirsela al mapa
map.addControl(ctrl);
OpenLayers.Control.Button
Este control representa un boton de pulsar. Est pensado para
formar parte de un control contenedor como 'Panel'. La clase Button
deriva de Control, a la que aade un valor prefijado para la
propiedad 'type' y un mtodo llamado 'trigger'. El tipo de control
est fijado en el valor predefinido OpenLayers.Control.Type_BUTTON.
El nico mtodo que aporta la clase Button es el mtodo trigger(). El
mtodo 'trigger' ser llamado por el panel contenedor cada vez que se
pulse el botn. Para crear un botn hay que utilizar el constructor
heredado de la clase Control, que admite como parmetro un objeto
'options' que ser un Array asociativo con los valores de las
propiedades que queramos especificar. En el caso de los botones le
deberemos pasar como parmetros el nombre de clase CSS del 'div'
donde se alojar el botn, as como una referencia a la funcin
'trigger()' que hay que llamar cuando se pulse el botn. Un ejemplo
podra ser el siguiente :var button = new
OpenLayers.Control.Button({ displayClass: "MyButton", trigger:
myFunction }); panel.addControls([button]);
El programa utilizar como nombre de la clase CSS del botn la
cadena pasada como argumento aadiendole el sufijo 'ItemInactive'.
Esto es, en nuestro ejemplo la clase CSS del botn ser
'MyButtonItemInactive'. En este mismo ejemplo, el programa llamar a
la funcin disparadora 'myFunction' cada vez que se pulse el
botn.
Botones personalizadosLa clase OpenLayer.Control.Panel sirve
para agrupar varios controles tipo botn o pulsador. Si no creamos
un elemento 'div' en la pgina html para alojar el Panel, el
programa le asignar uno y lo situar en la esquina superior
izquierda del mapa. Para poder controlar la posicin y el aspecto de
nuestro Panel hay que crear un elemento 'div' en la pgina html. En
el elemento 'div' hay que definir un 'id' y una clase 'class':
Podemos situar el Panel dentro o fuera del mapa. La posicin y
aspecto del Panel la controlamos mediante clausulas de estilo CSS.
En nuestro ejemplo hemos decidido situar el Panel en la parte
superior y fuera del mapa. La definicin de estilo para el
Panel:.miPanel { position: relative; left: 103px; height: 38px;
width: 78px; margin: 6px; border: solid 2px blue; background-color:
#00d0ff; }
Para completar el proceso de creacin del Panel habr que llamar
al constructor de la clase en el cdigo Javascript. El constructor
de la clase Panel admite un nico parmetro que es un Object con las
propiedades que queramos especificar al control. En nuestro caso
debemos indicarle cual es el elemento 'div' asignado al Panel. Lo
hacemos en dos pasos. Primero recuperamos el elemento 'div' con el
mtodo 'OpenLayers.Util.getElement' y luego se lo pasamos al
constructor del Panel:// Cogemos una referencia al 'div' del panel
var el = OpenLayers.Util.getElement('panel0'); // Creamos el panel0
pasandole la referencia del 'div' var panel = new
OpenLayers.Control.Panel({ 'div' : el });
Con esto queda completado el proceso de crear nuestro Panel para
alojar otros controles. A los paneles se les pueden aadir
cualquiera de los controles predefinidos para hacer zoom, pan,
dibujar features, etc. En este caso vamos a aadir dos botones de la
clase genrica OpenLayers.Control.Button. La clase
OpenLayers.Control.Button ofrece funcionalidad para un botn alojado
en un Panel. Para crear un botn no es necesario crear ningn
elemento 'div' dentro del cdigo html de la pgina. El programa se
encargar de hacerlo por nosotros. Nosotros lo que tenemos que hacer
es indicarle el nombre de la clase 'class' que define nuestros
botones.
A la cadena que le pasemos al constructor, por ejemplo 'btn1',
el programa le aade el sufijo 'ItemActive', de modo que el nombre
de la clase del botn queda 'btn1ItemActive'. Este ser el nombre de
clase que habr que utilizar en la hoja de estilo para definir el
aspecto de nuestro botn. En nuestro ejemplo hemos definido dos
botones: 'btn1' y 'btn2'. Los nombres de clase sern
'btn1ItemActive' y 'btn2ItemActive'. La clase Button tiene una
propiedad llamada 'trigger' (disparador) que apunta a una funcin
que ser llamada cada vez que se pulse el botn. Este es el segundo
parmetro que es necesario pasarle al constructor y deber ser el
nombre de la funcin que queramos que se ejecute cuando pulsemos el
botn. Con estas consideraciones los constructores de nuestros dos
botones quedarn:btn1 = new OpenLayers.Control.Button({
displayClass:"btn1", trigger: btn1Click }); btn2 = new
OpenLayers.Control.Button({ displayClass:"btn2", trigger: btn2Click
});
El primer parmetro es 'displayClass', que como hemos indicado es
el prefijo del nombre de clase del botn. El segundo parmetro es el
mtodo que se llamar al pulsar el botn.// Funcin 'trigger' del boton
1 function btn1Click() { var el = document.getElementById('mapa');
el.innerHTML = "Botn 1"; } // Funcin 'trigger' del boton 2 function
btn2Click() { var el = document.getElementById('mapa');
el.innerHTML = "Botn 2"; }
En cuanto a la definicin del estilo de los botones hemos elegido
la siguiente:.btn1ItemInactive { float: left; width: 32px;
height:32px; margin: 2px; border: solid 1px #333333; border-bottom:
solid 2px #333333; border-right: solid 2px #333333;
background-color: #0069b4; background-image: url('image1.gif');
background-repeat: no-repeat; background-position: center cursor:
pointer; } .btn2ItemInactive { float: left; width: 32px;
height:32px; margin: 2px; border: solid 1px #333333; border-bottom:
solid 2px #333333; border-right: solid 2px #333333;
background-color: #0069b4; background-image: url('movie.gif');
background-repeat: no-repeat;
background-position: center cursor: pointer; }
Observese que se han utilizado los nombres de clase mencionados
anteriormente para cada botn, usando la pseudo clase 'hover' para
variar el color del fondo cuando el ratn sobrevuela el botn. Se ha
definido para cada botn 'float: left' para que se vayan adosando de
izquierda a derecha en lugar de apilarse de arriba a abajo. Adems
se ha especificado el tamao y un borde ms grueso abajo y a la
derecha para dar sensacin de volumen. Se ha situado una imagen de
fondo del botn, centrada y sin repeticin. Creados los botones solo
falta aadirlos al Panel y aadir el Panel al Map:// Aadimos los
botones al panel panel.addControls([btn1, btn2]); // Aadimos el
panel al mapa map.addControl(panel);
Poniendo juntas todas las piezas, el resultado lo puedes ver en:
ejemploControlButton.html
La clase OpenLayers.LayerLa clase OpenLayers.Layer es la clase
base para todos los tipos de capas especializadas, que son las que
realmente se aaden a los mapas. El constructor de la clase
OpenLayers.Layer tiene la siguiente signatura:OpenLayers.Layer(
name: String, options: Object)
El primer parmetro es una cadena que permitir identificar a la
capa, por ejemplo en el control LayerSwitcher. El segundo parmetro
es un Hashtag de opciones adicionales que se aadirn a la capa. La
forma de este parmetro es un Array asociativo de parejas
'key:value' separadas por comas. El constructor no se utiliza
directamente, pues se utilizan las clases derivadas, pero un
ejemplo ilustrativo de la forma de pasar el segundo parmetro podra
ser el siguiente:var capa = new OpenLayers.Layer( "L1", {opacity:
0.5, isBaseLayer: false } );
La clase OpenLayers.Layer expone las siguientes propiedades:
id : String .- El valor del atributo 'id' asignado al elemento
'div' de la capa name : String .- El nombre de la capa es una
cadena que permite identificar a la capa en algunas situaciones,
por ejemplo en el Control LayerSwitcher div : DOMElement .- Es una
referencia al elemento 'div' que alberga la capa. opacity : Float
.- Es un nmero entre 0 (= transparente) y 1 (= opaco) que indica el
grado de transparencia de la capa. alwaysInRange : Boolean .- Se
debe establecer en 'true' cuando la visualizacin de la capa no se
debe basar en zoom. events : OpenLayers.Events .- La propiedad
'events' es la coleccin de eventos de la capa. Es una referencia a
un objeto de la clase OpenLayers.Events. map : Es una referencia al
mapa que contiene a la capa. Se establece en la funcin addLayer()
del mapa o en la funcin setMap() de la capa. El objeto apuntado es
un OpenLayers.Map. isBaseLayer : Es un Boolean que indica si se
trata de una capa base. Por defecto es falso. Las clases derivadas
especializadas establecen un valor por defecto para cada tipo de
capa. alpha : Es un Boolean que indica si las imgenes de la capa
tienen canal alfa. Por defecto es false. displayInLayerSwitcher :
Boolean que indica si el nombre de la capa debe de aparecer o no en
el control LayerSwitcher. El valor por defecto es 'true'.
visibility : Es un Boolean que indica si la capa es visible o no.
El valor por defecto es 'true'. attribution : Se trata de la
cadena, String, que se mostrar en el control Attribution. inRange :
Es un Boolean que indica si el valor de la resolucin actual est
entre el mnimo y el mximo de la capa (minResolution,
maxResolution). Se establece cada vez que cambia el zoom.
imageOffset : Desplazamientos x,y debidos al borde, 'gutter', en
las imgenes que tienen 'gutter'. Es un objeto OpenLayers.Pixel.
options : Se trata de un objeto mediante el cual se pueden pasar
al constructor de la capa valores iniciales para cualquiera de las
propiedades de la capa. Vease un ejemplo mas arriba en la
explicacin del constructor de Layer. eventListeners : (Object)
gutter : (Integer) El valor del ancho del borde, si lo tiene. Por
defecto es cero projection : (Object) Objeto OpenLayers.Projection
con la projeccin de la capa. Si se pasa en el objeto 'options' del
constructor, se puede pasar como una cadena del tipo 'EPSG:4326',
pero durante la creacin de la capa se construir un objeto
Projection. Cuando se utiliza esta opcin suele ser necesario fijar
tambin 'maxExtent', 'maxResolution' y 'units'.
units : (String). Las unidades de medida de la capa. Por defecto
son grados, y la variable 'units' tiene el valor 'degrees'. Los
valores posibles son: 'degrees' (o 'dd'), 'm', 'ft', 'km', 'mi',
'inches' scales : (Array). Un array con las escalas del mapa para
cada zoom en orden descendente. Este parmetro slo tiene sentido si
est bien calibrado con la resolucin concreta del monitor en el que
estemos trabajando. Adems debe de estar bien definida la propiedad
'units' de la capa. En general es preferible utilizar la propiedad
'resolutions'. resolutions : (Array). Un array con las resoluciones
del mapa para cada zoom en orden descendente. La resolucin es el
numero de unidades de mapa por pixel. Si no se especifica al
construir la capa, se calcula en base a otras propiedades de la
capa (maxExtent, maxResolution, maxScale, etc). maxExtent :
(OpenLayers.Bounds). The center of these bounds will not stray
outside of the viewport extent during panning. In addition, if
displayOutsideMaxExtent is set to false, data will not be requested
that falls completely outside of these bounds.
Tipos de Capas
OpenLayers.Layer.Markers
OpenLayers nos ofrece una capa especial para alojar nuestros
marcadores: OpenLayers.Layer.Markers. Un marcador es una instancia
de la clase OpenLayers.Marker, que es una combinacin de un icono y
una posicin. El constructor de la clase OpenLayers.Markers tiene la
siguiente forma:OpenLayers.Markers ( name : String, options:
Object)
El primer parmetro es una cadena que permitir identificar a la
capa, por ejemplo en el control LayerSwitcher. El segundo parmetro
es una Hashtable de opciones extra que queramos asignar a la capa.
Las propiedades pblicas de la capa Markers son:
isBaseLayer : (Boolean = false) Las capas de marcadores no son
capas base. Se sobreescribe la propiedad de la clase base
OpenLayers.Layer con el valor false. markers :
(Array(OpenLayers.Marker)) Lista de marcadores de la capa. Esta
propiedad es un Array que guarda las referencias a los marcadores
que se han ido aadiendo a la capa. drawn (Boolean) : Nos indica si
se ha dibujado la capa. En algunas situaciones al inicializar la
capa o hacer zoom es necesario comprobar esta variable y si es
necesario llamar al mtodo 'draw()'
La capa Markers proporciona los siguientes mtodos:
addMarker( marker : OpenLayers.Marker) : Aade a la capa el
marcador referenciado por la variable 'marker' removeMarker( marker
: OpenLayers.Marker ) : Elimina de la capa el marcador 'marker'.
drawMarker( marker : OpenLayers.Marker) : Calcula la posicin pixel
del marcador, lo crea y lo aade al 'div' de la capa.
clearMarkers(): Esta funcin deja vaca la lista de marcadores de la
capa. Los marcadores en s mismos no se eliminan, pero si se retiran
de la lista de marcadores de la capa. setOpacity( opacity: float):
Establece la opacidad de todos los marcadores de la capa. (0 =
transparente; 1= opaco) getDataExtent() : Devuelve un
OpenLayers.Bounds con la extensin que abarca todos los marcadores
de la capa moveTo (bounds, zoomChanged, dragging) :
Puedes consultar la documentacin completa de la clase
OpenLayers.Layer.Markers en el siguiente enlace:
http://dev.openlayers.org/docs/files/OpenLayers/Layer/Markers-js.html
OpenLayers.Layer.Boxes
La capa WMS
Las capas OpenLayers.Layer.WMS estn pensadas para albergar los
datos provenientes de consultas a los Web Map Services de acuerdo
con las especificaciones del OGC (Open Geospatial Consortium). En
las siguientes referencias puedes obtener una introduccin a los Web
Map Services y otros temas relacionados:
TutorialWMS.pdf : Introduccin a los WMS. GetCapabilities.pdf :
Capacidades del servicio. GetMap.pdf : La peticin GetMap.
GetFeatureInfo.pdf : Peticin de fenmenos. Inspire.pdf : Directiva
INSPIRE.
Esta capa hereda de OpenLayers.Layer.Grid. Para acceder a un WMS
lo primero que debemos conocer es la url del servicio de mapas. Por
ejemplo en Espaa disponemos de un WMS del Instituto Geogrfico en la
siguiente direccin url: http://www.idee.es/wms/IDEE-Base/IDEE-Base
Existen numerosos servicios de mapas para consultar en la red. En
este enlace se pueden ver algunos de ellos. Hay que especificar una
serie de parmetros que definirn los datos que queremos recibir del
servicio:
Eventos del objeto MapEl objeto OpenLayers.Map es capaz de
gestionar los siguientes eventos:
preaddlayer Se dispara antes de aadir una capa. El objeto
'event' tiene una propiedad 'layer' que referencia la capa que se
va a aadir. addlayer triggered Despues de crearse la capa. El
objeto 'event' tiene una propiedad 'layer' que referencia la capa
que se va a aadir. removelayer Se dispara despues de la creacin de
una capa. El objeto 'event' tiene una propiedad 'layer' que
referencia la capa que se va a aadir. changelayer Despues de
cambiar el nombre, el orden, la opacidad, los parmetros o la
visibilidad de una capa. Los manejadores del evento recibirn un
objeto 'event' con unas propiedades 'layer' y 'property' con
referencias a la capa cambiada y la clave de la propiedad cambiada
(name, order, opacity, params, visibility). movestart Este evento
se dispara al comienzo de un drag, pan o zoom. move Despues de cada
drag, pan o zoom. moveend Se dispara al completar un drag, pan o
zoom. zoomend Se dispara cuando se completa un zoom. addmarker
Despues de aadir un marcador. removemarker Se dispara despues de
eliminar un marcador. clearmarkers Despues de borrar los
marcadores. mouseover Despues de sobrevolar el ratn el mapa.
mouseout Disparado al salir el cursor del mapa. mousemove Cuando el
cursor se mueve sobre el mapa. dragstart No funciona. Utilizar
movestart. drag No funciona. Utilizar move. dragend No funciona.
Utilizar moveend. changebaselayer Se dispara cuando se cambia la
capa base.
Para utilizar alguno de los eventos debemos definir una funcin
que admita un parmetro de tipo OpenLayers.Event, y que ser la
encargada de gestionar el evento.function miManejador(evt) { ......
}
El objeto 'evt' que recibe la funcin al dispararse el evento
tendr distintas propiedades segn el evento de que se trate. Todos
tienen al menos las propiedades 'object', una referencia al objeto
que dispara el evento ('map.events.object') y 'element', una
referencia al elemento DOM que dispara el evento
('map.events.element'). Los eventos del navegador tienen adems la
propiedad 'xy' con un objeto OpenLayers.Pixel con las coordenadas
del punto donde se ha disparado el evento, relativas a la ventana
del mapa. Para registrar nuestro manejador en la lista de
manejadores del objeto Map debemos utilizar el mtodo register' de
la clase OpenLayers.Events.map.events.register(type, obj,
listener);
Los parmetros que le pasamos son :
type Un String con el nombre del evento que queremos manejar.
obj El objeto que recibe el evento. Normalmente el objeto Map
listener Una referencia a la funcin manejadora del evento
Hemos desarrollado un ejemplo en el que aadimos un manejador
para el evento 'mousemove' y mostramos las coordenadas de cursor en
pixels y en grados en unos elementos 'text' fuera del mapa.
testMapEvents.html Si desplazas el mapa o haces zoom podrs
comprobar que las coordenadas pixel siempre se refieren a la
esquina de la ventana del mapa, mientras que las coordenadas
longitud-latitud se refieren a la posicin absoluta en el mapa.
Coordenadas del cursor
En OpenLayers disponemos de una gestin de eventos a travs del
objeto OpenLayers.Map que nos permite interactuar con el usuario de
diversas maneras. Uno de los eventos proporcionado por el 'Map' es
'mousemove' que nos proporciona las coordenadas en pixels del
cursor cuando este se mueve por el mapa. Para utilizar el evento
debemos definir una funcin 'callback' que ser llamada cada vez que
se dispare el evento, esto es, cada vez que se mueva el cursor
sobre el mapa. Adems debemos 'registrar' el evento de forma que
indiquemos: el evento que queremos gestionar, el objeto 'Map' y la
funcin que hay que llamar cada vez que se dispare el
evento.map.events.register("mousemove", map, mouseMoveHandler);
La funcin que reciba el evento debe de admitir un parmetro
'event'. Por ejemplo podra ser algo parecido a lo
siguiente:function mouseMoveHandler(e) { var position =
this.events.getMousePosition(e); var lonlat =
map.getLonLatFromPixel(position); }
Vemos que el evento nos proporciona las coordenadas pixel, (a
travs del mtodo 'getMousePosition' del objeto 'event'). Mediante el
mtodo 'getLonLatFromPixel' del objeto 'map' podemos obtener las
coordenadas del punto en la proyeccin que est utilizando el mapa.
Esto en algunas ocasiones no nos resuelve el problema. Pongamos por
caso que estamos utilizando el mapa OpenStreetMap que trabaja en la
proyeccin Spherical Mercator. En este caso el mtodo
'getLonLatFromPixel' nos dar las coordenadas en la proyeccin
Spherical Mercator. Si lo que queremos son las coordenadas Longitud
y Latitud en el sistema WGS84, por ejemplo, habr que transformar
las coordenadas desde Spherical Mercator a WGS84. Para ello podemos
utilizar el mtodo 'transform' de la clase LonLat, aunque este mtodo
transforma las coordenadas del punto original. Nosotros hemos
preferido definir una funcin de transformacin, que mediante un
'clon', devuelve un punto con las coordenadas transformadas sin
alterar el punto original:function transformToWGS84(
sphMercatorCoords) { // Transforma desde SphericalMercator a WGS84
// Devuelve un OpenLayers.LonLat con el pto transformado var clon =
sphMercatorCoords.clone(); var pointWGS84= clon.transform( new
OpenLayers.Projection("EPSG:900913") new
OpenLayers.Projection("EPSG:4326")); return pointWGS84; }
La coordenadas del punto devuelto son 'float' con los decimales
que le correspondan. Podemos necesitar gestionar el formato de los
nmeros. Nosotros hemos decidido poner las coordenadas con cuatro
decimales, para lo que utilizamos el siguiente mtodo: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; }
Los valores los vamos a mostrar en un elemento 'div' llamado
'coords'. Incorporando estos afinamientos a nuestra rutina de
gestin del evento, podra quedar algo as:function
mouseMoveHandler(e) { var position =
this.events.getMousePosition(e); var lonlat =
map.getLonLatFromPixel(position);
OpenLayers.Util.getElement("coords").innerHTML =
transformMouseCoords(lonlat); }
Hemos puesto todo junto en una pgina que puedes consultar en el
siguiente enlace:
TestEvents1Otra forma de mostrar las coordenadas del cursor es a
travs del control 'MousePosition'. Este control nos muestra las
coordenadas en la proyeccin del mapa. Este control tiene un
atributo 'formatOutput' que se puede definir apuntando a un mtodo
que transforme las coordenadas que queremos mostrar, como se
muestra a continuacin:var ctrl = new
OpenLayers.Control.MousePosition() ctrl.formatOutput =
transformMouseCoords; map.addControl(ctrl);
Donde como rutina de 'callback' hemos utilizado el mtodo
transformMouseCoords definido anteriormente. En la siguiente pgina
utilizamos las dos tcnicas simultneamente y mostramos las
coordenadas del cursor en el control y en un elemento HTML:
TestEvents2
VideoMap: Mostrar videosEl objeto OpenLayers.Popup es el
utilizado para mostrar un cuadro con informacin en el mapa, por
ejemplo al pulsar sobre un marcador. El constructor tiene la
siguiente forma:var pop = new OpenLayers.Popup ( id, lonlat,
contentSize, contentHTML, closeBox, closeBoxCallback );
Los parmetros que se pasan al constructor son:
id: (String) Identificador nico para el Popup lonlat:
(OpenLayers.LonLat) Coordenadas en el mapa de la esquina superior
izquierda del recuadro a mostrar contentSize: (OpenLayers.Size)
Tamao del recuadro a mostrar contentHTML : (String) Cdigo de
marcado HTML que se mostrar en el recuadro closeBox: (Boolean)
Indica si aparecer o no un control en X para cerrar el recuadro.
closeBoxCallback: (Function) La funcin que se llamar al cerrar el
recuadro. (Opcional)
El parmetro 'contentHTML' puede albergar cualquier cosa que
podamos describir con HTML. Son ejemplos habituales mostrar un
texto informativo o mostrar un mapa de detalle de la zona pulsada.
Nosotros hemos preferido mostrar un video de Youtube. El cdigo de
marcado se obtiene en los vdeos de Youtube en la opcin 'insert'.
Copiando y pegando en el cdigo javascript, con unos pequeos
retoques, pues funciona. Hemos cambiado las comillas dobles por
comillas simples para ajustar el parmetro. Adems hemos ajustado el
tamao al de nuestro recuadro y hemos aadido dos parmetros del API
de Youtube: autoplay=1 y rel=0. El parmetro 'autoplay' por defecto
vale '0' e indica si se debe reproducir el vdeo automticamente o
no. El parmetro 'rel=0' (por defecto vale '1') indica que no se
muestren en la imagen enlaces a otros vdeos parecidos. El ejemplo
completo lo podis encontrar en el siguiente enlace:
VideoMap.html
Map MarkersGoogle populariz los marcadores para mapas, esos
pequeos iconos que sirven para sealar una posicin sobre un mapa
electrnico y que suelen proporcionar acceso a alguna caracterstica
adicional al pulsar sobre ellos. Desde entonces han aparecido
cientos de marcadores, cada vez mas sofisticados, pero que
bsicamente conservan el 'look' orignal que permite identificarlos
como marcadores. Actualmente hay muchas colecciones de marcadores
disponibles para utilizar en nuestros mapas. Una buena coleccin es
la que se puede ver en Google-Maps-Icons, coleccin de 900
marcadores de uso libre y organizados por categoras : Cultura,
Educacin, Transporte, ... Hay otros sitios de marcadores :
Mapki : Google Mapki Mapito : Free Map Marker Icons
MapChannels
Tambin se pueden utilizar imgenes vectoriales para crear
marcadores. Una forma de hacerlo es a travs de juegos de caracteres
personalizados. La calidad de estos marcadores es buena, pero slo
proporcionan dos colores. Independientemente la simbologa para
cartografa est reglamentada en muchos campos:
Map Symbols Topographic Symbol Chart USA Chart Symbols
Aeronautical Chart Symbols Nautical Chart Symbols
A continuacin presentamos el listado de un ejemplo de mapa
sencillo con un marcador, desarrollado para la API de
Google:function init() { if(GBrowserIsCompatible()) { var
centerLatitude=40.678; var centerLongitude=-3.97; var startZoom=13;
var map = new GMap2(document.getElementById("map")); var
location=new GLatLng(centerLatitude, centerLongitude);
map.setCenter(location, startZoom); var marker=new
GMarker(location); map.addOverlay(marker); } }
El ejemplo siguiente es similar al anterior pero desarrollado
para la API de OpenLayers:function init() { var map, layer, center;
center = new OpenLayers.LonLat(-3.97,40.678); map = new
OpenLayers.Map("map"); layer = new OpenLayers.Layer.WMS(
"Cartociudad",
"http://www.cartociudad.es/wms/CARTOCIUDAD/CARTOCIUDAD", {layers:
['Vial', 'DivisionTerritorial', 'FondoUrbano']});;
map.addLayer(layer); var markers = new OpenLayers.Layer.Markers(
"Markers" ); map.addLayer(markers); var size = new
OpenLayers.Size(21,31); var offset = new
OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon(
"http://www.ingemoral.es/img/markers/icons-2/scenic.png",
size,offset); markers.addMarker(new OpenLayers.Marker(center,
icon)); map.setCenter(center, 13); }
El resultado de ambas pginas se puede ver en los siguientes
enlaces. Tambin puedes examinar el cdigo fuente completo de los
ejemplos. TestGoogleMarker TestOpenLayersMarker
Dynamic map markersComo continuacin del artculo sobre Estilos
personalizados de puntos mostramos un mapa en el que se utilizan
instancias de la clase OpenLayers.Feature.Vector con una geometra
'Point' en la que en lugar de utilizar los grficos predefinidos
utilizamos el atributo 'externalGraphic' apuntando a cualquier tipo
de grafico. En nuestro ejemplo hemos utilizado algunos grficos GIF
dinmicos a modo de marcadores.El codigo fuente de la pgina lo
puedes ver en:
TestImageStyle.html TestImageStyle.js
Elementos vectoriales
Vamos a desarrollar un ejemplo muy simple de mapa al que
aadiremos tres elementos (features) vectoriales: un punto, una
linea y un polgono. OpenLayers define la clase OpenLayers.Feature y
sus derivadas como una combinacin de geometra y atributos. En
particular la clase OpenLayers.Feature es una combinacin de un
LonLat y un Marker. La clase que utilizaremos en el ejemplo es
OpenLayers.Feature.Vector. Esta clase proporciona un atributo
'Geometry' que describe su geometra, un atributo 'attributes' para
describir el objeto y un atributo 'style' con el que se puede dotar
de propiedades de estilo de representacin a las features siguiendo
las reglas de los Styled Layer Descriptor (SLD) del OGC. En este
artculo utilizaremos el estilo por defecto que OpenLayers asigna, y
en un artculo posterior desarrollaremos el tema de los estilos. El
atributo 'geometry' es una referencia a un objeto de la clase
OpenLayers.Geometry. Esta clase tiene varias clases derivadas que
nos permiten definir distintos tipos de geometras. En nuestro caso
utilizaremos las clases OpenLayers.Geometry.Point para definir la
geometria de un punto, OpenLayers.Geometry.LineString para definir
lneas abiertas y OpenLayers.Geometry.LinearRing para definir
polgonos (lineas cerradas). En los tres casos el procedimiento
seguido para aadir features vectoriales es el mismo. Se crea un
objeto con la geometra adecuada que luego es el parametro que se
pasa al constructor de la clase OpenLayers.Feature.Vector. En este
caso, al utilizar los estilos por defecto, la geometra es el nico
parmetro que pasamos al constructor de la feature. Para visualizar
las features creadas debemos aadirlas a una capa vectorial del tipo
OpenLayers.Layer.Vector. A esta capa se le aaden las features a
travs del mtodo addFeatures(). El programa que desarrolla el
ejemplo es el siguiente: Capa Vectorial function init() { var map;
// Crear la capa base map = new OpenLayers.Map('map');
var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
map.addLayer(layer); // Crear una feature punto var point = new
OpenLayers.Geometry.Point(-4.0, 40.0); var pointFeature = new
OpenLayers.Feature.Vector(point); // Crear una feature line var
pointList = []; var newPoint = point; for(var p=0; p
