OpenLayers 3 membuat sembulan pada klik

8

Saya memiliki peta OSM tempat saya menampilkan file GeoJSON (titik). Saya ingin membuat sembulan pada klik untuk setiap titik untuk menunjukkan atribut.

Saya tidak dapat menemukan semacam tutorial langkah demi langkah yang sangat mendasar untuk melakukan itu, bahkan pada contoh OpenLayers 3.

Adakah yang punya beberapa tautan bermanfaat?

popup openlayers Leehan
sumber

Jawaban:

9

Inilah tutorial yang menurut saya berguna. Tutorial menggunakan ol3-popup oleh walkermatt untuk membuat popup. Saya telah memotong dan menempelkan beberapa kode dari demo sehingga Anda memiliki ide tentang seperti apa bentuknya.

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
sumber