Difference between revisions of "Openlayers: las herramientas disponibles por defecto"

From OSGeo
Jump to navigation Jump to search
Line 34: Line 34:
 
==MousePosition==
 
==MousePosition==
 
[[Image:Openlayers control MousePosition.png|thumb|none|400px|El Control de Openlayers para enseñar las coordenadas actuales del cursor sobre el mapa]]
 
[[Image:Openlayers control MousePosition.png|thumb|none|400px|El Control de Openlayers para enseñar las coordenadas actuales del cursor sobre el mapa]]
 +
 +
 +
== Presentación alternativa ==
 +
{| class="wikitable"
 +
!Control !! Descripción
 +
|-
 +
| [[Image:Openlayers control layerswitcher.png]]
 +
| El Control para la gestion de la visibilidad de capas en Openlayers
 +
|-
 +
| [[Image:Openlayers control pan.png|center]]
 +
| El Control para la navegación en Openlayers
 +
|-
 +
| [[Image:Openlayers control zoom.png|center]]
 +
| El Control para los niveles de zoom en Openlayers
 +
|-
 +
| [[Image:Openlayers control OverviewMap.png|center]]
 +
| El Control para la vision general del mapa en Openlayers
 +
|-
 +
| [[Image:Openlayers control Permalink.png|center]]
 +
| El Control guardar el enlace (permalink) al mapa en Openlayers
 +
|-
 +
| [[Image:Openlayers control MouseToolbar.png|center]]
 +
| El Control de Openlayers para cambiar entre navegación y zoom con el ratón
 +
|-
 +
| [[Image:Openlayers control ScaleLine.png|center]]
 +
| El Control para eseñar la escala corriente en Openlayers
 +
|-
 +
| [[Image:Openlayers control MousePosition.png|center]]
 +
| El Control de Openlayers para enseñar las coordenadas actuales del cursor sobre el mapa
 +
|}
  
 
=la API=
 
=la API=

Revision as of 12:49, 23 January 2009

Nota: 

EN: THIS IS STILL A DRAFT 
ES: SIGUE SIENDO UN BORRADOR

Openlayers: las herramientas disponibles por defecto

Aquí presentamos las herramientas mas importantes que Openlayers nos ofrece.

OpenLayers es principalmente una API [1], una biblioteca de funciones, para manejar la navegación de mapas en la web y como tal no esta pensada para ofrecer una GUI [2]. Sin embargo nos proporciona también una cuantos objectos muy útiles para la interacción del usuario con el mapa[3].


Una vista de todos los principale Controls de Openlayers


LayerSwitcher

El Control para la gestion de la visibilidad de capas en Openlayers

PanZoomBar

El Control para la navegación en Openlayers
El Control para los niveles de zoom en Openlayers

OverviewMap

Create an overview map to display the extent of your main map and provide additional navigation control. Create a new overview map with the OpenLayers.Control.OverviewMap constructor.

El Control para la vision general del mapa en Openlayers

Permalink

El Control guardar el enlace (permalink) al mapa en Openlayers

MouseToolbar

El Control de Openlayers para cambiar entre navegación y zoom con el ratón

ScaleLine

El Control para eseñar la escala corriente en Openlayers

MousePosition

El Control de Openlayers para enseñar las coordenadas actuales del cursor sobre el mapa


Presentación alternativa

Control Descripción
Openlayers control layerswitcher.png El Control para la gestion de la visibilidad de capas en Openlayers
Openlayers control pan.png
 El Control para la navegación en Openlayers
Openlayers control zoom.png
 El Control para los niveles de zoom en Openlayers
Openlayers control OverviewMap.png
 El Control para la vision general del mapa en Openlayers
Openlayers control Permalink.png
 El Control guardar el enlace (permalink) al mapa en Openlayers
Openlayers control MouseToolbar.png
 El Control de Openlayers para cambiar entre navegación y zoom con el ratón
Openlayers control ScaleLine.png
 El Control para eseñar la escala corriente en Openlayers
Openlayers control MousePosition.png
 El Control de Openlayers para enseñar las coordenadas actuales del cursor sobre el mapa

la API

Los Objectos de la biblioteca de Openlayers están bien descritos, en inglés, en la documentación el linea disponible en el sitio web:

Por cada clase hay una descripción detallada y se ofrece el listado de los atributos y funciones. Quien esta mas confiado con el código en general y el Javascript en especifico encontrará muy fácil desarrollar aplicaciones de mapas en la web que utilicen esta biblioteca.


La pagina web de la API di Openlayers

Ejemplo en código

En el código que sigue tenemos un ejemplo sencillo de como se pueden integrar facilmente todos los Controls descriptos antes.

Lo podemos copiar y guardar en un fichero con recorrido: 

C:\ms4w\apps\mapserv-demo\ol_controls.html

una vez guardado estará disponible en el servidor local con este enlace [4]:

el código

 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
         <title>Ejemplo de utilizo de los Controls de Openlayers</title>
 
 	<style type="text/css">
         #map {
             width: 512px;
             height: 412px;
             border: 1px solid black;
         }
         #permalink{
             position:absolute;
             margin-left:522px;
         }
     </style>
     <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
 
 	<script type="text/javascript">
 		var map;
 		function init(){
 			map = new OpenLayers.Map('map', {
 				controls: [
 					new OpenLayers.Control.PanZoomBar(),
 					new OpenLayers.Control.MouseToolbar(),
 					new OpenLayers.Control.LayerSwitcher({'ascending':false}),
 					new OpenLayers.Control.ScaleLine(),
 					new OpenLayers.Control.Permalink('permalink'),
 					new OpenLayers.Control.MousePosition(),
 					new OpenLayers.Control.OverviewMap(),
 					new OpenLayers.Control.KeyboardDefaults()
 				],
 				numZoomLevels: 6
 				
 			});
 
 
 			var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
 				"http://labs.metacarta.com/wms/vmap0",
 				{layers: 'basic'} );
 			var jpl_wms = new OpenLayers.Layer.WMS( "NASA Global Mosaic",
 				"http://t1.hypercube.telascience.org/cgi-bin/landsat7", 
 				{layers: "landsat7"});
 			var dm_wms = new OpenLayers.Layer.WMS( "DM Solutions Demo",
 				"http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
 				{layers: "bathymetry,land_fn,park,drain_fn,drainage," +
 						 "prov_bound,fedlimit,rail,road,popplace",
 				 transparent: "true", format: "image/png" });
 
 			jpl_wms.setVisibility(false);
 			dm_wms.setVisibility(false);
 
 			map.addLayers([ol_wms, jpl_wms, dm_wms]);
 			if (!map.getCenter()) map.zoomToMaxExtent();
 		}
 	</script>
 
    </head>
    <body onload="init()">
        <h1>Ejemplo de utilizo de los Controls de Openlayers</h1>
 
        <p>
            Añadir zoom, navegación, layer switcher, overview map y enlaces 
            permalink a la mapa de  Openlayers.
        </p> 
         <a href="" id="permalink">Permalink</a>
         <div id="map"></div>
     </body>
 </html>

comentarios

el objecto mapa

En la creación del objecto mapa se añaden el parámetro de los Controls ("controls") y su valor es un array [5] que contiene todos los Controls que hemos visto antes. 

                       map = new OpenLayers.Map('map', {
				controls: [
					new OpenLayers.Control.PanZoomBar(),
					new OpenLayers.Control.MouseToolbar(),
					new OpenLayers.Control.LayerSwitcher({'ascending':false}),
					new OpenLayers.Control.ScaleLine(),
					new OpenLayers.Control.Permalink('permalink'),
					new OpenLayers.Control.MousePosition(),
					new OpenLayers.Control.OverviewMap(),
					new OpenLayers.Control.KeyboardDefaults()
				],
				numZoomLevels: 6
				
			});

En este caso solo los Controls LayerSwitcher y Permalink tienen atributos pero mirando la API nos podemos enterar de todas las funciones que cada uno de estos objectos tienen y que podemos utilizar para personalizar nuestra web.

Autores

Referencias

  1. ↑ Interfaz de programación de aplicaciones. Definición: http://es.wikipedia.org/wiki/API
  2. ↑ Interfaz gráfica de usuario. Definición: http://es.wikipedia.org/wiki/GUI
  3. ↑ Página oficial de ejemplo sobre los Controls. http://openlayers.org/dev/examples/controls.html
  4. ↑ Si habéis seguido las indicaciones de las lecciones publicadas en http://wiki.osgeo.org/wiki/Instalaci%C3%B3n_y_manejo_de_servicios_OWS_con_UMN_Mapserver_y_Openlayers
  5. ↑ Definición de Array. http://es.wikipedia.org/wiki/Array

Licencia

  • la licencia por este articulo es: Creative Commons Attribution 3.0 License (http://creativecommons.org/licenses/by/3.0/deed.es).
  • esta licencia permite:
    • copiar, distribuir y comunicar públicamente la obra
    • hacer obras derivadas
  • bajo estas condiciones:
    • Reconocimiento. Debe reconocer los créditos de la obra de la manera especificada por el autor o el licenciador (pero no de una manera que sugiera que tiene su apoyo o apoyan el uso que hace de su obra).
    • Al reutilizar o distribuir la obra, tiene que dejar bien claro los términos de la licencia de esta obra.
    • Alguna de estas condiciones puede no aplicarse si se obtiene el permiso del titular de los derechos de autor
    • Nada en esta licencia menoscaba o restringe los derechos morales del autor.

Duración

Por esta clase se evalúa una duración de X oras

Retrieved from "http://wiki.osgeo.org/w/index.php?title=Openlayers:_las_herramientas_disponibles_por_defecto&oldid=34551"