Difference between revisions of "WMS base con MS4W y Openlayers"

From OSGeo
Jump to navigation Jump to search
 
Line 1: Line 1:
−
Nota:
+
#REDIRECT [[Openlayers: configuración mínima con biblioteca en remoto]]
−
 
 
−
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''' [http://openlayers.org 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
 
−
**http://localhost:9000/cgi-bin/mapserv.exe?map=/ms4w/apps/mapserv-demo/itasca.map
 
−
* 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:
 
−
<code>
 
−
<pre>
 
−
<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>
 
−
</pre>
 
−
</code>
 
−
 
 
−
===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:
 
−
 
 
−
* http://localhost:9000/mapserv-demo/ol.html
 
−
 
 
−
este es el resultado:
 
−
[[Image:Openlayers itasca base map.jpg|thumb|none|400x400px|la primera vista del mapa creado por Openlayers en la pagina web]]
 
−
 
 
−
===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).
 
−
<code>
 
−
    <style type="text/css">
 
−
        #map {
 
−
            <span style='background-color:yellow'>width: 512px;</span>
 
−
            <span style='background-color:yellow'>height: 512px;</span>
 
−
            <span style='background-color:yellow'>border: 1px solid black;</span>
 
−
        }
 
−
    </style>
 
−
 
 
−
</code>
 
−
 
 
−
====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.
 
−
<code>
 
−
    <span style='background-color:yellow'><script src="http://www.openlayers.org/api/OpenLayers.js"></script></span>
 
−
</code>
 
−
 
 
−
====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.
 
−
<code>
 
−
    <script type="text/javascript">
 
−
       
 
−
        <span style='background-color:yellow'>var map, layer;</span>
 
−
</code>
 
−
se define la funcion de inicializacion que llamamos ''init''.
 
−
<code>
 
−
        function init(){
 
−
</code>
 
−
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).
 
−
<code>
 
−
            map = new OpenLayers.Map( 'map',{
 
−
<span style='background-color:yellow'>maxExtent: new OpenLayers.Bounds(378107,5193120,510896,5320243),</span>
 
−
<span style='background-color:yellow'>maxResolution: 'auto',</span>
 
−
<span style='background-color:yellow'>units: "m",</span>
 
−
<span style='background-color:yellow'>projection: "EPSG:26915"</span>}
 
−
);
 
−
</code>
 
−
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).
 
−
<code>           
 
−
            <span style='background-color:yellow'>layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",</span>
 
−
                    <span style='background-color:yellow'>"http://localhost:9000/cgi-bin/mapserv.exe?map=/ms4w/apps/mapserv-demo/itasca.map", {layers: 'drgs'} );</span>
 
−
</code>
 
−
añadimos el objecto ''layer'' al objecto ''map''.
 
−
<code>                   
 
−
            <span style='background-color:yellow'>map.addLayers([layer]);</span>
 
−
</code>
 
−
una vez que todos los objectos esten definidos podemos pedir al mapa de centrarse para la visualización al usuario final.
 
−
<code>
 
−
            <span style='background-color:yellow'>map.zoomToMaxExtent();</span>
 
−
        }
 
−
    </script>
 
−
</code>
 
−
 
 
−
====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''.
 
−
<code>
 
−
  <span style='background-color:yellow'><body onload="init()"></span>
 
−
</code>
 
−
 
 
−
====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.
 
−
<code> 
 
−
    <span style='background-color:yellow'><pre><div id="map"></div></pre></span>
 
−
</code>
 
−
=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.
 
−
* http://dev.openlayers.org/releases/OpenLayers-2.6/doc/apidocs/files/OpenLayers-js.html
 
−
==LayerSwitcher==
 
−
==NavToolbar==
 
−
==OverviewMap==
 
−
==NavToolbar==
 
−
==Permalink==
 
−
 
 
−
=Autores=
 
−
* [[User:ominiverdi| Lorenzo Becchi]]
 
−
* [[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:Education]]
 
−
[[Category:Cursos]]
 

Latest revision as of 04:12, 16 October 2008

Redirect to:

Retrieved from "http://wiki.osgeo.org/w/index.php?title=WMS_base_con_MS4W_y_Openlayers&oldid=31025"