0

JavaScript と OpenLayers 3 を使用して、マップの境界ボックスが変更されるたびに Overpass API から OpenStreetMap XML データを動的にロードする単純なマップを作成しようとしています。この目的のために、ベクター レイヤーを使用してマップを作成しました。このベクター レイヤーのソースはベクター ソースです。このソースのロード方法は bbox に設定されています。境界ボックスが変更されるたびに呼び出されるローダー関数を作成しました。ただし、実際にデータを読み込んでマップに追加する方法は今のところわかりません。

var vectorSource = new ol.source.Vector({
    format: ol.format.OSMXML(),
    loader: function(extent, resolution, projection) {
        var epsg4326 = ol.proj.transformExtent(extent, projection, 'EPSG:4326');
        var bbox = epsg4326.join(',');
        var url = 'http://overpass-api.de/api/interpreter?data=(node["light_source"](' + bbox + ');way["light_source"](' + bbox + ');relation["light_source"](' + bbox + ');>;);out meta;';

        ?
    },
    strategy: ol.loadingstrategy.bbox
});

var vector = new ol.layer.Vector({
    source: vectorSource
});

var raster = new ol.layer.Tile({
    source: new ol.source.OSM()
});

var map = new ol.Map({
    layers: [raster, vector],
    target: document.getElementById('map'),
    controls: ol.control.defaults(),
    view: new ol.View({
        center: ol.proj.transform([26.69075, 58.3743], 'EPSG:4326', 'EPSG:3857'),
        maxZoom: 19,
        zoom: 18
    })
});

基本的に、問題は、上記のコードの疑問符でマークされた場所に何を配置すればよいかということです。これまでに見つけた例のほとんどは、私のプロジェクトでは使用していない jQuery を使用しているため、jQuery を使用しないものを探しています。OpenLayers 3 が jQuery を使用せずに Overpass API からデータをロードできることは知っていますが、私が見つけた (そして再現した) 唯一の例では、バウンディング ボックスが変更されたときに動的にではなく、最初にすべてのデータをロードするという固定のロード戦略を使用しています。

4

1 に答える 1

0

基本的に、jquery の $.ajax は、javascript xmlHttpRequest オブジェクトのヘルパーです。

jquery なしで使用できます: http://www.w3schools.com/xml/xml_http.asp

これについてGoogleで行う方法があれば、たくさん見つけることができます(最初にopenlayers 3からデータをロードしてみてください) http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp

于 2015-07-28T09:07:47.377 に答える