OpenLayers 3 erstellt Popups mit einem Klick

8

Ich habe eine OSM-Karte, auf der ich eine GeoJSON-Datei (Punkt) anzeige. Ich möchte beim Klicken für jeden Punkt ein Popup erstellen, um Attribute anzuzeigen.

Ich kann keine sehr einfache Schritt-für-Schritt-Anleitung finden, um dies zu tun, selbst bei OpenLayers 3-Beispielen.

Hat jemand einige nützliche Links?

popup openlayers

— Leehan
quelle

9

Hier ist ein Tutorial , das ich nützlich fand. Das Tutorial verwendet das ol3-Popup von walkermatt , um die Popups zu erstellen . Ich habe Code aus der Demo ausgeschnitten und eingefügt, damit Sie eine Vorstellung davon haben, wie dies aussehen soll.

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
quelle

5

Das Icon Beispiel von den ol3js.org Seiten ist ziemlich nah an , was Sie wollen. Sie müssen sicherstellen, dass die richtigen Bootstrap-CSS- und JS-Dateien enthalten sind. Das wichtige Teil von JS wird hier hervorgehoben: https://github.com/openlayers/ol3/blob/v3.0.0-gamma.1/ examples / icon.js # L65-L84

— Kerl
quelle