1

I'm trying to make a search engine in OpenLayers 3 by Geoserver features and WFS.

To do this should I use a CQL filter?

This is my connection code if geoserver mediates OL3 would you be so kind as to show me an example of CQL from OpenLayers.

     vectorWFS = new ol.source.Vector({
            loader: function(extent,resolution,projection){
                $.ajax('http://localhost:8080/geoserver/wfs',{
                    type: 'GET',
                    data:{
                        service:'WFS',
                        version:'1.1.0',
                        request:'GetFeature',
                        typename:'Botanico:Urbana',
                        srsname:'EPSG:3857',
                        outputFormat:'text/javascript'
                    },
                    dataType:'jsonp',
                    jsonpCallback:'callback:loadFeatures',
                    jsonp:'format_options'
                });
            }

        });

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

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

I found the solution :

        var geojsonFormat ="";
        var vectorSource = "";
        var cqlFilter = 'INE_MUN=' + $("#bucador").val() ;  
        alert (cqlFilter);
        var geojsonFormat = new ol.format.GeoJSON();
        var vectorSource = new ol.source.Vector({
          loader: function(extent, resolution, projection) {
            var url = 'http://localhost:8080/geoserver/wfs?service=WFS&' +
                'version=1.1.0&request=GetFeature&typename=Botanico:Urbana&' +
                'outputFormat=text/javascript&format_options=callback:loadFeatures&'                           

                  + 'CQL_FILTER={{CQLFILTER}}&' +'&srsname=EPSG:3857';

            // Usamos jsonp:false para prevenir que JQuery cuando se cargue 


            var url2 = url.replace('{{CQLFILTER}}', cqlFilter);
            $.ajax({url: url2, dataType: 'jsonp', jsonp: false});
          },
          strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({
            maxZoom: 22
          }))
        });

        window.loadFeatures = function(response) {
          vectorSource.addFeatures(geojsonFormat.readFeatures(response));
        };

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.