"OpenLayers makes it easy to put a dynamic map in any web page. It can display map tiles and markers loaded from any source. OpenLayers has been developed to further the use of geographic information of all kinds. OpenLayers is completely free, Open Source JavaScript, released under the 2-clause BSD License (also known as the FreeBSD)."
<!DOCTYPE html> <html> <head> <title>My Map</title> <link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css"> <style> #map-id { width: 512px; height: 256px; } </style> <script src="http://openlayers.org/api/2.12-rc1/OpenLayers.js"></script> </head> <body> <h1>My Map</h1> <div id="map-id"></div> <script> var map = new OpenLayers.Map("map-id"); var imagery = new OpenLayers.Layer.WMS( "Global Imagery", "http://maps.opengeo.org/geowebcache/service/wms", {layers: "bluemarble"} ); map.addLayer(imagery); map.zoomToMaxExtent(); </script> </body> </html>
¿Y si quiero que inicialmente me centre en algo?
bounds = new OpenLayers.Bounds();
bounds.extend(new OpenLayers.LonLat(-5, 35));
bounds.extend(new OpenLayers.LonLat(-7, 40));
map.zoomToExtent(bounds, true);
WMS
Tiles
Vectorial
WFS
var imagery = new OpenLayers.Layer.WMS(
"Global Imagery",
"http://maps.opengeo.org/geowebcache/service/wms",
{layers: "bluemarble"}
);
Como WMS pero sólo visualización cacheada. Simplicidad.
Algunos tipos vienen preconfigurados en OpenLayers.
map.addControl(new OpenLayers.Control.LayerSwitcher());
var osm = new OpenLayers.Layer.OSM();
map.addLayer(osm);
Cuidado con las proyecciones
map.getProjection();
osm.projection.projCode
OpenLayers almacena en memoria diferentes geometrías.
Cada vez que se repinta el mapa, recalcula dónde se dibujan las geometrías.
A partir de cierto número de geometrías (depende del navegador), OpenLayers empieza a resultar pesado.
Los datos pueden estar en remoto o en local.
var earthquakes = new OpenLayers.Layer.Vector("Earthquakes", { strategies: [new OpenLayers.Strategy.Fixed()], protocol: new OpenLayers.Protocol.HTTP({ url: data/layers/7day-M2.5.xml", format: new OpenLayers.Format.GeoRSS() }) }); map.addLayer(earthquakes);
Para OpenLayers, una capa WFS es una capa vectorial que saca los datos de un servidor remoto.
OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url=";
var imagery = new OpenLayers.Layer.Vector("WFS", {
strategies: [new OpenLayers.Strategy.BBOX()],
protocol: new OpenLayers.Protocol.WFS({
url: "http://localhost:8080/geoserver/wfs",
featureType: "tasmania_roads",
featureNS: "http://www.openplans.org/topp"
})
});
Los controles son las herramientas para manejar el mapa.
map.addControl($control);
Controles por defecto:
map.addControl(new OpenLayers.Control. LayerSwitcher());
map.addControl(new OpenLayers.Control. PanZoomBar());
map.addControl(new OpenLayers.Control. Permalink());
map.addControl(new OpenLayers.Control. ScaleLine());
map.addControl(new OpenLayers.Control. Scale());
map.addControl(new OpenLayers.Control. OverviewMap());
map.addControl(new OpenLayers.Control. PanPanel());
O un control más complejo:
nav = new OpenLayers.Control.NavigationHistory();
// parent control must be added to the map
map.addControl(nav);
panel = new OpenLayers.Control.Panel(
{div: document.getElementById("panel")}
);
panel.addControls([nav.next, nav.previous]);
map.addControl(panel);
Los controles también permiten personalización mediante una serie de propiedades.
map.addControl(new OpenLayers.Control. MousePosition({
div: document.getElementById("toolbar")}));
Existen controles más complejos.
Por ejemplo los de edición de capas vectoriales.
vectors = new OpenLayers.Layer.Vector("Vector Layer");
map.addLayer(vectors);
control = new OpenLayers.Control. DrawFeature(vectors, OpenLayers.Handler.Point);
map.addControl(control);
control.activate();
control.deactivate();
control = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.Path);
map.addControl(control);
control.activate();
control.deactivate();
control = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.Polygon);
map.addControl(control);
control.activate();
Editing Toolbar lo trae todo a la vez:
control.deactivate();
control = new OpenLayers.Control. EditingToolbar(vectors);
map.addControl(control);
control.activate();
También podemos querer mover las features.
control.deactivate();
control = new OpenLayers.Control. DragFeature(vectors);
map.addControl(control);
control.activate();
O quizás editarlas:
control.deactivate();
control = new OpenLayers.Control. ModifyFeature(vectors);
map.addControl(control);
control.activate();
Mención especial para OpenLayers.Control. SelectFeature
Lanza eventos según las features son seleccionadas o señaladas.
Permite realizar controles más complejos.
Por ejemplo, podríamos hacer un control DeleteFeature.
No vamos a ver estilos.
vectors.features[3].style = {
'strokeWidth': 5,
'strokeColor': '#00ff00'
};
map.zoomIn();
Ni handlers.
// handler only responds if the Shift key is down
handler.keyMask = OpenLayers.Handler.MOD_SHIFT;
// handler only responds if Ctrl-Shift is down
handler.keyMask = OpenLayers.Handler.MOD_SHIFT |
OpenLayers.Handler.MOD_CTRL;
Se puede empezar por ejemplo con un simple botón
var button = new OpenLayers.Control.Button({displayClass: "MyButton", trigger: myFunction});
Que se coloca dentro de un panel.
Vamos con un ejemplo un poco más complejo.
Todos los controles heredan de la clase Control.
type: Button/Toggle/Tool
activate/deactivate
setMap
No suele desarrollarse directamente sobre esta clase.
Un concepto importante es la capa en la que actua el control.
En el caso del control select feature existe la función setLayer.
Además necesita este parámetro para inicializarlo:
select1 = new OpenLayers.Control.SelectFeature(
vlayer,
{
clickout: false, toggle: false,
multiple: false, hover: false,
toggleKey: "ctrlKey", // ctrl key removes from selection
multipleKey: "shiftKey", // shift key adds to selection
box: true
}
);;
select2 = new OpenLayers.Control.SelectFeature(
vlayer2,
{
clickout: false, toggle: false,
multiple: false, hover: false,
toggleKey: "ctrlKey", // ctrl key removes from selection
multipleKey: "shiftKey", // shift key adds to selection
box: true
}
);;
select3 = new OpenLayers.Control.SelectFeature(
[vlayer, vlayer2],
{
clickout: false, toggle: false,
multiple: false, hover: false,
toggleKey: "ctrlKey", // ctrl key removes from selection
multipleKey: "shiftKey", // shift key adds to selection
box: true
}
);;
Aquí puedes ver el ejemplo completo.
Echarle un vistazo a los ejemplos.
Workshop de OpenGeo
Visitar este tutorial en Español