javascript 如何使用 bbox 加载 Open layer 3 geojson 矢量层？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26844412/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to load Open layers 3 geojson vector layer with bbox?
提问by piotr
I am struggling with building OL3 Vector layer BBOX strategy loading. So far I can easily load Geojson file with valid json syntax, however this is one time strategy. My another approach was to use ol.ServerVector which to my understading returns Javascript with callback, but I can't make it work.
我正在努力构建 OL3 Vector layer BBOX 策略加载。到目前为止，我可以使用有效的 json 语法轻松加载 Geojson 文件，但这是一次性策略。我的另一种方法是使用 ol.ServerVector，我的理解是使用回调返回 Javascript，但我无法使其工作。
Working simple Geojson layer:
工作简单的 Geojson 层：
var vectorSource = new ol.source.GeoJSON(
({
projection: 'EPSG:3857',
preFeatureInsert: function(feature) {
feature.geometry.transform('EPSG:4326', 'EPSG:3857');
},
url: 'geojson2.json'
}));
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: styleFunction});
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: styleFunction});
BBOX attempt (This is returning json while moving , however features are not loading to the map ) :
BBOX 尝试（移动时返回 json，但功能未加载到地图）：
var vectorSource = new ol.source.ServerVector({
format: new ol.format.GeoJSON(),
loader: function(extent, resolution, projection) {
var url = 'geojson2.php?p='+
extent.join(',');
$.ajax({
url: url
});
},
strategy: ol.loadingstrategy.bbox,
projection: 'EPSG:3857',
});
// callback ?
var loadFeatures = function(response) {
vectorSource.addFeatures(vectorSource.readFeatures(response));
};
JSON response example:
JSON 响应示例：
{"type":"FeatureCollection","features":[
{"type":"Feature","geometry":{"type":"Point","coordinates":[0,0]},"properties":{"label":"122.234-10/163"}},
{"type":"Feature","geometry":{"type":"Point","coordinates":[1,1],"properties":{"label":"132.222-1126"}}}
]}
采纳答案by erilem
You need to add an Ajax callback that adds the features to the vector source:
您需要添加一个 Ajax 回调，将功能添加到向量源：
var vectorSource = new ol.source.Vector({
format: new ol.format.GeoJSON(),
loader: function(extent, resolution, projection) {
var url = 'geojson2.php?p=' + extent.join(',');
$.ajax({
url: url,
success: function(data) {
vectorSource.addFeatures(vectorSource.readFeatures(data));
}
});
},
projection: 'EPSG:3857',
strategy: ol.loadingstrategy.bbox
});
回答by WiteCastle
To get this working with the newest version of OL3 (v3.7.0) I had to read the features using the GeoJSON format class.
为了使用最新版本的 OL3 (v3.7.0)，我必须使用 GeoJSON 格式类读取功能。
var geoJSONFormat = new ol.format.GeoJSON();
var vectorSource = new ol.source.Vector({
loader: function(extent, resolution, projection) {
var url = 'geojson2.php?p=' + extent.join(',');
$.ajax({
url: url,
success: function(data) {
var features = geoJSONFormat.readFeatures(data);
vectorSource.addFeatures(features);
}
});
},
strategy: ol.loadingstrategy.bbox
});
