简体   繁体   English

带有jQuery的bbox策略的OpenLayers 3动态矢量层

[英]OpenLayers 3 dynamical vector layer with bbox strategy without jQuery

I'm trying to create a simple map using JavaScript and OpenLayers 3 which should dynamically load OpenStreetMap XML data from Overpass API whenever the bounding box of the map changes. 我正在尝试使用JavaScript和OpenLayers 3创建一个简单的地图,每当地图的边界框发生变化时,这些地图应从Overpass API动态加载OpenStreetMap XML数据。 For this purpose I have created a map with a vector layer, and the source of this vector layer is a vector source. 为此,我创建了带有矢量层的地图,该矢量层的源是矢量源。 The loading strategy of this source is set to bbox. 该源的加载策略设置为bbox。 I have created a loader function, which is called whenever the bounding box changes. 我创建了一个加载器函数,只要边界框发生变化,就会调用该函数。 However, I could not figure out by now how to actually load the data and add it to the map. 但是,我现在还不知道如何实际加载数据并将其添加到地图中。

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

Basically, the question is: what should I put to the place marked with the question mark in the code above? 基本上,问题是:我应该在上面的代码中的问号处放什么? The examples I have found so far mostly use jQuery, which I am not using in my project, so I am looking for something which does not use jQuery. 到目前为止,我发现的示例大部分都使用jQuery,而我在项目中没有使用它,因此我正在寻找不使用jQuery的东西。 I know that OpenLayers 3 can load data from Overpass API without jQuery, however, the only examples I have found (and reproduced) use a fixed loading strategy to load all data once at the beginning instead of dynamically when the bounding box changes. 我知道OpenLayers 3可以在不使用jQuery的情况下从Overpass API加载数据,但是,我发现(并转载)的唯一示例使用固定的加载策略在开始时一次加载所有数据,而不是在边界框更改时动态加载。

basically $.ajax from jquery is a helper for the javascript xmlHttpRequest object. 基本上,jquery的$ .ajax是javascript xmlHttpRequest对象的帮助器。

You can use it without jquery: http://www.w3schools.com/xml/xml_http.asp 您可以在没有jquery的情况下使用它: http : //www.w3schools.com/xml/xml_http.asp

you can find lots if how to do on google about this (try it to load data out of openlayers 3 first) http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp 您可以找到很多关于如何在Google上进行此操作的方法(首先尝试将其从openlayers 3中加载数据) http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM