Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

Taller de OpenLayers

María Arias de Reyna Domínguez - @delawen

Qué es OpenLayers

"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);

Capas

WMS

Tiles

Vectorial

WFS

WMS

        var imagery = new OpenLayers.Layer.WMS(
                "Global Imagery",
                "http://maps.opengeo.org/geowebcache/service/wms",
                {layers: "bluemarble"}
            );
        

Tiles

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);

¡Mentira!

Cuidado con las proyecciones

map.getProjection();

osm.projection.projCode

Vectorial

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);
        

WFS

Para OpenLayers, una capa WFS es una capa vectorial que saca los datos de un servidor remoto.

WFS

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"

})

});

Controles

Los controles son las herramientas para manejar el mapa.

map.addControl($control);

Controles por defecto:

Navigation

PanZoom

Attribution

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.

Ejemplo sencillo

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.

Para saber más

Echarle un vistazo a los ejemplos.

Workshop de OpenGeo

Visitar este tutorial en Español

Puedes jugar con Mapquery o GeoExt