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

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

5

Contoh Ikon dari halaman ol3js.org cukup dekat dengan apa yang Anda cari. Anda harus memastikan Anda memiliki file css dan js bootstrap yang benar, dan bit penting JS disorot di sini: https://github.com/openlayers/ol3/blob/v3.0.0-gamma.1/ contoh / icon.js # L65-L84

— Orang
sumber