Clever Geek Handbook

Openlayers 3.5 and GeoJSON

I have a problem with OpenLayers 3.5. I am trying to use a one-off loading strategy to grab features from a GeoJSON file. I am adding a new layer to the already created map. My code looks like this:

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

var pointsLayer = new ol.layer.Vector({
  source: vectorSource,
  style: styleFunc
});

that.map.addLayer(pointsLayer);
pointsLayer.setVisible(true);

However, nothing is displayed, and when I browse pointsLayer.getSource().getFeatures()

I find that no functions have been loaded.

So now I tried loading functions in a different way:

var that = this;

$.get(layerInfo.url, function(response) {

  var vectorSource = new ol.source.Vector({
    features: (new ol.format.GeoJSON()).readFeatures(response)
  });

  var pointsLayer = new ol.layer.Vector({
    source: vectorSource,
    style: styleFunc
  });

  that.map.addLayer(pointsLayer);
  pointsLayer.setVisible(true);
});

It works. I'm banging my head against the wall here. Does anyone have any idea? Many thanks!

+3


source to share


2 answers


This is how I am loading data now, "data" is my GJson



var wktTraffic = new ol.source.Vector({
});

var trafficLayer = new ol.layer.Vector({
    source: wktTraffic,
    style: new ol.style.Style({
            stroke: new ol.style.Stroke({
            color: 'blue',
            width: 5
        })
    })
});

function showData(data) {
    var format = new ol.format.WKT();
    var feature;
    $.each(data, function (i, link) {
        feature = format.readFeature(link.geom);
        wktTraffic.addFeature(feature);
    })
    console.log('done load map');
}
+3


source


Building on Juan Carlos' answer, and for future reference here, this is a function that creates a GeoJSON based layer using an Angular service $http

:

function buildStationsLayer() {

    var geoJsonUrl = config.stationsGeoDataUrl /*+ some parameters....*/ ;
    var source = new ol.source.Vector({});
    var format = new ol.format.GeoJSON();

    var stationsLayer = new ol.layer.Vector({
        source: source,
        style: stationStyleFunction //function that styles conditionally depending on resolution
    });

    //manually load the GeoJSON features into the layer
    $http.get(geoJsonUrl).success(function(data){
        for(var i=0; i<data.features.length; i++){
            var feature = format.readFeature(data.features[i]);
            source.addFeature(feature);
        }
    });

    return stationsLayer;
}

Still not happy that the documented way doesn't work. I don't understand why, as the official example uses source and format and it works:



var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: 'data/geojson/countries.geojson',
    format: new ol.format.GeoJSON()
  }),
  style: function(feature, resolution) {
    style.getText().setText(resolution < 5000 ? feature.get('name') : '');
    return styles;
  }
});

Source: http://openlayers.org/en/master/apidoc/ol.format.WKT.html

It also worked prior to the 3.5 change using ol.source.GeoJSON

.

0


source






More articles:


All Articles