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
source

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
source

5

L' exemple d'icône des pages ol3js.org est assez proche de ce que vous recherchez. Vous devrez vous assurer que les fichiers css et js de démarrage appropriés sont inclus, et le bit important de JS est mis en évidence ici: https://github.com/openlayers/ol3/blob/v3.0.0-gamma.1/ examples / icon.js # L65-L84

— Gars
source