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

From OSGeo
Jump to navigation Jump to search
 
(17 intermediate revisions by the same user not shown)
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
 
−
 
 
−
=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''' [http://openlayers.org 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:
 
−
<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();
 
−
            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>
 
−
</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.
 
−
 
 
−
<code>
 
−
    <script type="text/javascript">
 
−
       
 
−
        <span style='background-color:yellow'>var map, layer;</span>
 
−
 
 
−
        function init(){
 
−
            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>
 
−
);
 
−
           
 
−
            <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>
 
−
                   
 
−
            <span style='background-color:yellow'>map.addLayers([layer]);</span>
 
−
 
−
            <span style='background-color:yellow'>map.zoomToMaxExtent();</span>
 
−
        }
 
−
    </script>
 
−
</code>
 
−
 
 
−
====la llamada de arenque====
 
−
<code>
 
−
  <span style='background-color:yellow'><body onload="init()"></span>
 
−
</code>
 
−
 
 
−
====el DIV del mapa====
 
−
<code> 
 
−
    <span style='background-color:yellow'><div id="map"></div></span>
 
−
 
 
−
</code>
 
−
 
 
−
=Autores=
 
−
* [[User:ominiverdi| Lorenzo Becchi]]
 
−
* [[User:jsanz| Jorge Gaspar Sanz Salinas]]
 
−
 
 
−
 
 
−
 
 
−
[[Category:Español]]
 
−
[[Category:Education]]
 
−
[[Category:Cursos]]
 

Latest revision as of 03:12, 16 October 2008

Redirect to:

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