Geek Answers Handbook

How can I dynamically load GeoJSON data based on map size in my OpenLayers 3.5.0 layer?

I am migrating from OpenLayers 3.2.0 to 3.5.0, and it’s hard for me to load GeoJSON data into my vector layer. I work, but I transform the geometry of the functions from my GeoJSON data source before adding them to my vector source.

Is there a way to make OpenLayers 3.5.0 an automatically applied conversion?

The data from my GeoJSON data source uses EPSG:4326, I believe that I need to re-engineer the geometries before EPSG:3857to display them on my map. The GeoJSON data source has forecast information in it crs, and my vector source also has a projection set. However, object geometries do not transform on their own.

I need to pass the borders of the visible area of ​​the map through the URL of my GeoJSON data source, I do not want to download all the data immediately. I have a loader function on my vector source that gets the current map scale and builds the URL for the request.

A sample of data is available from my GeoJSON source , it checks through linter, and I think this is reasonable.

Below is the current code I'm using.

var vectorFormat = new ol.format.GeoJSON();
var featureStyle = new ol.style.Style({
    image: new ol.style.Circle({
      radius: 5,
    fill: new ol.style.Fill(
      {color: 'rgba(255, 69, 0, 0.75)'}),
    stroke: new ol.style.Stroke(
      {color: 'rgba(255, 0, 0, 0.95)', width: 1})
    })
 });

var vectorSource = new ol.source.Vector({
    projection: new ol.proj.Projection({'code':'EPSG:3857'}),
    strategy: ol.loadingstrategy.bbox,
    loader: function(extent, resolution, projection) {
      var coordinate1 = ol.proj.transform([extent[0], extent[1]],
        'ESPG:3857', 'EPSG:4326')
      var coordinate2 = ol.proj.transform([extent[2], extent[3]],
        'ESPG:3857', 'EPSG:4326')
      var url = 'api/sites/geo/bounds/4326/' + coordinate1[1] 
        + ',' + coordinate1[0] + '/' + coordinate2[1] + ',' 
        + coordinate2[0] + "/";
        $.ajax({
            url: url,
            dataType: 'json'
        }).then(function(response) {
            var features = vectorFormat.readFeatures(response);
            var transformFn = ol.proj.getTransform(
              response.crs.properties.name, projection);
            for(index in features) {
                var feature = features[index];
                feature.getGeometry().applyTransform(transformFn);
            }
            vectorSource.addFeatures(features);
        });
    }
});

this.state.map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      }),
      new ol.layer.Vector({
        source: vectorSource,
          style: featureStyle
        })
     ],
     view: new ol.View({
        center: this.transformToOl(this.state.center),
        zoom: this.state.zoom
      })
});

Any help or pointers in the right direction would be greatly appreciated. :-D

+4
source share
1 answer

Yes, OpenLayers can do the reprogramming for you. You do not even need to set the projection to the source. The geometry will be automatically redesigned into the view projection.

var vectorSource = new ol.source.Vector({
  url: 'file.json',
  format: new ol.format.GeoJSON()
});

http://jsfiddle.net/h9zwjf88/

Update

, (. ol.format.GeoJSON.html#readFeatures):

var vectorSource = new ol.source.Vector({
  strategy: ol.loadingstrategy.bbox,
  loader: function(extent, resolution, projection) {
    $.ajax(url).then(function(response) {
      var features = format.readFeatures(response,
        {featureProjection: 'EPSG:3857'});
      vectorSource.addFeatures(features);
    });
  }
});

http://jsfiddle.net/h9zwjf88/1/

+7

More articles:


All Articles