[GIS] WFS from geosever very slow to load in openLayers3

geoserverjavascriptopenlayerswfs

I originally posted this question about trying to load a geoJSON with openLayers3: geojson very slow to load in openLayers3.

Based on a suggestion given in the post I'm now loading the layer in as a WFS from geoserver. However the response time is still really slow. It will eventually load in firefox but won't even load in Chrome – I get the 'He's dead Jim' message. I'm wondering about limiting the zoom level at which the data draws (only once you get into to a fairly zoomed in view), and also what else I might be able to do to improve the response time. Here is my code:

sourceVector = new ol.source.Vector({
    loader: function(extent) {
        $.ajax('http://52.24.37.126:8080/geoserver/wfs',{
            type: 'GET',
            data: {
                service: 'WFS',
                version: '1.1.0',
                request: 'GetFeature',
                typename: 'Iada_workspace:parcels',
                srsname: 'EPSG:3857',
                outputFormat: 'application/json',
                bbox: extent.join(',') + ',EPSG:3857'
                },
            }).done(loadFeatures);
        },
        strategy: ol.loadingstrategy.tile(new ol.tilegrid.createXYZ({
            maxZoom: 19
            })),
    });

window.loadFeatures = function(response) {
    geoJSON = new ol.format.GeoJSON();
    sourceVector.addFeatures(geoJSON.readFeatures(response));
    };

var layerVector = new ol.layer.Vector({
    source: sourceVector,
    style: new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'rgba(0, 0, 255, 1.0)',
            width: 2
            })
        })
    });

var map = new ol.Map({
    layers: [new ol.layer.Tile({source: new ol.source.OSM()}), layerVector],
    target: document.getElementById('map'),
    view: new ol.View({
                //projection:projection
                center: ol.proj.transform(
                    [-116, 42], 'EPSG:4326', 'EPSG:3857'),
                zoom: 6
        })
    });

Best Answer

For anyone who is interested, I solved this by setting the minResolution and maxResolution properties for the vector layer. Works perfectly.

var layerVector = new ol.layer.Vector({
    source: sourceVector,
    minResolution: 0,
    maxResolution: 4,
    style: new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'rgba(25, 163, 255, 1.5)',
            width: 1
            })
        })
    });
Related Question