OpenLayers 3 tạo cửa sổ bật lên khi nhấp chuột

8

Tôi có một bản đồ OSM mà tôi hiển thị tệp GeoJSON (điểm). Tôi muốn tạo một cửa sổ bật lên khi nhấp cho mỗi điểm để hiển thị các thuộc tính.

Tôi không thể tìm thấy một loại hướng dẫn từng bước rất cơ bản để làm điều đó, ngay cả trên 3 ví dụ về OpenLayers.

Có ai có một số liên kết hữu ích?

popup openlayers

— Leehan
nguồn

9

Đây là một hướng dẫn mà tôi thấy hữu ích. Hướng dẫn sử dụng cửa sổ bật lên ol3 của walkermatt để tạo cửa sổ bật lên. Tôi đã cắt và dán một số mã từ bản demo để bạn có ý tưởng về cái này sẽ trông như thế nào.

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
nguồn

5

Các biểu tượng ví dụ từ các trang ol3js.org là khá gần với những gì bạn đang sau. Bạn sẽ cần đảm bảo rằng bạn có các tệp css và js bootstrap chính xác, và phần quan trọng của JS được tô sáng ở đây: https://github.com/openlayers/ol3/blob/v3.0.0-gamma.1/ ví dụ / icon.js # L65-L84

— Chàng
nguồn