OpenLayers 3 creando ventanas emergentes con un clic

8

Tengo un mapa OSM en el que visualizo un archivo GeoJSON (punto). Me gustaría crear una ventana emergente al hacer clic para que cada punto muestre atributos.

No puedo encontrar una especie de tutorial paso a paso muy básico para hacerlo, incluso en los ejemplos de OpenLayers 3.

¿Alguien tiene algunos enlaces útiles?

popup openlayers

— Leehan
fuente

9

Aquí hay un tutorial que me pareció útil. El tutorial utiliza ol3-popup de walkermatt para crear las ventanas emergentes. He cortado y pegado algo de código de la demostración para que tengas una idea de cómo debería 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
fuente

5

El ejemplo de Icon de las páginas de ol3js.org está bastante cerca de lo que buscas. Deberá asegurarse de tener incluidos los archivos de arranque CSS y JS correctos, y aquí se resalta la parte importante de JS: https://github.com/openlayers/ol3/blob/v3.0.0-gamma.1/ examples / icon.js # L65-L84

— Chico
fuente