OpenLayers 3クリックでポップアップを作成

8

OSMマップにGeoJSONファイル（ポイント）を表示しています。属性を表示するために各ポイントのクリック時にポップアップを作成したいと思います。

OpenLayers 3の例でさえ、そのための非常に基本的なステップバイステップチュートリアルを見つけることができません。

誰かが便利なリンクを持っていますか？

popup openlayers

— リーハン
ソース

9

これは私が便利だと思ったチュートリアルです。チュートリアルでは、walkermattによるol3-popupを使用してポップアップを作成します。デモからいくつかのコードを切り取って貼り付けたので、これがどのように見えるべきかについてのアイデアがあります。

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>');
});

— ラビ・メタ
ソース

5

ol3js.orgページのアイコンの例は、あなたが求めているものにかなり近いです。正しいブートストラップcssおよびjsファイルが含まれていることを確認する必要があります。JSの重要な部分がここで強調表示されています。https： //github.com/openlayers/ol3/blob/v3.0.0-gamma.1/ examples / icon.js＃L65-L84

— 男
ソース