如何用bbox加载打开图层3 geojson矢量图层？ [英] How to load Open layers 3 geojson vector layer with bbox?

问题描述

我正在努力构建OL3 Vector层BBOX策略加载。到目前为止，我可以轻松地使用有效的json语法加载Geojson文件，但这是一次性策略。我的另一种方法是使用ol.ServerVector，我的底层返回带回调的Javascript，但我不能使它工作。

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.

工作简单的Geojson层：

Working simple Geojson layer:

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尝试（这是在移动时返回json，但是功能没有加载到地图上）：

BBOX attempt (This is returning json while moving , however features are not loading to the map ) :

    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响应示例：

{"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"}}}
]}

推荐答案

您需要添加一个Ajax回调，将功能添加到矢量源：

You need to add an Ajax callback that adds the features to the vector source:

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

这篇关于如何用bbox加载打开图层3 geojson矢量图层？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！