[英]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.