Mar 292012
 
En OpenLayers tenemos dos proyecciones definidas por defecto que son la EPSG:4326 (Coordenadas geográficas Datum WGS-84) y la EPSG::900913 (Spherical Mercator, habitualmente utilizada en los mapas de OpenStreetMap, Google y otros).

Podemos incorporar otras proyecciones. Para ello tenemos que incluir en nuestro código la librería PROJ4JS que nos permitirá definir proyecciones y realizar las correspondientes transformaciones entre ellas. La librería Proj4JS la podemos descargar desde:

http://trac.osgeo.org/proj4js/wiki/Download

Situaremos el fichero proj4js-combined.js en un directorio accesible desde nuestra página web a la que añadiremos una sentencia del tipo:


Ahora ya podemos utilizar en nustro código Javascript la definición de proyecciones. Por ejemplo, para definir la proyección UTM zona 30 Norte, (EPSG:23030), debemos incluir en el código Javascript la siguiente sentencia:

También podemos incluir una proyección concreta en nuestro código mediante la siguiente construcción:


Ahora solamente nos queda utilizar las proyecciones definidas. Por ejemplo podríamos pasar de WGS84 a UTM-30N mediante la siguiente sentencia:


Las definiciones de las distintas proyecciones las podemos obtener en :

http://spatialreference.org/

Hemos preparado un ejemplo completo en el que cargamos la capa del Mapa Topográfico Nacional Español Raster Escala 1:25.000 y la capa de las fotografías del Plan Nacional deOrtofotografía Aérea, PNOA. El resultado lo puedes ver en :

olutm.html

Santiago Higuera (30 Marzo 2012)

Feb 142011
 

Una feature consta de una geometria y un estilo. La geometría será una clase derivada de OpenLayers.Geometry. Estas clases tienen dos metodos ‘move’ y ‘rotate’ que permiten ajustar dinámicamente la posición de las features sobre el mapa. Las features tienen que haber sido creadas y añadidas a la capa vectorial previamente.
Una vez llamadas las funciones ‘move’ y/o ‘rotate’ hay que llamar al método ‘drawFeature()‘ de la capa para que se redibuje.

Al método ‘rotate hay que pasarle dos argumentos : un ángulo de rotación en grados (antihorario positivo) y un objeto OpenLayers.Geometry.Point que hará de centro de la rotación.

El método ‘move acepta como parametros el valor de los desplazamientos deseados en la dirección x e y:

El ejemplo de la documentación de OpenLayers ha servido para documentar el artículo y aplica los métodos aquí expuestos a geometrías Point, LineString y LinearRing.

El método rotate no gira la feature sobre si misma, sino que realiza un giro de la feature respecto del centro de giro indicado. Si el centro de giro coincide con el centro de la feature, la feature no rota sobre si misma. Esto sucede cuando se utiliza una imagen en el estilo de una feature con geometría Point y se quiere girar sobre si misma, esto es, con centro de rotación en el centro de la feature, para orientar el icono en una determinada dirección. En este caso para girar la imagen habrá que actuar sobre la propiedad ‘style.rotation‘ de la feature, asignándole el ángulo deseado.



Santiago Higuera (14 Febrero 2011)

Jan 302011
 
Para mostrar etiquetas en mapas creados con OpenLayers podemos utilizar la clase OpenLayers.Feature.Vector.
El constructor de Feature.Vector nos pide dos parámetros: una geometría y un estilo:

(El segundo parámetro es un objeto con atributos opcionales para incorporar a la feature. En nuestro caso no lo vamos a utilizar)
Para la geometría utilizaremos una instancia de la clase OpenLayers.Geometry.Point. Al constructor deberemos pasarle las coordenadas x,y del punto donde queramos situar la etiqueta:

Si las coordenadas provienen de objetos LonLat habrá que crearla de la siguiente manera:

Las features vectoriales tienen una propiedad denominada ‘style’ que es un objeto con las propiedades de visualización. Según la geometría que tenga la feature las propiedades se referirán a las características del grueso de linea, del radio del punto o, en nuestro caso, el estilo del texto. Las propiedades de estilo que puede tener una feature vectorial se detallan en la documentacion de los symbolizer.
La forma práctica de obtener un objeto estilo es utilizar el método ‘extend’ con un estilo por defecto y modificar el valor de las propiedades que queramos personalizar.

La propiedad ‘graphic’ es un Boolean que indica si queremos representar el ‘simbolizer’ del punto. Poniendo el valor en ‘false’ sólo se visualizará la etiqueta. Si lo activamos con ‘true’ se verán la etiqueta y el punto(por defecto un circulo). En este caso disponemos de las propiedades ‘labelXOffset’ y ‘labelYOffset’ para situar el texto de la etiqueta respecto del símbolo del punto.
Una vez creada la feature vectorial a partir de la geometría y el estilo habrá que añadirsela a una capa vectorial que habremos creado previamente:

Hemos preparado un pequeño ejemplo en el que se utiliza un mapa cuya única capa es la capa vectorial que contiene la etiqueta. Esto se consigue pasando al mapa la propiedad ‘allOverlays’ con el valor ‘true’ y fijando una extensión para el mapa.
Ejemplo de Etiqueta en OpenLayers
Oct 102010
 

La clase OpenLayer.Control.Panel sirve para agrupar varios controles tipo botón o pulsador.

Si no creamos un elemento ‘div’ en la página html para alojar el Panel, el programa le asignará uno y lo situará en la esquina superior izquierda del mapa. Para poder controlar la posición y el aspecto de nuestro Panel hay que crear un elemento ‘div’ en la página html. En el elemento ‘div’ hay que definir un ‘id‘ y una clase ‘class‘:

Podemos situar el Panel dentro o fuera del mapa. La posición 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 definición de estilo para el Panel:

Para completar el proceso de creación del Panel habrá que llamar al constructor de la clase en el código Javascript. El constructor de la clase Panel admite un único parámetro 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 método ‘OpenLayers.Util.getElement‘ y luego se lo pasamos al constructor del Panel:

Con esto queda completado el proceso de crear nuestro Panel para alojar otros controles.

A los paneles se les pueden añadir cualquiera de los controles predefinidos para hacer zoom, pan, dibujar features, etc. En este caso vamos a añadir dos botones de la clase genérica OpenLayers.Control.Button.

La clase OpenLayers.Control.Button ofrece funcionalidad para un botón alojado en un Panel.

Para crear un botón no es necesario crear ningún elemento ‘div’ dentro del código html de la página. 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 añade el sufijo ‘ItemActive‘, de modo que el nombre de la clase del botón queda ‘btn1ItemActive‘. Este será el nombre de clase que habrá que utilizar en la hoja de estilo para definir el aspecto de nuestro botón. En nuestro ejemplo hemos definido dos botones: ‘btn1‘ y ‘btn2‘. Los nombres de clase serán ‘btn1ItemActive‘ y ‘btn2ItemActive‘.

La clase Button tiene una propiedad llamada ‘trigger‘ (disparador) que apunta a una función que será llamada cada vez que se pulse el botón. Este es el segundo parámetro que es necesario pasarle al constructor y deberá ser el nombre de la función que queramos que se ejecute cuando pulsemos el botón.

Con estas consideraciones los constructores de nuestros dos botones quedarán:

El primer parámetro es ‘displayClass‘, que como hemos indicado es el prefijo del nombre de clase del botón. El segundo parámetro es el método que se llamará al pulsar el botón.

En cuanto a la definición del estilo de los botones hemos elegido la siguiente:

Observese que se han utilizado los nombres de clase mencionados anteriormente para cada botón, usando la pseudo clase ‘hover’ para variar el color del fondo cuando el ratón sobrevuela el botón. Se ha definido para cada botón ‘float: left’ para que se vayan adosando de izquierda a derecha en lugar de apilarse de arriba a abajo. Además se ha especificado el tamaño y un borde más grueso abajo y a la derecha para dar sensación de volumen. Se ha situado una imagen de fondo del botón, centrada y sin repetición.

Creados los botones solo falta añadirlos al Panel y añadir el Panel al Map:

Poniendo juntas todas las piezas, el resultado lo puedes ver en:

ejemploControlButton.html



Santiago Higuera (9 Octubre 2010)

Sep 282010
 

Los 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 próxima versión de OpenLayers, la versión 3.0. Los controles descatalogados son ‘MouseDefaults‘ y ‘MouseToolBar‘. De los 38 controles restantes, dos son nuevos de esta versión, ‘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 añaden al objeto ‘OpenLayers.Map‘, directa o indirectamente. La clase ‘OpenLayers.Map‘ tiene una propiedad ‘controls‘ que guarda la lista de controles del mapa. Para añadir un control al mapa se puede hacer mediante el método ‘OpenLayers.Map.addControl()‘ o bien directamente en el constructor de ‘OpenLayers.Map‘.

El constructor de la clase OpenLayers.Map permite añadir controles en el momento de la creación del mapa. Si no se indica nada, el mapa añade los siguientes controles por defecto:

Esto es, si creamos el mapa con el siguiente constructor:

Automáticamente quedan añadidos al mapa los controles por defecto indicados.

Podemos crear un mapa sin ningún control de la siguiente manera:

Si lo que queremos es añadir una serie de controles elegidos por nosotros habría que invocar el constructor del mapa de la siguiente manera:

También podemos crear un mapa sin controles y añadirselos después:

En ambos casos hemos creado un mapa con los controles ‘PanZoom‘ y ‘Attribution‘. Debemos cuidar siempre de añadir 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 añadir un enlace a dicha hoja de estilo en nuestro código:

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. También podemos personalizar la posición o el aspecto de los controles como se verá en capítulos posteriores

La lista de controles que podemos utilizar es la siguiente:

  • Controles generales
    • ArgParser
    • Attribution
    • Button
    • Graticule
    • KeyboardDefaults
    • LayerSwitcher
    • OverviewMap
    • Panel
    • PanPanel
    • PermaLink
    • SLDSelect (nuevo versión 2.10)
    • Snapping
    • Split
  • Zoom, Panning, Position
    • DragPan
    • MousePosition
    • Navigation
    • NavigationHistory
    • NavToolBar
    • Pan
    • PanZoom
    • PanZoomBar
    • ZoomBox
    • ZoomIn
    • ZoomPanel
    • ZoomOut
    • ZoomToMaxExtent
  • Features
    • EditingToolbar
    • DragFeature
    • DrawFeature
    • GetFeature
    • ModifyFeature
    • SelectFeature
    • TransformFeature
  • Medir
    • Measure
    • Scale
    • ScaleLine
  • Servicios de Mapas
    • WMSGetFeatureInfo
    • WMTSGetFeatureInfo (nuevo versión 2.10)

En próximos capítulos iremos explicando la utilización detallada de cada uno de estos controles.