OpenLayers Les couches

Rasters

La classe pour une couche de tuiles classiques est ol.layer.Tile

Ajout d’une couche OSM dans Openlayers

new ol.Map({
    target: 'map',
    view: new ol.View({
        center: ol.proj.fromLonLat([2.35, 48.85]),
        zoom: 13,
    }),
    layers: [
        new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
                maxZoom: 19,
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
            }),
        }),
    ],
});

Dans OpenLayers, les couches sont toujours associées à une source de données ( attribut source). Ici, c’est ol.source.XYZ.

L’ajout de couches peut également se faire après la création de la carte avec map.addLayer(layer) (ou layer.setMap(map) mais la couche n’est pas parfaitement gérée)

Tip

Dans ce cas précis, on pourrait remplacer la source ol.source.XYZ par ol.source.OSM qui est pré-configurée dans OpenLayers.

new ol.Map({
    target: 'map',
    view: new ol.View({
        center: ol.proj.fromLonLat([2.35, 48.85]),
        zoom: 13,
    }),
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM(),
        }),
    ],
});

WMS

Pour une couche WMS tuilée, c’est toujours la classe ol.layer.Tile, mais associée à une source ol.source.TileWMS

Ajout d’un flux WMS tuilé

let wmsLayer = new ol.layer.Tile({
    source: new ol.source.TileWMS({
        url: 'https://api.ensg.eu/geoserver/wms',
        params: {
            LAYERS: 'ensg:hydro',
        },
    })
});

map.addLayer(wmsLayer);

Vecteurs (points, lignes, surfaces)

Pour l’ajout d’objets vectoriels, il faut créer une couche vectorielle (ol.layer.Vector), avec une source vectorielle (ol.source.Vector). Cette source doit contenir une Feature (ol.Feature), dont la géométrie est de type souhaité (ol.geom.Point, ol.geom.LineString, ol.geom.Polygon, etc.).

OpenLayers

// icone sur Paris
let marker = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: [
            new ol.Feature(new ol.geom.Point(ol.proj.fromLonLat([2.35, 48.85]))),
        ],
    }),
});
map.addLayer(marker);

// polygon de l’ile de la cité
let polygon = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: [
            new ol.Feature(new ol.geom.Polygon(
                [[[2.3393, 48.8578],[2.3411, 48.8568],[2.3432, 48.8550],[2.3472, 48.8534],[2.3497, 48.8524],[2.3527, 48.8516],[2.3522, 48.8526],[2.3520, 48.8538],[2.3510, 48.8548],[2.3484, 48.8557],[2.3439, 48.8569],[2.3412, 48.8573],[2.3393, 48.8578]]]
                ).transform("EPSG:4326", "EPSG:3857"),
            ),
        ],
    }),
});
map.addLayer(polygon);

Note : Remarquez l’utilisation de transform() pour convertir toutes les coordonnées du polygone. Pour rappel, ol.proj.useGeographic() peut être appeler pour éviter les multiples transformations de coordonnées.

Services web, APIs cartographiques

La majeure partie du temps, les données affichées au sein des couches proviennent de services web géographiques ou d’APIs. Les fonds de cartes rasters par exemple sont fournis sous forme de services web (géographiques). Pour les données vectorielles, on parle le plus souvent d’APIs cartographiques (des URLs qui fournissent des données).

Voici un exemple qui affiche les tremblements de terre de plus de 4.5 sur l’échelle de Richter, sur le mois précédent.

OpenLayers - Couche basée sur API en GeoJSON

let earthquakesLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: urlEarthQuakes,
        format: new ol.format.GeoJSON(),
    }),
});
map.addLayer(earthquakesLayer);

Ici, l’appel AJAX est délégué à la source. Il suffit donc simplement de créer une couche vecteur, de préciser l’URL des données ainsi que le format de retour.

Remarque: il est également possible de réaliser son propre appel AJAX, et d’ajouter les données reçues à la couche ensuite (à l’aide de layer.getSource().addFeatures() ou layer.getSource().addFeature()).