OpenLayers 3 criando pop-ups com um clique

8

Eu tenho um mapa OSM no qual eu mostro um arquivo GeoJSON (ponto). Eu gostaria de criar um pop-up ao clicar para cada ponto para mostrar atributos.

Não consigo encontrar um tipo de tutorial passo a passo muito básico para fazer isso, mesmo nos exemplos do OpenLayers 3.

Alguém tem alguns links úteis?

popup openlayers

— Leehan
fonte

9

Aqui está um tutorial que eu achei útil. O tutorial usa o ol3-popup da walkermatt para criar os pop-ups. Recortei e colei alguns códigos da demonstração para que você tenha uma idéia de como isso deve ser.

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
fonte

5

O exemplo de ícone das páginas ol3js.org está bastante próximo do que você procura. Você precisará certificar-se de ter os arquivos css e js de bootstrap corretos incluídos, e a parte importante do JS é destacada aqui: https://github.com/openlayers/ol3/blob/v3.0.0-gamma.1/ examples / icon.js # L65-L84

— Cara
fonte