Difference between revisions of "Openlayers: las herramientas disponibles por defecto"
| Line 43: | Line 43: | ||
una vez guardado estará disponible en el servidor local con este enlace <ref>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</ref>: | una vez guardado estará disponible en el servidor local con este enlace <ref>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</ref>: | ||
| − | http://localhost:9000/mapserv-demo/ol_controls.html | + | *http://localhost:9000/mapserv-demo/ol_controls.html |
==el código== | ==el código== | ||
Revision as of 10:59, 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].
LayerSwitcher
poner imagen LayerSwitcher
poner imagen NavToolbar
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.
poner imagen OverviewMap
poner imagen NavToolbar
Permalink
poner imagen Permalink
la API
Los Objectos el 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.
poner imagen API
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
Autores
Referencias
- ↑ Interfaz de programación de aplicaciones. Definición: http://es.wikipedia.org/wiki/API
- ↑ Interfaz gráfica de usuario. Definición: http://es.wikipedia.org/wiki/GUI
- ↑ Página oficial de ejemplo sobre los Controls. http://openlayers.org/dev/examples/controls.html
- ↑ 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
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