Empezando con OpenLayers

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 OpenLayers[9134clicks]

A 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
};

NombreDescripción
unitsLas 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.
maxExtentLa 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.
projectionLa Proyección con la que trabajará el mapa. Su valor predeterminado es WGS 84 ("EPSG:4326")
maxResolutionLa 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:
NombreDescripción
isBaseLayerDetermina 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.
projectionLa Proyección con la que trabajará la capa. Su valor predeterminado es el del mapa en el que está.
visibilityVerdadero o Falso dependiendo de si la capa empieza visible o no. El predeterminado es 'true'
singleTileDetermina 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[9134clicks]
Saludos.

Etiquetas : ,

item rate
Total de Votos: 12 - Rating: 4.83

Vota por este artículo:


Ingrese su correo electrónico para suscribirse a los comentarios de este artículo:

Ingrese los caracteres de la imagen y presione el botón "Suscribirse":

Comentarios

Fermí escribió:

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,

}
);
lunes 15 febrero 10:38

cortez.jc escribió:

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.
domingo 28 febrero 23:44

Ramón Lira ARgüello escribió:

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.
viernes 04 junio 15:15

cortez.jc escribió:

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
viernes 04 junio 15:49

Ramon Lira Arguello escribió:

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.
lunes 07 junio 13:08

cortez.jc escribió:

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
lunes 07 junio 13:41

Ramon Lira Arguello escribió:

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
lunes 07 junio 14:22

CAMARILLO escribió:

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');
jueves 28 octubre 15:18

israel escribió:

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??
lunes 08 noviembre 17:55

cortez.jc escribió:

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
lunes 06 diciembre 11:18

cortez.jc escribió:

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
lunes 06 diciembre 11:24

Erika Maud escribió:

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?
miércoles 19 enero 14:07

cortez.jc escribió:

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
jueves 27 enero 12:43

Manuel Mancipe escribió:

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.
martes 01 febrero 19:13

Cristina Frutos escribió:

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
lunes 07 febrero 10:58

Isaias escribió:

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
viernes 01 abril 13:54

Saily escribió:

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>
miércoles 25 mayo 13:47

David escribió:

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
jueves 16 junio 15:18

Francisco Domínguez escribió:

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
sábado 08 octubre 12:48

Roberto Ortíz escribió:

Hola Juan Carlos, me hace falta saber como puedo sacar los controles del mapa para div en otra parte de la pagina.
jueves 03 noviembre 10:32

wilfo escribió:

Genial amigo, se te agradece por tus publicaciones.
Tengo una duda , es que yo trabajo con qgis y al exportar mis dhape con puedo visuaalizarlas con openlayers..¿las proyecciones de mi shape son el problema o que es?....alguna sugerencia.
logica_Razon@hotmail.com
sábado 03 diciembre 12:19

elizabeth escribió:

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
viernes 24 febrero 14:12

israel Gonzalez escribió:

Hola ando buscando a un experto de openlayers, tengo un problemita que no he podido solucionar, tengo un archivo KML, que tiene informacion de fotos, y desde openlayers quiero acceder a esa informacion.
Si alguien sabe como mandarme su correo a mi correo israelgonzalez75@hotmail.com
martes 12 junio 18:00

fernando gonzalez escribió:

buen dia alguien sabe como sacar las propierties o features de los archivos shape de mi mapa esque tiene info sobre carreteras y quiero mostrarlas con un pop up pero nome ha salido
martes 03 julio 14:13

Darko escribió:

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
jueves 01 noviembre 12:37

Añadir Comentarios

:

: (obligatorio)



(obligatorio)

Su comentario deberá ser aprobado antes de ser publicado. Gracias!