Loading source vector (Features won't show?)

I have a function that loads a vector source from a local geojson file.

Problem is, I need it to be remote for one of the layers, yet the features never show despite loading the source properly and the console.logs showing me it did indeed fetch them...plus a weird thing happens if I omit the line: "this.layerSwitcherGroup.getLayers().push(this.pointsLayer);" from the code. When that line is commented, the loader never runs (no console.logs appear from inside it).

Note: I am editing the crs only temporarily until the file in the server has the crs updated to a non-legacy one. I did the same when I tested the geojson file from the server with local function by downloading it and editing the crs part. Local function worked, but remote doesn't.

addPoints: function() {
    this.addPointInteraction();

    this.pointsLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
            /**
             * The function is responsible for loading the features and adding them to the source.
             * ol.source.Vector sources use a function of this type to load features.
             * @param extent - the area to be loaded
             * @param resolution - the resolution (map units per pixel)
             * @param projection - ol.proj.Projection for the projection as arguments
             *
             *  this (keyword): within the function is bound to the ol.source.Vector it's called from.
             */
            loader: function(extent, resolution, projection) {
                console.log('vector Loader...');

                var url = //can't show the url here;
                $.ajax({
                    url: url,
                    context: this,
                    success: function(json) {
                        console.log('Data: ', json);

                        json.data.crs = {
                            "type": "name",
                            "properties": {
                                "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
                            }
                        };

                        console.log('changed CRS: ', json);

                        var features = new ol.format.GeoJSON().readFeatures(json.data);

                        console.log('this inside loader: ', this);

                        this.addFeatures(features);
                    }
                });
            }
        }),
        style: this.defaultPointStyleFunction
    });

    this.layerSwitcherGroup.getLayers().push(this.pointsLayer);

    this.pointsLayer.getSource().once("change", function(evt) {
        console.log('pointsLayer once');
        //console.log('pointsLayer changed: ', this.pointsLayer);
        //console.log('pointsLayer source: ', this.pointsLayer.getSource());
        console.log('pointsLayer features: ', this.pointsLayer.getSource().getFeatures());
        //console.log('current layerSwitcherGroup layers: ', this.layerSwitcherGroup.getLayers());

        this.hidePoints();
        this.onSetSelection(1);
    }, this);

    this.currPointId = null;
},

Every function that is listed above works with local mode, so I'm not quite sure what am I doing wrong with the remote loader...

回答1:

So all I was missing was adding {featureProjection: 'EPSG:3857'} to readFeatures so that the features would be projected in the map view correctly... (since that is the map projection)

Fixed it by replacing

var features = new ol.format.GeoJSON().readFeatures(json.data);

With

var features = format.readFeatures(json.data, {featureProjection: 'EPSG:3857'});

Found it through https://stackoverflow.com/a/32455939/2340999 and the features are showing in the proper positions now!

Thank you for all the suggestions!

回答2:

Change this

var features = new ol.format.GeoJSON().readFeatures(json.data);

to this

var features = (new ol.format.GeoJSON()).readFeatures(json.data);

回答3:

I have done this using the example available here: http://openlayersbook.github.io/ch11-creating-web-map-apps/example-03.html

Not sure if that helps.