Empezando con OpenLayers

[Visto: 26558 veces]

OpenLayers es la librería para visualización de mapas via web por excelencia. Consiste en una API javascript con objetos que permiten manejar todo tipo de capas (kml, geoJSON, wms,etc), trabajar con eventos (hacer click en el mapa) y hasta poner marcadores y popups entre muchas otras cosas.

Para empezar con OpenLayers los siguientes links son de mucha utilidad:

http://openlayers.org/ Página principal de OpenLayers
http://www.linux.com/archive/feature/154814 Ejemplos básicos (aparte de los ejemplos de la página principal)
http://workshops.opengeo.org/openlayers-intro/ Workshop para iniciar en OpenLayers
http://wiki.osgeo.org/wiki/Openlayers:_las_herramientas_disponibles_por_defecto Descripción en español de las herramientas que vienen en la API de OpenLayers

Para descargar el código completo seguir el enlace: Demo de OpenLayersA continuación haré una descripción de un código fuente para entender las distintas partes de un código básico en OpenLayers. El código ha sido tomado de linux.com aunque lo he editado para poder resaltar ciertos puntos que he ido aprendiendo con la investigación y la experiencia.

1. HTML base

<html>
<head>
<title>OpenLayers tutorial</title>
</head>

<body>
<div id="map"></div>
</body>

</html>

Este HTML es simplemente una página con un div en donde se insertará el mapa.

2. Estilos

<style type="text/css">
#map {
width: 500px;
height: 250px;
border: 1px solid black;
}

div.olControlMousePosition {
font-family: Times;
font-size: 0.75em;
color: red;
}

div.olControlScaleLine {
font-family: Times;
font-size: 0.75em;
color: red;
}
</style>

Se aplican estilos al código. Las clases que comienzan con “ol” son estilos aplicados a objetos de OpenLayers y sirven para ilustrar que es posible personalizar su apariencia. Sin embargo, la parte mas importante de los estilos es definir el tamaño del mapa y un borde.

El tamaño definido es necesario por dos razones: la primera es que el mapa en si no maneja dimensiones de su representación por lo que sin un tamaño no se verá y la segunda es para poder trabajar con resolución automática (se explica mas adelante) si se desea.

El borde no es necesario pero lo sugiero debido a que es más fácil para los usuarios ver un borde que defina lo que es un mapa y lo que no lo es, sobre todo cuando el fondo de la página y del mapa son el mismo color.

3. Llamar a OpenLayers API

<script src="http://openlayers.org/api/OpenLayers.js"></script>

Se agrega una referencia a la API de OpenLayers. Esta referencia no tiene que ser necesariamente la última versión ofrecida por la página (“hosted version”) sino que se puede descargar y usar en el servidor propio. Después de todo, la API es simplemente un archivo .js (versión unida) o un conjunto de ellos (versión “multiarchivo”).

Además, cabe mencionar que se pueden crear versiones especiales de la API restringida de clases que no sean necesarias con el fin de hacer mas ligera la carga de datos. Mas detalle puede ser encontrado en este post.

4. El código javascript

4.1 onLoad

window.onload=init;
function init(){
...
}

o

<body onload="init()">

Es importante primero mencionar que el código se utiliza en el evento onload debido a que el javascript hace referencia a objetos del HTML (div del mapa y otros posibles elementos), por lo que si se utilizara antes de terminar de cargar correctamente la página, sucederían errores y el mapa no se cargaría.

Luego, si bien onload=”init()” dentro del body es la manera mas usada, siento que es mas útil usar window.onload=init;. Esto básicamente porque no siempre disponemos de la capacidad de editar el tag body. Por ejemplo, cuando trabajamos con Frameworks y CMS.

4.2 init
Init (o como se le desee llamar) es la función que define la inicialización de todos los objetos del mapa (capas, controles, propiedades, colores, estilos, handlers, etc).

4.2.1 Crear el objeto Map

var options = {
minResolution: "auto",
minExtent: new OpenLayers.Bounds(-1, -1, 1, 1),
maxResolution: "auto",
maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90)
};
var map = new OpenLayers.Map('map', options );

Este objeto es el objeto principal y es el que contiene las capas y los controles a mostrarse. Las opciones (variable ‘options’) son una serie de parámetros iniciales que pueden aplicarse. Si bien el objeto map puede ser creado sin opciones (opciones predeterminadas), si se desea trabajar con otra proyección que no es la predeterminada es importante cambiar una serie de parámetros para que OpenLayers lo muestre correctamente. A continuación un ejemplo de los parámetros necesarios para cargar capas con otra proyección:

var options = {
units:'meters',
maxExtent: new OpenLayers.Bounds(671596.374,9141239.000,
859950.187, 9489664.000),
projection:new OpenLayers.Projection("EPSG:32717"),
maxResolution: 1000
};

Nombre Descripción
units Las unidades determinan si se trabaja en metros o grados. Esta unidad está muy ligada a las unidades que utiliza la proyección con la que se trabaja. El valor predeterminado es grados.
maxExtent La máxima extensión determina el tamaño y posición del zoom mas alejado al que se podrá llegar con el mapa. El valor predeterminado es ‘new OpenLayers.Bounds(-180, -90, 180, 90)’ , es decir, la extensión completa del mundo en grados.
projection La Proyección con la que trabajará el mapa. Su valor predeterminado es WGS 84 (“EPSG:4326”)
maxResolution La máxima resolución se calcula como el máximo ratio (unidad de medida)/(pixel). la opción ‘auto’ hace el cálculo de manera automática. Sin embargo cabe mencionar que cuando se trabaja con un div de tamaño dinámico (mezclando OpenLayers con otras librerías como extJS) este parámetro tiene que ser definido pues la opción ‘auto’ causaría un error y el mapa no se visualiza.

Una lista mas amplia de campos puede ser encontrada en: http://trac.openlayers.org/wiki/SettingZoomLevels

4.2.2 Controles

map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false}));
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.PanZoom());
map.addControl(new OpenLayers.Control.ScaleLine());

Los controles son objetos que controlan cierta interacción con el usuario, ya sea mostrándole la posición en la que se encuentra el mouse (MousePosition) o hasta permitiéndole hacer click sobre una región en el mapa (SelectFeature), entre muchos otros.
Una lista completa mas ejemplos de uso puede ser encontrada en la documentación de la API

4.2.3 Capas

var NASAwms = new OpenLayers.Layer.WMS( "NASA WMS",
"http://wms.jpl.nasa.gov/wms.cgi?", {layers: 'BMNG',
format: 'image/png'},
{isBaseLayer: true});

var USGSwms = new OpenLayers.Layer.WMS ("USGS WMS",
"http://toposervices.cr.usgs.gov/wmsconnector/com.esri.wms.Esrimap/USGS_EDNA_geo?",
{layers: 'States_Generalized', format: 'image/png',
transparent: true},
{isBaseLayer:false});
USGSwms.setVisibility(false);
map.addLayers([NASAwms, USGSwms]);

Las capas son son en sí la información geográfica que se va a presentar al usuario y por lo tanto la parte mas importante del código. Me enfocaré en visualizar capas wms pues es el principal uso que le doy, sin embargo mas ayuda puede ser obtenida en la documentación de la API.

Un ejemplo más completo que el de lineas arriba puede ser visto a continuación:

lProvincias = new OpenLayers.Layer.WMS(
"Provincias", http://servidorwms/wms",
{
units:'m',
layers:'Provincias',
transparent:true,
format:'image/png',
'VERSION':"1.1.1"
},
{
isBaseLayer:false,
projection: new OpenLayers.Projection("EPSG:32717"),
visibility:true,
singleTile:true
}
);

Como se puede observar, el primer grupo de opciones son aquellas que se realizarán dentro del QUERY al servidor WMS. El segundo grupo son opciones de visualización de la capa dentro del mapa:

Nombre Descripción
isBaseLayer Determina si es o no una capa base. Las capas base son aquellas que se eligen una a la vez (generalmente son el fondo). El valor predeterminado depende del tipo de capa y para WMS es verdadero.
projection La Proyección con la que trabajará la capa. Su valor predeterminado es el del mapa en el que está.
visibility Verdadero o Falso dependiendo de si la capa empieza visible o no. El predeterminado es ‘true’
singleTile Determina si la capa ser fraccionará o no en “Tiles” o cuadrículas que se van cargando consecuentemente. Es recomendable activar esta opción cuando la capa WMS tiene texto o “labels”, ya que las cuadrículas pueden generar parte del texto en lugares distintos produciendo textos repetidos o cortados en la capa.

4.2.4 Posicionando el mapa

var lat = 38.890000;
var lon = -77.020000;
var zoom = 3;
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);

Incialmente le decimos al mapa en que posición y zoom empezar.

5. Código Completo

<html>
<head>
<title>OpenLayers tutorial</title>
<style type="text/css">
#map {
width: 500px;
height: 250px;
border: 1px solid black;
}

div.olControlMousePosition {
font-family: Times;
font-size: 0.75em;
color: red;
}

div.olControlScaleLine {
font-family: Times;
font-size: 0.75em;
color: red;
}
</style>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
window.onload=init;
function init(){

var lat = 38.890000;
var lon = -77.020000;
var zoom = 3;
var options = {
minResolution: "auto",
minExtent: new OpenLayers.Bounds(-1, -1, 1, 1),
maxResolution: "auto",
maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90)
};
var map = new OpenLayers.Map('map', options );

map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false}));
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.PanZoom());
map.addControl(new OpenLayers.Control.ScaleLine());

var NASAwms = new OpenLayers.Layer.WMS( "NASA WMS",
"http://wms.jpl.nasa.gov/wms.cgi?", {layers: 'BMNG',
format: 'image/png'},
{isBaseLayer: true});

var USGSwms = new OpenLayers.Layer.WMS ("USGS WMS",
"http://toposervices.cr.usgs.gov/wmsconnector/com.esri.wms.Esrimap/USGS_EDNA_geo?",
{layers: 'States_Generalized', format: 'image/png',
transparent: true},
{isBaseLayer:false});
USGSwms.setVisibility(false);
map.addLayers([NASAwms, USGSwms]);
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);

}
</script>

</head>

<body>
<div id="map"></div>
</body>

</html>

Para descargar el código completo seguir el enlace: Demo de OpenLayers
Saludos.

Puntuación: 4.83 / Votos: 12

25 pensamientos en “Empezando con OpenLayers

  1. Fermí

    Hola buenas Juan Carlos, buscando soluciones a mi duda he dado con tu Blog. ¿Puedo hacerte una pregunta?

    Estoy haciendo pruevas con Openlayers. Tengo un mapa montado con la base de Google Maps, encima he puesto un WMS y ningun problema, pero ahora intento con el Catastro de España (WMS) y no hay manera.

    Seguro que és un problema de proyecciones (la de Google)sabes como debo definirlas en el codigo?

    Pongo dos partes del codigo por si da pistas:

    function init(){
    var options = {
    projection: new OpenLayers.Projection("EPSG:900913"),
    units: "m",
    numZoomLevels: 18,
    maxResolution: 156543.0339,

    _____

    // create WMS layer
    var wms = new OpenLayers.Layer.WMS(
    "Cadastre",
    "http://ovc.catastro.meh.es/…",
    {‘layers’: ‘Catastro’, ‘format’:’png’},
    { ‘opacity’: 0.4,
    ‘isBaseLayer’: false,’wrapDateLine’: true,

    }
    );

    Responder
  2. cortez-jc Autor

    Hola Fermí,
    No he tenido el tiempo ultimamente para poder poner tu código en un html completo y probar soluciones.

    Lo único en lo que te puedo aconsejar viendo el código es que revises el tema de las proyecciones, EPSG:900913 es una proyección muchas veces asociada con google.

    Puedes revisar este enlace: http://trac.openlayers.org/

    Y ten en cuenta que posiblemente la capa "var wms" que estas creando puede estar siendo llamada con esa proyección (EPSG:900913) y que seguro que no la soporta.

    Responder
  3. Ramón Lira ARgüello

    Hola, Juan carlos, estoy empezando con esto de los SGI, y he instalado MapServer para públicar unos mapas, me he bajado el demos de mapa server, y ya he creado una aplicación dinámica para los mios.

    Sin embargo para darle un poco mas de vista, he querido aplicar openlayers, sin embargo, no puedo ver los mapas, ni siquiera el de itasca que viene en el demo de mapserver, todo me funciona bien sin el openlayers pero cuando lo aplico no me muestra los mapas, solo me muestra la ventana con los controles y el color de fondo que pongo en el parametro IMAGECOLOR del archivo .map, como si las capas estubieran invisibles,

    Mi codigo es este

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>MapServer Layer</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
    var lon = 5;
    var lat = 40;
    var zoom = 5;
    var map, layer;

    function init(){
    map = new OpenLayers.Map( ‘map’ );
    layer = new OpenLayers.Layer.MapServer( "OpenLayers WMS",
    "http://localhost/cgi-bin/ma…", {map:’C:/OSGeo4W/apps/solar/solar.map’,layers: ‘solar’},
    {gutter: 8},{isBaseLayer: false,opacity: 0.8});
    map.addLayer(layer);
    map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
    map.addControl( new OpenLayers.Control.LayerSwitcher() );
    }

    </script>
    </head>
    <body onload="init()">
    <h1 id="title">MapServer Layer</h1>
    <div id="tags"></div>
    <div id="shortdesc">Shows MapServer Layer</div>
    <div id="map" class="smallmap"></div>
    <div id="docs">
    This is an example of using a MapServer Layer with a gutter parameter. The gutter parameter is used to try to limit the edge effects between tiles.
    </div>
    </body>
    </html>
    y el archivo de mapa este:
    # Map file created from QGIS project file G:/OSGeo4W/apache/htdocs/workshop/solar.qgs
    # Edit this file to customize for your map interface
    # (Created with PyQgis MapServer Export plugin)
    MAP
    NAME solar
    # Map image size
    SIZE 600 600
    EXTENT 993525.00000 13490.081522 4159275.00000 2212309.918478
    PROJECTION
    "init=epsg:4326"
    END
    UNITS METERS
    SHAPEPATH "data" #Añadido
    IMAGECOLOR 0 253 253
    IMAGEQUALITY 95
    TEMPLATEPATTERN "solar" #Añadido — no se a que se refiere

    IMAGETYPE PNG

    # Checar si faltan los simbolos como el mapa de itasca

    # Web interface definition. Only the template parameter
    # is required to display a map. See MapServer documentation
    WEB
    # Set IMAGEPATH to the path where MapServer should
    # write its output.
    TEMPLATE ‘solar.html’
    IMAGEPATH ‘G:/OSGeo4W/apache/temp/’

    # Set IMAGEURL to the url that points to IMAGEPATH
    # as defined in your web server configuration
    IMAGEURL ‘G:/OSGeo4W/apache/temp/’
    EMPTY ‘consulta_vacia.html’

    # WMS server settings
    METADATA
    ‘wms_title’ ‘solar’
    ‘wms_onlineresource’ ‘http://localhost/cgi-bin/ma…&’
    ‘wms_srs”EPSG:4326’
    END

    #Scale range at which web interface will operate
    # Template and header/footer settings
    # Only the template parameter is required to display a map. See MapServer documentation
    END

    # Background color for the map canvas — change as desired

    OUTPUTFORMAT
    NAME png
    DRIVER ‘GD/PNG’
    MIMETYPE ‘image/png’
    #IMAGEMODE PC256
    EXTENSION ‘png’
    END

    OUTPUTFORMAT
    NAME GTiff # Especificación del formato GTiff
    DRIVER ‘GDAL/GTiff’
    MIMETYPE ‘image/tiff’
    IMAGEMODE RGB
    EXTENSION ‘tif’
    END

    # Legend
    LEGEND
    IMAGECOLOR 255 255 255
    STATUS ON
    KEYSIZE 18 12
    LABEL
    TYPE BITMAP
    SIZE MEDIUM
    COLOR 0 0 89
    END
    END

    QUERYMAP
    STATUS ON
    COLOR 255 0 0
    STYLE HILITE
    SIZE 400 400
    END

    LAYER
    NAME ‘solar’
    TYPE POLYGON
    DATA solar
    TEMPLATE ‘consulta_solar.html’
    STATUS DEFAULT
    #TRANSPARENCY 100 — estaba activa
    METADATA
    ‘wms_srs”EPSG:4326’
    END
    CLASS
    NAME ‘solar’
    STYLE
    #SYMBOL 0 —estaba activa
    #SIZE 2 —estaba activa
    OUTLINECOLOR 0 0 0
    COLOR 150 123 90
    END
    END

    END

    LAYER
    NAME ‘topo’
    DATA ‘topo.tif’
    STATUS DEFAULT
    TYPE RASTER
    METADATA
    ‘wms_srs”EPSG:4326’
    END

    END

    Podrias decirme si he puesto algo mal,Te agradeceria mucho tu ayuda.

    Responder
  4. cortez-jc Autor

    Hola Ramón,

    A simple vista puedo observar un error:
    El javascript apunta a mapserv.exe (versión de windows) y a un mapfile en una ruta windows.

    Sin embargo, el mapfile indica en el parámetro wms_onlineresource una ruta a mapserv (versión "linux") y un mapa llamado wms.map

    Ten en cuenta que tu programa "solo mapserver" funciona porque no utiliza el protocolo WMS pero al hacerlo con OpenLayers salta el problema de que el servidor no apunta a si mismo.

    Saludos

    Responder
  5. Ramon Lira Arguello

    Hola juan carlos

    Te agradesco tu respuesta, ya cambie esa parte de codigo que me comentaste, solo que no se como quedaria, yo supuse que apñuntaria al mismo archivo .map:

    # WMS server settings
    METADATA
    ‘wms_title’ ‘solar’
    ‘wms_onlineresource’ ‘http://localhost/cgi-bin/ma…&’
    ‘wms_srs”EPSG:4326’
    END

    Pero el problema, no se soluciono con eso, me sigue poniendo solo el color, y no me muestra ala capa.

    Te agradeceria me apoyaras en esto, ya que he hestado trabado desde hace unos dias.

    Saludos.

    Responder
  6. cortez-jc Autor

    Hola Ramón,

    MapServer siempre tuvo problemas con las rutas relativas. Te recomiendo utilizar la ruta completa de tipo C:/OSGeo4W/apps/solar/solar.map.

    También puedes probar con backslash, pero creo que eso es codificando la cadena, algo como esto:
    C:%5COSGeo4W%5Capps%5Csolar%5Csolar.map

    Saludos

    Responder
  7. Ramon Lira Arguello

    Hola Juan Carlos,

    He utilizado las opciones que me has dicho y me sigue haciendo lo mismo.

    Mira he cambiado la capa ‘solar’ y le he puesto la que yo tengo como ‘topo’

    map = new OpenLayers.Map( ‘map’ );
    layer = new OpenLayers.Layer.MapServer( "OpenLayers WMS",
    "http://localhost/cgi-bin/ma…", {map:’C:/OSGeo4W/apps/solar/solar.map’,layers: ‘topo’},
    {gutter: 8},{isBaseLayer: false,opacity: 0.8});
    map.addLayer(layer);
    Esta es una capa raster, en el archivo mapa lo puedes ver.

    LAYER
    NAME ‘topo’
    DATA ‘topo.tif’
    STATUS DEFAULT
    TYPE RASTER
    METADATA
    ‘wms_srs”EPSG:4326’
    END

    END

    Las capas ‘solar’ (es un shape) y ‘topo’ (raster) estan en la carpeta "Data", entonces lo que hice para probar es eliminar la imagen .tif (topo) de la carpeta, y es como si no pasara nada, no me dice ni un error que la capa no se encuentra (es lo que yo esperaba) o que no se encuentra el archivo, no se si esto pueda ayudar.

    Tambien me he fijado en otro sitio, que al parecer la proyeccion "init=epsg:4326" es una proyeccion en grados y en el atributo EXTEN tengo en metros, no se si eso tenga que ver, ¿Que me puedes decir tu?

    Soy resien egresado de Ing. Sistema Computacionales, y he desarrollado Sistemas de control pero no me habia topado con los SIG, agradesco tu ayuda.

    Saludos

    Responder
  8. CAMARILLO

    HOLA TENGO ESTE CODIGO Y NO HACE NO ME MUESTRA NADA DESPUES DE LA ALERTA,
    unction EntrarInicio(){
    alert(‘ENTRO AL INICIO’);
    map = new OpenLayers.Map(‘map’);
    var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
    "http://vmap0.tiles.osgeo.or…", {layers: ‘basic’});

    map.addLayers([wmsLayer]);
    map.addControl(new OpenLayers.Control.LayerSwitcher());
    map.addControl(new OpenLayers.Control.MousePosition());
    alert(‘ENTRO AL INICIO 3’);

    Responder
  9. israel

    Hola soy nuevo en esto y ando haciendo unas pruebas cargando en openlayers las capas de google como capas base y tengo unas capas tipo shape. el problema que tengo es que cuando seleciono las capas shape se encimas en mi capa base y no puedo ver las de google, hay alguna forma de que pueda quitarle el color a la capas shape, para que se vean los puntos sobre la capa de google??

    Responder
  10. cortez-jc Autor

    Hola CAMARILLO,

    ¿Cuándo estas llamando a la función EntrarInicio? tal vez estas haciéndolo cuando la librería openlayers no está cargada aún. El navegador generalmente lanza mensajes de error (excepto ie6). Sería bueno observar esos mensajes ya que una pantalla en blanco no dice nada.

    Saludos

    Responder
  11. cortez-jc Autor

    Hola israel,

    Para trabajar shapes en openlayers debes tener un servidor GIS y has omitido ese detalle. Asumiendo que trabajas con mapserver primero asegurate de trabajar en un formato que maneje transparencias, por ejemplo png y no jpeg; y obviamente retira el color de relleno de la capa.

    Otro consejo es que averigues sobre los parámetros TRANSPARENCY Y OPACITY que permiten ver debajo de capas con colores definiendo una transparencia. Además, OpenLayers también permite definir transparencia a nivel de javascript (está característica se ve robusta y rápida)

    saludos

    Responder
  12. Erika Maud

    Hola JC, no se si esta activo este blog pero me ha servido mucho como ejemplo base para mi trabajo.
    Lo que queria saber es por que no me aparece el mapa de la nasa como base, parece que ya no está disponible, como haría para usar una base parecida?

    Responder
  13. cortez-jc Autor

    Hola Erika, hace buen tiempo que no pongo nuevo material. Tengo ideas pero no me doy el tiempo.

    Si las fotos satelitales de la nasa ya no funcionan puedes utilizar esta de metacarta:

    var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
    11 "http://labs.metacarta.com/w…", {layers: ‘basic’});

    No es tan detallado pero no creo que eso sea necesario para el caso.

    Saludos

    Responder
  14. Manuel Mancipe

    Hola Juan Carlos, he visto post y me parece muy interesante para las personas que este llegando a OpenLayer.
    Gracias por tus aportes

    Tengo una inquietud, estoy desarrollando una aplicación con mapserver y lo he podido conectar con OpenLayers correctamente, pero necesito que OpenLayer pueda comportarse dinamicamente, me explico que cuando el usuario seleccione una capa de un wms (map), solo muestre esa capa, pero cuando selecciona mas de una capa de mas de un servidor wms (map), OpenLayer pueda mostrar todas las capas seleccionadas.

    Si por favor me pudieras dar una idea de como realizar esto estaria muy agradecido.

    Responder
  15. Cristina Frutos

    hola Juan Carlos, estoy realizando un sistema con open layers con un mapa que cree yo, el problema es que no me depliega los labels que yo especifico en mi archivo.map
    porfa si me puedes ayudar me harias un gran favor

    Responder
  16. Isaias

    Hola,
    Cree un mapa(.tif) que tengo en mi servidor, como y que necesito para poder verlo como una capa más en mi interfaz openlayers.
    Saludos
    Isaias

    Responder
  17. Saily

    Hola estoy trabajando en mi tesis. Estoy implementando un SIG utilizando el framework GeoMoose, pero en el SO Linux (Ubuntu). Este trabaja con OpenLayer, he trabajado en este para cargar el mapa de mi aplicacion, el problema es que las capas de este no me estan funcionando en el mapa que me sale. Aqui les pongo el codigo esperando alguna ayuda. Es urgente, gracias:

    <script type="text/javascript" >
    function init(){
    var lon = 5;
    var lat = 40;
    var zoom = 3;

    var options = {
    maxResolution: 1.40625,
    minExtent: new OpenLayers.Bounds(-1, -1, 1, 1),
    maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90)
    };

    var map = new OpenLayers.Map(‘mapa’, options);
    map.addControl(new OpenLayers.Control.Navigation());
    map.addControl(new OpenLayers.Control.PanZoomBar());
    map.addControl(new OpenLayers.Control.LayerSwitcher({‘ascending’:false}));
    map.addControl(new OpenLayers.Control.MousePosition());
    map.addControl(new OpenLayers.Control.OverviewMap());
    map.addControl(new OpenLayers.Control.KeyboardDefaults());

    var mundo = new OpenLayers.Layer.MapServer(
    "Mundo",
    "http://localhost:5800/cgi-b…",{layer:’basic’}/*,{isBaseLayer:true, visibility:true, singleTile:true}*/);

    var sombras = new OpenLayers.Layer.Vector(
    "Sombra",
    "http://localhost:5800/cgi-b…",{layer:’sombra’});
    var relieves = new OpenLayers.Layer.Vector(
    "Relieve",
    "http://localhost:5800/cgi-b…",{layer:’relieve’});
    var contornos = new OpenLayers.Layer.Vector(
    "Contorno",
    "http://localhost:5800/cgi-b…",{layer:’contorno’});
    var provincias = new OpenLayers.Layer.Vector(
    "Provincias",
    "http://localhost:5800/cgi-b…",{layer:’provincias_r’/*,format: ‘image/png’*/}/*, {isBaseLayer: false, visibility:true,singleTile:true}*/);
    var municipios = new OpenLayers.Layer.Vector(
    "Municipios",
    "http://localhost:5800/cgi-b…",{layer:’municipios_r’});
    map.addLayer(mundo);
    map.addLayer(sombras);
    map.addLayer(relieves);
    map.addLayer(contornos);
    map.addLayer(provincias);
    map.addLayer(municipios);

    map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);

    if (!map.getCenter())
    map.zoomToMaxExtent();
    }
    </script>

    Responder
  18. David

    Hola.

    Estoy mirando este asunto y me gustaría saber si todo esto hay que hacerlo en una o varias funciones javascript?..

    Hay posibilidad de parametrizarlo, digamos que tengo varias capas que muestro a partir de información en la base de datos y que en un momento añado una nueva, es posible.

    En todos los ejemplos que veo se crea una variable, y se añade al map, todo de forma estática.

    En caso afirmativo, podrías poner algún link.

    Gracias.
    Salu2

    Responder
  19. Francisco Domínguez

    Estimado Juan Carlos, soy Francisco Domínguez, desde España

    acabo de descubrir tu blog y la verdad me parece súper interesante, enhorabuena.

    He descubierto tu blog buscando información sobre la publicación web de información cartográfica. Concretamente estoy intentando crear un servicio wms en un servidor web contratado en un hosting. Mi intención es hacerlo con la extensión de publicación de GvSig y mapserver. Hasta ahora lo he creado en localhost, pero la dificultad la encuentro a la hora de realizar lo mismo en el servidor.

    El primer paso es instalar el binario de map server en el servidor, aquí tengo el primer problema, he colocado el binario que encuentro en la herramienta FWtools, pero al teclear la url me dice que error 500 Internal server error, no sé si el error es del servidor o del binario que no es el correcto. Como podrás comprender, a partir de aquí no he podido seguir.

    Ojala pudieses ayudarme

    Saludos y gracias

    Responder
  20. elizabeth

    Hola juan carlos soy nueva en esto de los sig aqui en el trabajo me piden que monte una pagina web en la cual se tenga un mapa de google maps y eso ya esta ahora lo que me piden es que inserte unos shapes sin utilizar wms ahi es donde me he atorado quisiera saber si me podrias hechar una mano esto esta montado en open layers agradezco de ante mano tu apoyo

    Responder
  21. Darko

    Hola, estoy haciendo una aplicacion con ayuda del sdk suite de opengeo para mi proyecto fin de carrera
    en la universidad. Lo que pretendo hacer es un visor de mapas donde pueda programar otras funciones como
    filtros espaciales como por ejemplo la interseccion de otros dos archivos shp para crear uno nuevo, o un simple
    buffer con los shp q yo kiera.
    He leido sobre los protocolos wfs, wms y wps en el OGC, y por lo que veo es ésto lo que tengo q utilizar en este trabajo. Pero no
    sé si he entendido bien el concepto.

    Tengo algunos mapas .shp… puedo utilizar esos mapas propios para hacer lo que quiero?, es decir,
    puedo conseguir seleccionar features de estos mapas propios (para mis funciones interseccion y buffer )
    como he visto en varios ejemplos a partir del WFS??. Y para ello tengoq convertir mis shp en WMS o en WFS??

    Sobretodo me interesa saber como puedo conseguir seleccionar features en un shp propio. He mirado bastante documentación pero no acabo de aclararme.

    Muchas gracias de antemano

    Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *