0

I have a function to search feature in my layer and zoom, highlight to search results. But my data is quite large with more than 1 million lines so it takes quite a while for a result to be displayed.

I use WFS to fetch data and having difficulty because the data is too large (more than 1 million lines).

Is there a way I can search results faster?

This is my code for search function:

//Search function
    //highlight search result vector
    var highlightFeatureSearch = new ol.layer.Vector({
        style: new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'rgba(255, 255, 255, 0.6)',
            }),
            stroke: new ol.style.Stroke({
                color: '#00BFFF',
                width: 2,
            }),
        }),
    source: new ol.source.Vector(),
    map: map
    });
    //
    var sothuaMap = document.getElementById('sothuaMap');
    var sotoMap = document.getElementById('sotoMap');
    var phuongMap = document.getElementById('phuongMap');
    var quanMap = document.getElementById('quanMap');
    var searchButton = document.getElementById('search');
    var resultSpan = document.getElementById('span');
    var parsers = new ol.format.GeoJSON({featureProjection: map.getView().getProjection()});

    function searching(sothuaGet, sotoGet, phuongMap, quanMap) {
        resultSpan.innerHTML = 'Searching...';
        fetch('http://localhost:8081/geoserver/vietnam/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=vietnam%3Ahtgovap&maxFeatures=97589&outputFormat=application%2Fjson&q=' + sothuaGet)
          .then(function (response) {
            return response.json();
          })
          .then(function (json) {
            var results = json.features;
            // console.log(results);
            if (results && results.length > 0) {
                for (let i = 0, ii = results.length; i < ii; i++) {
                    const result = results[i];
                    if(result){
                        var props = result.properties; //get properties
                        const geometry = parsers.readGeometry(result.geometry);//parser geo to vector
                        // console.log(geometry);
                        var quan = props.quanhuyen;
                        var phuong = props.xaphuong;
                        var sothua = props.shthua;
                        var soto = props.shbando;
                        var dientich = props.dientich;
                        var doan = props.doan;
                        if(sothua == sothuaGet && soto == sotoGet &&  phuong == phuongMap && quan == quanMap){
                            setProjection(sothua,soto,dientich,geometry,quan,phuong,doan);
                            return;
                        }
                    }
                }
            }
            setProjection(null, null, null);
          });
      }

    function setProjection(sothua, soto, dientich, geometry, phuong, quan, doan){
        if(sothua == null || soto == null || phuongMap == null){
            resultSpan.innerHTML = 'Empty, try again...!'
            return
        }
        resultSpan.innerHTML = "<h5>QH : </h5><p>" + quan
                                + "</p><h5>P: </h5><p>" + phuong
                                + "</p><h5>ST : </h5><p>" + sothua
                                + "</p><h5>STT : </h5><p>" + soto
                                + "</p><h5>DT : </h5><p>"+ dientich + " m<sup>2</sup>"
                                + "</p><h5>DA : </h5><p>"+ doan + "</p>"            
        // overlayPopup.show(resultSpan.innerHTML);
        //highlight results
        highlightFeatureSearch.getSource().clear();
        highlightFeatureSearch.getSource().addFeature(new ol.Feature(geometry));
        
        map.getView().fit(geometry, {duration: 350});//zoom to result
    }

    searchButton.onclick = function (event) {
        if(sotoMap.value != '' && sothuaMap.value != '' && phuongMap.value != '' && quanMap.value != ''){
            searching(sothuaMap.value, sotoMap.value, phuongMap.value, quanMap.value);
            // event.preventDefault();
        }else{
            alert('Do not empty');
        }
        event.preventDefault();
    };

Update:

I changed WFS link, maxFeature to PropertyName of the data columns that I need to get, time for search is significantly reduced:

http://localhost:8081/geoserver/vietnam/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=vietnam%3Ahtgovap&PropertyName=shthua,shbando,xaphuong,quanhuyen,dientich,doan,geom&outputFormat=application%2Fjson&q=

But still pretty slow. So how can i search faster when user enters value using cql_filter (TomazicM suggestion).

8
  • Welcome to GIS SE! We're a little different from other sites; this isn't a discussion forum but a Q&A site. Your questions should as much as possible describe not just what you want to do, but precisely what you have tried and where you are stuck trying that. Please check out our short tour for more about how the site works
    – Ian Turton
    Sep 6, 2022 at 9:28
  • I'm updated my question. Thanks you.
    – Jayzz
    Sep 6, 2022 at 9:43
  • what sort of query do you send?
    – Ian Turton
    Sep 6, 2022 at 9:57
  • 1
    WFS service request has no such parameter as q. If you want to filter features server side, you have to use cql_filter WFS parameter.
    – TomazicM
    Sep 6, 2022 at 11:23
  • 1
    Type "wfs cql_filter" in GIS search box. There are plenty of examples/solved problems.
    – TomazicM
    Sep 7, 2022 at 6:41

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.