OpenLayers 3 动态向量层，带 bbox 策略，无 jQuery

Question

我正在尝试使用 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 加载数据，但是，我发现（并复制）的唯一示例使用固定加载策略在开始时加载所有数据而不是动态加载当边界框改变时。

Answer 1

基本上来自 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

OpenLayers 3 动态向量层，带 bbox 策略，无 jQuery

OpenLayers 3 dynamical vector layer with bbox strategy without jQuery

javascript

overpass-api

openlayers-3