如何使用bbox加载Open Layers 3 geojson矢量图层？

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在努力构建OL3矢量层BBOX策略加载。到目前为止，我可以轻松地使用有效的json语法加载Geojson文件，但这是一种策略。我的另一种方法是使用ol.ServerVector，这对我的理解很容易返回带有回调的Javascript，但是我无法使其工作。

工作简单的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 }）;

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

{"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回调，以将功能部件添加到矢量源中：

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加载Open Layers 3 geojson矢量图层？ 的全部内容， 来源链接： utcz.com/qa/397564.html

回到顶部