Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
571 views
in Technique[技术] by (71.8m points)

javascript - How to load Open layers 3 geojson vector layer with bbox?

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.

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

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 response example:

{"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"}}}
]}
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

To get this working with the newest version of OL3 (v3.7.0) I had to read the features using the GeoJSON format class.

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...