Difference between revisions of "Openlayers: configuración mínima con biblioteca en remoto"

From OSGeo
Jump to navigation Jump to search
m
 
(5 intermediate revisions by one other user not shown)
Line 1: Line 1:
−
Nota:
 
−
 
−
EN: THIS IS STILL A DRAFT
 
−
ES: SIGUE SIENDO UN BORRADOR
 
−
 
  
 
=Openlayers: configuración mínima con biblioteca en remoto=
 
=Openlayers: configuración mínima con biblioteca en remoto=
Line 77: Line 72:
 
</code>
 
</code>
  
−
===comprobar la pagina web con el mapa===
+
===comprobar la página 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:
+
una vez guardada la página web con el código añadido podemos comprobar con nuestro browser web (ex: Mozilla Firefox, Internet Explorer, ecc.) si la página responde como esperamos:
  
 
* http://localhost:9000/mapserv-demo/ol.html
 
* http://localhost:9000/mapserv-demo/ol.html
Line 85: Line 80:
 
[[Image:Openlayers itasca base map.jpg|thumb|none|400x400px|la primera vista del mapa creado por Openlayers en la pagina web]]
 
[[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===
+
===Todo lo que hay que notar en nuestro código===
−
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 código que hemos utilizado es de verdad muy poco pero hay que estar muy atentos a que lo que se escriba sea exacto y tenga sentido.
 
====el estilo CSS====
 
====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''.
+
El mínimo 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).
 
Los elementos importantes son el alto (width) y el ancho (height).
 
<code>
 
<code>
Line 102: Line 97:
  
 
====la biblioteca Javascript de Openlayers====
 
====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.
+
para que se pueda crear el mapa es indispensable la biblioteca de código de Openlayers que se puede utilizar de varias maneras.
−
La mas comoda, por el comienzo, es utilizar su versión publicada online.  
+
La mas cómoda, para comenzar, es utilizar su versión publicada online.  
 
<code>
 
<code>
 
     <span style='background-color:yellow'><script src="http://www.openlayers.org/api/OpenLayers.js"></script></span>
 
     <span style='background-color:yellow'><script src="http://www.openlayers.org/api/OpenLayers.js"></script></span>
Line 109: Line 104:
  
 
====el código Javascript personalizado====
 
====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.
+
para definir nuestro mapa especifico tenemos que dar unas indicaciones a Openlayers, como qué mapa utilizar y cómo enseñarlo.
  
 
se crean las dos variable de mapa y de layer.
 
se crean las dos variable de mapa y de layer.
Line 117: Line 112:
 
         <span style='background-color:yellow'>var map, layer;</span>
 
         <span style='background-color:yellow'>var map, layer;</span>
 
</code>
 
</code>
−
se define la funcion de inicializacion que llamamos ''init''.
+
se define la función de inicialización que llamamos ''init''.
 
<code>
 
<code>
 
         function init(){
 
         function init(){
 
</code>
 
</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).
+
se instancia el objecto ''map'' como un ''OpenLayers.Map'' y como parámetros le pasamos el nombre del DIV donde hay que mostrar el mapa (''map'') y los parámetros de contexto de nuestro mapa (extent, unidades, proyección).
 
<code>
 
<code>
 
             map = new OpenLayers.Map( 'map',{
 
             map = new OpenLayers.Map( 'map',{
Line 130: Line 125:
 
  );
 
  );
 
</code>
 
</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).
+
se instancia un objecto ''layer'' como un ''OpenLayers.Layer.WMS''. Se trata de nuestra capa WMS y por eso, como parámetros, le pasamos ''layers: 'drgs''' y es la dirección del servidor WMS (http://localhost:9000/cgi-bin/mapserv.exe?map=/ms4w/apps/mapserv-demo/itasca.map).
 
<code>             
 
<code>             
 
             <span style='background-color:yellow'>layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",</span>
 
             <span style='background-color:yellow'>layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",</span>
Line 146: Line 141:
 
</code>
 
</code>
  
−
====la llamada de aranque====
+
====la llamada de arranque====
−
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''.
+
para que el código Javascript que hemos escrito se active al cargar de la página 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''.
+
En práctica significa que una vez que ha cargado el código HTML el browser tiene que ejecutar la función javascript ''init''.
 
<code>
 
<code>
 
   <span style='background-color:yellow'><body onload="init()"></span>
 
   <span style='background-color:yellow'><body onload="init()"></span>
Line 154: Line 149:
  
 
====el DIV del mapa====
 
====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.
+
en el poco código 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.
 
Como su ID es ''map'', tendrá el estilo que hemos definido en el CSS.
 
<code>   
 
<code>   

Latest revision as of 14:57, 20 April 2009

Openlayers: configuración mínima con biblioteca en remoto

considerando la configuración de los mapas Itasca lo que necesitamos para crear nuestra primera mapa web son estos datos:

código de ejemplo

para crear la página 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 página web con el mapa

una vez guardada la página web con el código añadido podemos comprobar con nuestro browser web (ex: Mozilla Firefox, Internet Explorer, ecc.) si la página responde como esperamos:

este es el resultado:

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

Todo lo que hay que notar en nuestro código

El código que hemos utilizado es de verdad muy poco pero hay que estar muy atentos a que lo que se escriba sea exacto y tenga sentido.

el estilo CSS

El mínimo 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 el mapa es indispensable la biblioteca de código de Openlayers que se puede utilizar de varias maneras. La mas cómoda, para comenzar, 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 qué mapa utilizar y cómo enseñarlo.

se crean las dos variable de mapa y de layer. 

   <script type="text/javascript">
       
       var map, layer;

se define la función de inicialización que llamamos init. 

       function init(){

se instancia el objecto map como un OpenLayers.Map y como parámetros le pasamos el nombre del DIV donde hay que mostrar el mapa (map) y los parámetros de contexto de nuestro 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 parámetros, le pasamos layers: 'drgs' y es la dirección 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 arranque

para que el código Javascript que hemos escrito se active al cargar de la página web hay que darle este comando al tag BODY. En práctica significa que una vez que ha cargado el código HTML el browser tiene que ejecutar la función javascript init. 

  <body onload="init()">

el DIV del mapa

en el poco código 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>

Autores

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

Retrieved from "http://wiki.osgeo.org/w/index.php?title=Openlayers:_configuración_mínima_con_biblioteca_en_remoto&oldid=37957"