Para poder utilizar las clases proporcionadas por OpenLayers habrá que incorporar una referencia al script de la librería en la cabecera de nuestro documento HTML:
Para crear el documento HTML se utilizará el Bloc de Notas de Windows y se guardará como TXT. Una vez desarrollado el código HTML se modificará la extensión del documento TXT a HTML.
5.1. Definir la librería JavaScript de OpenLayers
La parte del código que define la librería JavaScript es la siguiente:
<script src="http://openlayers.org/api/2/OpenLayers.js">
</script>
Además al iniciar el cuerpo del HTML hay que definir la capa HTML donde se insertará el mapa:
<div id="map" style="height: 100%; width: 100%;">
</div>
<script defer="defer" type="text/javascript">
5.2. Crear el mapa
Antes de entrar en la definición del mapa es necesario saber que Javascript cuenta con la palabra "var" para declarar una o varias variables. Como es lógico, hay que utilizar esa palabra para definir la variable antes de utilizarla.
var operando1
var operando2
También se permite declarar varias variables en la misma línea, siempre que se separen por comas.
var operando1,operando2
Para crear el mapa lo primero que hay que hacer es crear un objeto OpenLayers.Map tal y como se hizo en el código de ejemplo:
var map = new OpenLayers.Map('map', options);
5.3. Definir las capas de información
Para definir las capas de información se crea un objeto OpenLayers.Layer.WMS
var wms = new OpenLayers.Layer.WMS( "OrtoExpress",
"http://www.idee.es/wms/PNOA/PNOA?", {layers:'pnoa'} );
Posteriormente se añade al mapa la capa creada
map.addLayer(wms);
5.4. Inicializar el mapa en la máxima extensión
var operando1
var operando2
También se permite declarar varias variables en la misma línea, siempre que se separen por comas.
var operando1,operando2
Para crear el mapa lo primero que hay que hacer es crear un objeto OpenLayers.Map tal y como se hizo en el código de ejemplo:
var map = new OpenLayers.Map('map', options);
5.3. Definir las capas de información
Para definir las capas de información se crea un objeto OpenLayers.Layer.WMS
var wms = new OpenLayers.Layer.WMS( "OrtoExpress",
"http://www.idee.es/wms/PNOA/PNOA?", {layers:'pnoa'} );
Posteriormente se añade al mapa la capa creada
map.addLayer(wms);
5.4. Inicializar el mapa en la máxima extensión
Para realizar la inicialización del mapa en la extensión máxima es necesario añadir al final la siguiente línea de código:
map.zoomToMaxExtent();
5.5. Extensión geográfica del cliente web
Una vez creado el mapa hay que establecer la proyección y extensión geográfica que abarcará el visor web. Para establecer la extensión hay que usar el objeto OpenLayers.Bounds.
var map = new OpenLayers.Map('map', {projection: "EPSG:4326",
maxExtent: new OpenLayers.Bounds(-10, 34, 5, 44)});;
En el ejemplo que se está comentando se ha declarado una variable extent donde se ha definido el objeto OpenLayers.Bounds (en este caso son las coordenadas X e Y mínimas y máximas para la isla de El Hierro) y una variable options donde se ha definido la proyección (“EPSG: 32628” que equivale al huso 28N UTM WGS84), la escala máxima permitida en el visor, la escala mínima a la que se inicia el visor y la máxima extensión la cual llama a la variable extent definida anteriormente.
var extent = new OpenLayers.Bounds(175000,3055000,230000,3090000);
var options = {projection: "EPSG:32628", units: 'm', maxScale: 1000, minScale: 100000, maxExtent: extent, };
La variable options se llama al crear el mapa como se vio anteriormente:
var map = new OpenLayers.Map('map', options);
5.6. Control de capas de información
Para poder controlar la visualización de las capas que se añaden al mapa hay que establecer el LayerSwitcher:
map.addControl(new OpenLayers.Control.LayerSwitcher());
5.7. Cargar una nueva capa base
Para añadir capas al visor y poder ser activadas o desactivadas con el control de capas de información incorporado anteriormente hay que tener en cuenta que OpenLayers distingue dos tipos de capas de información: BaseLayers (capas base http://trac.openlayers.org/wiki/BaseLayer) y Overlays (capas superpuesta http://trac.openlayers.org/wiki/Overlay). Las capas BaseLayers se seleccionarán con radio-buttons, por lo que serán excluyentes entre sí, mientras que las capas Overlays se seleccionarán mediante checkboxes, por lo que podrán superponerse distintas capas de información para su visualización conjunta.
Las capas base a partir de servicios WMS se definen de la siguiente manera:
var wms = new OpenLayers.Layer.WMS( "OrtoExpress",
"http://www.idee.es/wms/PNOA/PNOA?", {layers:'pnoa'} );
map.addLayer(wms);
Primero se define la variable que contendrá el objeto OpenLayers.Layer.WMS, luego entre comillas se pone el nombre con el que se mostrará en el LayerSwitcher, a continuación se añade la dirección URL del servicios WMS, y por último el nombre de la capa que se consultará con la petición GetCapabilities. Una vez creada la capa hay que incorporarla al mapa con la función map.addLayer
5.8. Cargar capas Overlays
Las capas overlays a partir de servicios WMS se definen de la siguiente manera:
var Topomil = "http://idecan2.grafcan.es/ServicioWMS/MT1?";
var wmst1000 = new OpenLayers.Layer.WMS("Topografico 1:1000", Topomil, {layers: "WMS_MT1", visibility:true, transparent: true, format: "image/png"});
map.addLayer(wmst1000);
var wmst1000b = new OpenLayers.Layer.WMS("Curvas de Nivel",Topomil,
{layers: "CN", visibility:true, transparent: true, format: "image/png"});
map.addLayer(wmst1000b);
var wmst1000C = new OpenLayers.Layer.WMS("Municipios",Topomil,
{layers: "MUN", visibility:true, transparent: true, format: "image/png"});
map.addLayer(wmst1000C);
var wmst1000d = new OpenLayers.Layer.WMS("Hidrografia",Topomil,
{layers: "HID", visibility:true, transparent: true, format: "image/png"});
map.addLayer(wmst1000d);
En el ejemplo se ha definido una variable Topomil con la dirección del servicio WMS y posteriormente se han añadido 4 capas de ese servicio: el topográfico 1:1000 en conjunto (“WMS_MT1”), las curvas de nivel (“CN”), los municipios (“MUN”) y la hidrografía (“HID”). El nombre con el que aparecerá la capa en el LayerSwitcher se pondrá entre comillas al principio (ejemplo: OpenLayers.Layer.WMS("Topografico 1:1000"). En {Layers: hay que poner entre comillas los nombres de las capas del servicio WMS. Para consultar los nombres de las capas disponibles en un servicio WMS se utiliza la petición GetCapabilities. Además hay que establecer la visibilidad, la transparencia y el formato de la imagen del servicio. Los formatos de imagen disponibles para cada capa se consultarán también con la petición GetCapabilities.
5.9. Nuevos controles de navegación del mapa
Para añadir nuevos controles de navegación en el visor hay que añadir el siguiente código a la definición la proyección del mapa:
controls: [new OpenLayers.Control.PanZoomBar()]
Y para incorporar la herramienta de zoom rectángulo y pan hay que incorporar al final el siguiente código:
map.addControl(new OpenLayers.Control.MouseToolbar());
5.10. Insertar coordenadas de localización del ratón
Para que el visor muestre las coordenadas en las que se localiza el ratón en la esquina inferior derecha de la pantalla se debe agregar el siguiente código:
map.addControl(new OpenLayers.Control.MousePosition());
5.11. Añadir transparencia a las capas
Para añadir transparencia a las capas hay que utilizar el siguiente código:
wmst1000C.setOpacity(0.5);
Hay que indicar el nombre de la capa y después con la función setOpacity y entre paréntesis se indica el nivel de opacidad-transparencia en tantos por 1.
5.12. Activar-Desactivar capas al iniciar OpenLayers
Para que al iniciar el visor aparezcan capas desactivas hay que utilizar el siguiente código:
wmst1000C.setVisibility(false);
Hay que indicar el nombre de la capa y después con la función setVisibility y entre paréntesis se indica false para desactivar la capa.
Todo el código unido quedaría de la siguiente manera:
<html>
<head>
<script src="http://openlayers.org/api/2/OpenLayers.js"></script>
</head>
<body>
<div style="width:100%; height:100%" id="map"></div>
<script defer="defer" type="text/javascript">
var extent = new OpenLayers.Bounds(175000,3055000,230000,3090000);
var options = {projection: "EPSG:32628", units: 'm', maxScale: 1000, minScale: 100000, maxExtent: extent, controls: [new OpenLayers.Control.PanZoomBar()]};
var map = new OpenLayers.Map('map', options);
var wms = new OpenLayers.Layer.WMS( "OrtoExpress",
"http://www.idee.es/wms/PNOA/PNOA?", {layers:'pnoa'} );
map.addLayer(wms);
var Topomil = "http://idecan2.grafcan.es/ServicioWMS/MT1?";
var wmst1000 = new OpenLayers.Layer.WMS("Topografico 1:1000",Topomil,
{layers: "WMS_MT1", visibility:true,
transparent: true, format: "image/png"});
wmst1000.setOpacity(0.5);
wmst1000.setVisibility(false);
map.addLayer(wmst1000);
var wmst1000b = new OpenLayers.Layer.WMS("Curvas de Nivel",Topomil,
{layers: "CN", visibility:true,
transparent: true, format: "image/png"});
map.addLayer(wmst1000b);
var wmst1000C = new OpenLayers.Layer.WMS("Municipios",Topomil,
{layers: "MUN", visibility:true,
transparent: true, format: "image/png"});
wmst1000C.setOpacity(0.5);
wmst1000C.setVisibility(false);
map.addLayer(wmst1000C);
map.zoomToMaxExtent();
5.5. Extensión geográfica del cliente web
Una vez creado el mapa hay que establecer la proyección y extensión geográfica que abarcará el visor web. Para establecer la extensión hay que usar el objeto OpenLayers.Bounds.
var map = new OpenLayers.Map('map', {projection: "EPSG:4326",
maxExtent: new OpenLayers.Bounds(-10, 34, 5, 44)});;
En el ejemplo que se está comentando se ha declarado una variable extent donde se ha definido el objeto OpenLayers.Bounds (en este caso son las coordenadas X e Y mínimas y máximas para la isla de El Hierro) y una variable options donde se ha definido la proyección (“EPSG: 32628” que equivale al huso 28N UTM WGS84), la escala máxima permitida en el visor, la escala mínima a la que se inicia el visor y la máxima extensión la cual llama a la variable extent definida anteriormente.
var extent = new OpenLayers.Bounds(175000,3055000,230000,3090000);
var options = {projection: "EPSG:32628", units: 'm', maxScale: 1000, minScale: 100000, maxExtent: extent, };
La variable options se llama al crear el mapa como se vio anteriormente:
var map = new OpenLayers.Map('map', options);
5.6. Control de capas de información
Para poder controlar la visualización de las capas que se añaden al mapa hay que establecer el LayerSwitcher:
map.addControl(new OpenLayers.Control.LayerSwitcher());
5.7. Cargar una nueva capa base
Para añadir capas al visor y poder ser activadas o desactivadas con el control de capas de información incorporado anteriormente hay que tener en cuenta que OpenLayers distingue dos tipos de capas de información: BaseLayers (capas base http://trac.openlayers.org/wiki/BaseLayer) y Overlays (capas superpuesta http://trac.openlayers.org/wiki/Overlay). Las capas BaseLayers se seleccionarán con radio-buttons, por lo que serán excluyentes entre sí, mientras que las capas Overlays se seleccionarán mediante checkboxes, por lo que podrán superponerse distintas capas de información para su visualización conjunta.
Las capas base a partir de servicios WMS se definen de la siguiente manera:
var wms = new OpenLayers.Layer.WMS( "OrtoExpress",
"http://www.idee.es/wms/PNOA/PNOA?", {layers:'pnoa'} );
map.addLayer(wms);
Primero se define la variable que contendrá el objeto OpenLayers.Layer.WMS, luego entre comillas se pone el nombre con el que se mostrará en el LayerSwitcher, a continuación se añade la dirección URL del servicios WMS, y por último el nombre de la capa que se consultará con la petición GetCapabilities. Una vez creada la capa hay que incorporarla al mapa con la función map.addLayer
5.8. Cargar capas Overlays
Las capas overlays a partir de servicios WMS se definen de la siguiente manera:
var Topomil = "http://idecan2.grafcan.es/ServicioWMS/MT1?";
var wmst1000 = new OpenLayers.Layer.WMS("Topografico 1:1000", Topomil, {layers: "WMS_MT1", visibility:true, transparent: true, format: "image/png"});
map.addLayer(wmst1000);
var wmst1000b = new OpenLayers.Layer.WMS("Curvas de Nivel",Topomil,
{layers: "CN", visibility:true, transparent: true, format: "image/png"});
map.addLayer(wmst1000b);
var wmst1000C = new OpenLayers.Layer.WMS("Municipios",Topomil,
{layers: "MUN", visibility:true, transparent: true, format: "image/png"});
map.addLayer(wmst1000C);
var wmst1000d = new OpenLayers.Layer.WMS("Hidrografia",Topomil,
{layers: "HID", visibility:true, transparent: true, format: "image/png"});
map.addLayer(wmst1000d);
En el ejemplo se ha definido una variable Topomil con la dirección del servicio WMS y posteriormente se han añadido 4 capas de ese servicio: el topográfico 1:1000 en conjunto (“WMS_MT1”), las curvas de nivel (“CN”), los municipios (“MUN”) y la hidrografía (“HID”). El nombre con el que aparecerá la capa en el LayerSwitcher se pondrá entre comillas al principio (ejemplo: OpenLayers.Layer.WMS("Topografico 1:1000"). En {Layers: hay que poner entre comillas los nombres de las capas del servicio WMS. Para consultar los nombres de las capas disponibles en un servicio WMS se utiliza la petición GetCapabilities. Además hay que establecer la visibilidad, la transparencia y el formato de la imagen del servicio. Los formatos de imagen disponibles para cada capa se consultarán también con la petición GetCapabilities.
5.9. Nuevos controles de navegación del mapa
Para añadir nuevos controles de navegación en el visor hay que añadir el siguiente código a la definición la proyección del mapa:
controls: [new OpenLayers.Control.PanZoomBar()]
Y para incorporar la herramienta de zoom rectángulo y pan hay que incorporar al final el siguiente código:
map.addControl(new OpenLayers.Control.MouseToolbar());
5.10. Insertar coordenadas de localización del ratón
Para que el visor muestre las coordenadas en las que se localiza el ratón en la esquina inferior derecha de la pantalla se debe agregar el siguiente código:
map.addControl(new OpenLayers.Control.MousePosition());
5.11. Añadir transparencia a las capas
Para añadir transparencia a las capas hay que utilizar el siguiente código:
wmst1000C.setOpacity(0.5);
Hay que indicar el nombre de la capa y después con la función setOpacity y entre paréntesis se indica el nivel de opacidad-transparencia en tantos por 1.
5.12. Activar-Desactivar capas al iniciar OpenLayers
Para que al iniciar el visor aparezcan capas desactivas hay que utilizar el siguiente código:
wmst1000C.setVisibility(false);
Hay que indicar el nombre de la capa y después con la función setVisibility y entre paréntesis se indica false para desactivar la capa.
Todo el código unido quedaría de la siguiente manera:
<html>
<head>
<script src="http://openlayers.org/api/2/OpenLayers.js"></script>
</head>
<body>
<div style="width:100%; height:100%" id="map"></div>
<script defer="defer" type="text/javascript">
var extent = new OpenLayers.Bounds(175000,3055000,230000,3090000);
var options = {projection: "EPSG:32628", units: 'm', maxScale: 1000, minScale: 100000, maxExtent: extent, controls: [new OpenLayers.Control.PanZoomBar()]};
var map = new OpenLayers.Map('map', options);
var wms = new OpenLayers.Layer.WMS( "OrtoExpress",
"http://www.idee.es/wms/PNOA/PNOA?", {layers:'pnoa'} );
map.addLayer(wms);
var Topomil = "http://idecan2.grafcan.es/ServicioWMS/MT1?";
var wmst1000 = new OpenLayers.Layer.WMS("Topografico 1:1000",Topomil,
{layers: "WMS_MT1", visibility:true,
transparent: true, format: "image/png"});
wmst1000.setOpacity(0.5);
wmst1000.setVisibility(false);
map.addLayer(wmst1000);
var wmst1000b = new OpenLayers.Layer.WMS("Curvas de Nivel",Topomil,
{layers: "CN", visibility:true,
transparent: true, format: "image/png"});
map.addLayer(wmst1000b);
var wmst1000C = new OpenLayers.Layer.WMS("Municipios",Topomil,
{layers: "MUN", visibility:true,
transparent: true, format: "image/png"});
wmst1000C.setOpacity(0.5);
wmst1000C.setVisibility(false);
map.addLayer(wmst1000C);
var wmst1000d = new OpenLayers.Layer.WMS("Hidrografia",Topomil,
{layers: "HID", visibility:true,
transparent: true, format: "image/png"});
map.addLayer(wmst1000d);
map.zoomToMaxExtent();
map.addControl(new OpenLayers.Control.OverviewMap());
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MouseToolbar());
map.addControl(new OpenLayers.Control.MousePosition());
map. addControl(new OpenLayers.Control.ScaleLine());
</script>
</body>
</html>
{layers: "HID", visibility:true,
transparent: true, format: "image/png"});
map.addLayer(wmst1000d);
map.zoomToMaxExtent();
map.addControl(new OpenLayers.Control.OverviewMap());
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MouseToolbar());
map.addControl(new OpenLayers.Control.MousePosition());
map. addControl(new OpenLayers.Control.ScaleLine());
</script>
</body>
</html>
Ver resultado