OpenLayers 3 créant des popups en un clic

8

J'ai une carte OSM sur laquelle j'affiche un fichier GeoJSON (point). Je voudrais créer une fenêtre contextuelle sur chaque clic pour afficher les attributs.

Je ne peux pas trouver une sorte de tutoriel étape par étape très basique pour le faire, même sur des exemples OpenLayers 3.

Quelqu'un at-il des liens utiles?

popup openlayers Leehan
la source

Réponses:

9

Voici un tutoriel que j'ai trouvé utile. Le tutoriel utilise l' ol3-popup de walkermatt pour créer les popups. J'ai coupé et collé du code de la démo pour que vous ayez une idée de ce à quoi cela devrait ressembler.

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    view: new ol.View({
        center: ol.proj.transform([-0.92, 52.96], 'EPSG:4326', 'EPSG:3857'),
        zoom: 6
    })
});

var popup = new ol.Overlay.Popup();
map.addOverlay(popup);

map.on('click', function(evt) {
    var prettyCoord = ol.coordinate.toStringHDMS(ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'), 2);
    popup.show(evt.coordinate, '<div><h2>Coordinates</h2><p>' + prettyCoord + '</p></div>');
});
Ravi Mehta
la source