Revision as of 06:57, 16 September 2008

Nota:

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

Objectivos

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.

WMS base con MS4W y Openlayers

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.

la primera mapa en la web

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:

 <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();
            map.addControl( new OpenLayers.Control.LayerSwitcher() );
        }
    </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:

http://localhost:9000/mapserv-demo/ol.html

este es el resultado:

la primera vista del mapa creado por Openlayers en la pagina web

Todo lo que hay que notar en nuestro codigo

   <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();
           map.addControl( new OpenLayers.Control.LayerSwitcher() );
       }
   </script>
  </head>
  <body onload="init()">

        Ejemplo de WMS

         El uso basico de Openlayers con un layer WMS

        mas texto aquì

  </body>
 </html>

Autores

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