1

Openstreetmap ベースマップを使用して Openlayers 3 (v3.11.2) でマップを作成しました。Overpass API を介して Openstreetmap から機能をロードしています。

/** OSM Overpass Layer*/
var osmxmlFormat = new ol.format.OSMXML();

/** Public Transport Layer*/
var osmTransportSource = new ol.source.Vector({
    loader: function(extent, resolution, projection) {
        var url = 'https://overpass-api.de/api/interpreter?data=%5Bout%3Axml%5D%3Barea%283600062422%29%2D%3E%2E' +
        'searchArea%3B%28node%5B%22public%5Ftransport%22%3D%22stop%5Fposition%22%5D%28area%2EsearchArea%29%3B%' +
        '29%3B%28%2E%5F%3B%3E%3B%29%3Bout%20body%3B%0A';
        $.ajax(url).then(function(response) {
            var features = osmxmlFormat.readFeatures(response,
                {featureProjection: projection});
            osmTransportSource.addFeatures(features);
        });
    }
});

var osmTransportVector = new ol.layer.Vector({
    source: osmTransportSource
});

また、クリックした機能から情報を取得できるポップアップ ウィンドウを作成することもできます。しかし、スクリプトと同じフォルダーに保存されている GEOJson でしか機能させることができませんでした。

/**Elements that make up the popup.*/
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');


/**Create an overlay to anchor the popup to the map.*/
var overlay = new ol.Overlay(({
    element: container,
    autoPan: true,
    autoPanAnimation: {
        duration: 250
    }
}));

...

/**Add a pointermove handler to the map to render the popup.*/
    map.on('click', function(evt) {
        var coordinate = evt.coordinate;
        var feature = map.forEachFeatureAtPixel(evt.pixel, 
            function(feature, layer) {
                return feature;
            }, null, function(layer) {
                return layer === districtLayer;
            });
        if(feature != undefined){
         content.innerHTML = feature.get('OTEIL'); //OTEIL is the name of a feature propertie in my GEOJson
         overlay.setPosition(coordinate);
         }
    });

問題は、OSM データで提供されているタグ情報を取得するにはどうすればよいかということです。次のようないくつかの Web ページで既に見ました: pic of popup with OSM tags , link to page。しかし、私はプログラミングの初心者であり、これが私の最初の Web ページ (およびスタック オーバーフローに関する最初の質問) であるため、スクリプトを理解できませんでした。したがって、回答する場合は、何をしなければならないかを詳しく説明してください。

4

0 に答える 0