Difference between revisions of "WMS base con MS4W y Openlayers"
| Line 184: | Line 184: | ||
* [[User:jsanz| Jorge Gaspar Sanz Salinas]] | * [[User:jsanz| Jorge Gaspar Sanz Salinas]] | ||
| − | + | =Licencia= | |
| + | ... | ||
| + | =Duración= | ||
| + | Por esta clase se evalúa una duración de X oras | ||
[[Category:Español]] | [[Category:Español]] | ||
[[Category:Education]] | [[Category:Education]] | ||
[[Category:Cursos]] | [[Category:Cursos]] | ||
Revision as of 05:11, 27 September 2008
Nota:
EN: THIS IS STILL A DRAFT ES: SIGUE SIENDO UN BORRADOR
WMS base con MS4W y Openlayers
El objetivo de esta clase es acercar el usuario común al utilizo de los estándares OGC en un contesto de web mapping utilizando solamente software libre.
una vez que MS4W ha sido instalado y el juego de datos Itasca ha sido añadido, se puede utilizar el servidor WMS para recibir las capas de sus mapas.
Existe un gran variedad de clientes WMS sea que se quiera utilizar clientes pesados, para el Desktop, que clientes livianos, para la Web.
Unos de los client FOSS (Free and Open Source Software) mas apreciado es sin duda OpenLayers Openlayers.org.
Openlayers y su utilización mas sencilla
considerando la configuración de los mapas Itasca lo que necesitamos para crear nuestra primera mapa web son estos datos:
- la direccion del servidor WMS
- el nombre de la capa que queremos visualizar
- drgs
- la proyection de nuestra mapa
- EPSG:26915
- el extent de nuestro mapa (min x, min y, max x, max y)
- 378107 5193120 510896 5320243
- la unidad de medidas
- metros
codigo de ejemplo
para crear la pagina web necesitamos crear un nuevo fichero con un editor de texto sencillo. este fichero lo llamaremos:
C:\ms4w\apps\mapserv-demo\ol.html
luego hay que poner el siguiente texto en ella:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#map {
width: 512px;
height: 512px;
border: 1px solid black;
}
</style>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
var map, layer;
function init(){
map = new OpenLayers.Map( 'map',{
maxExtent: new OpenLayers.Bounds(378107,5193120,510896,5320243),
maxResolution: 'auto',
units: "m",
projection: "EPSG:26915"}
);
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://localhost:9000/cgi-bin/mapserv.exe?map=/ms4w/apps/mapserv-demo/itasca.map", {layers: 'drgs'} );
map.addLayers([layer]);
map.zoomToMaxExtent();
}
</script>
</head>
<body onload="init()">
<b>Ejemplo de WMS</b>
<div>
El uso basico de Openlayers con un layer WMS
</div>
<div id="map"></div>
<div id="docs">
mas texto aquì
</div>
</body>
</html>
comprobar la pagina web con el mapa
una vez guardada la pagina web con el codigo añadido podemos comprobar con nuestro browser web (ex: Mozilla Firefox, Internet Explorer, ecc.) si la pagina responde como nos esperamos:
este es el resultado:
Todo lo que hay que notar en nuestro codigo
El codigo que hemos utilizado es de verdad muy poco pero hay que estar muy atentos a que lo que escriba sea exacto y tenga sentido.
el estilo CSS
El minimo de estilo CSS que necesitamos es para posicionar el marco del mapa. A este DIV se le da el ID de MAP.
Los elementos importantes son el alto (width) y el ancho (height).
<style type="text/css">
#map {
width: 512px;
height: 512px;
border: 1px solid black;
}
</style>
la biblioteca Javascript de Openlayers
para que se pueda crear la mapa es indispensable la biblioteca de codigo de Openlayers que se puede utilizar en varias maneras.
La mas comoda, por el comienzo, es utilizar su versión publicada online.
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
el código Javascript personalizado
para definir nuestro mapa especifico tenemos que dar unas indicaciones a Openlayers, como que mapa utilizar y como enseñarla.
se crean las dos variable de mapa y de layer.
<script type="text/javascript">
var map, layer;
se define la funcion de inicializacion que llamamos init.
function init(){
se instancia el objecto map como un OpenLayers.Map y como parametros le pasamos el nombre del DIV donde hay que mostrar el mapa (map) y los parámetros de contexto de nuestra mapa (extent, unidades, proyección).
map = new OpenLayers.Map( 'map',{
maxExtent: new OpenLayers.Bounds(378107,5193120,510896,5320243),
maxResolution: 'auto',
units: "m",
projection: "EPSG:26915"}
);
se instancia un objecto layer como un OpenLayers.Layer.WMS. Se trata de nuestra capa WMS y por eso, como parametros, le pasamos layers: 'drgs' y e la direccion del servidor WMS (http://localhost:9000/cgi-bin/mapserv.exe?map=/ms4w/apps/mapserv-demo/itasca.map).
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://localhost:9000/cgi-bin/mapserv.exe?map=/ms4w/apps/mapserv-demo/itasca.map", {layers: 'drgs'} );
añadimos el objecto layer al objecto map.
map.addLayers([layer]);
una vez que todos los objectos esten definidos podemos pedir al mapa de centrarse para la visualización al usuario final.
map.zoomToMaxExtent();
}
</script>
la llamada de aranque
para que el código Javascript que hemos escrito se active al cargar de la pagina web hay que darle este comando al tag BODY.
En practica significa que una vez que ha cargado el codigo HTML el browser tiene que ejecutar la función javascript init.
<body onload="init()">
el DIV del mapa
en el poco codigo HTML que hemos puesto en este ejemplo hay solo un elemento que es fundamental: el DIV del mapa.
Como su ID es map, tendrá el estilo que hemos definido en el CSS.
<div id="map"></div>
configuración en local de Openlayers
descarga del fichero
crear el fichero comprimido
preparar el mapa
herramientas en bundle con Openlayers
presentamos las herramientas mas importantes Openlayers nos ofrece.
LayerSwitcher
OverviewMap
Permalink
Autores
Licencia
...
Duración
Por esta clase se evalúa una duración de X oras