Nous utilisons des cookies pour vous garantir la meilleure expérience sur notre site. Si vous continuez à utiliser ce dernier, nous considèrerons que vous acceptez l'utilisation des cookies. J'ai compris ! ou En savoir plus !.
banniere

Le portail francophone de la géomatique


Toujours pas inscrit ? Mot de passe oublié ?
Nom d'utilisateur    Mot de passe              Toujours pas inscrit ?   Mot de passe oublié ?

Annonce

Rencontres QGIS 2025

L'appel à participation est ouvert jusqu'au 19 janvier 2025!

#1 Fri 01 October 2010 09:36

Tony VINCENT
Participant actif
Lieu: Poitiers
Date d'inscription: 13 Jan 2010
Messages: 86

GeoExt + formulaire de recherche

Bonjour,

je tente d'utiliser un formulaire de recherche pour filtrer une couche Vector (WFS).
Je suis parti de l'exemple de GeoExt (search-form.html) http://dev.geoext.org/trunk/geoext/exam … -form.html.

Mais je n'arrive pas à interagir avec la couche de donnée et le paramètre passé dans le formulaire. Parce que je ne sais pas comment lier les deux ensembles.

J'arrive à appliquer un filtre et un style à la couche, mais après ....

Si quelqu'un avait des pistes, je suis preneur.
(Type de couche à utiliser, utilisation du filtre, création d'une fonction,...)


Voici mon code :

Code:

//// Règles d'affichage
    var rules = [
            new OpenLayers.Rule({
            title: "artisanale",
            filter: new OpenLayers.Filter.Comparison({
                type: OpenLayers.Filter.Comparison.EQUAL_TO,
                property: "tzv_p_id",
                value: 5
            }),
            symbolizer: {
                graphicName: "circle",
                pointRadius: 4,
                fillColor: "#cccccc", //// Couleur de remplissage
                strokeColor: "#666666", //// Couleur du filet
                strokeWidth: 1
                }
            })
        ];


        //// Couche Vector
        layerVector = new OpenLayers.Layer.Vector("Vocations",
        {
            strategies: [
                new OpenLayers.Strategy.Fixed() 
            ],
              protocol: new OpenLayers.Protocol.HTTP({
                   url: wms_server_url,
                   params: {
                        format: "WFS",
                        service: "WFS",
                        request: "GetFeature",
                        srsName: "EPSG:27582",
                        version: "1.0.0",
                        typename : 'vocations'
                   },
                   format: new OpenLayers.Format.GML()
              }),
              styleMap:new OpenLayers.StyleMap(
                new OpenLayers.Style({}, {rules: rules})
              )
        },
        {
            extractAttributes:true,
            displayInLayerSwitcher: true,  
            visibility: true
        });

        ////
        map.addLayers([layerVector]);

la suite :

Code:

   var protocol = new OpenLayers.Protocol({
        read: function(options) {
            var f; html = [];

           /* f = options.filter;
            html.push([f.CLASS_NAME, ",", f.type, "<br />"].join(" "));

            f = options.filter.filters[0];
            html.push([f.CLASS_NAME, ",", f.type, ",",
                       f.property, ":", f.value, "<br />"].join(" "));

            f = options.filter.filters[1];
            html.push([f.CLASS_NAME, ",", f.type, ", ",
                       f.property, ": ", f.value].join(" "));

            Ext.get("filter").update(html.join(""));*/

            
            f = options.filter.filters[0];    

            layerVector.refresh();
            //layerVector.redraw();
            
                  //// Pour test
            alert (f.value);
        }

    });


   formPanel = new GeoExt.form.FormPanel({
        border: true,
        width: 300,
        height: 200 ,
        floating: true,
        x: 615,
        y: 210,
        protocol: protocol,
        items: [{
            xtype: "textfield",
            name: "tzv_p_id",
            value: "4",
            fieldLabel: "id de la vocation"
        }],
        listeners: {
            actioncomplete: function(form, action) {
                // this listener triggers when the search request
                // is complete, the OpenLayers.Protocol.Response
                // resulting from the request is available
                // through "action.response"
            }
        }
    });

    formPanel.addButton({
        text: "search",
        handler: function() {
            // trigger search request, the options passed to doAction
            // are passed to the protocol's read method, so one
            // can register a read callback here
            var o = {
                callback: function(response) {
                }
            };
            this.search(o);
        },
        scope: formPanel
    });

    formPanel.render("formpanel");

Dans la variable "protocole", je récupère bien la valeur saisi dans le formulaire. Mais je ne sais pas comment l'appliquer à la règle et actualiser ma couche vector.


Merci de votre aide.


Tony

Hors ligne

 

#2 Tue 05 October 2010 22:25

Yves
Membre du bureau
Lieu: Aix-les-Bains
Date d'inscription: 22 Mar 2006
Messages: 9869
Site web

Re: GeoExt + formulaire de recherche

Bonsoir Tony,

Peut-être que ma réponse ne te conviendra pas mais elle reste une stratégie pertinente dans certain cas. Le standard WFS propose la possibilité de filtrer les données côté serveur via un filtre passé en paramètre.

Le paramètre à ajouter dans l'url est FILTER= et son contenu est un filtre écrit en XML (oui je sais mais bon ...) et la syntaxe est définie dans le standard FE. Exemple :

Filter=<Filter><PropertyIsNotEqualTo><PropertyName>NAME</PropertyName>
<Literal>Digby</Literal></PropertyIsNotEqualTo></Filter>


En savoir plus : http://mapserver.org/ogc/filter_encodin … -mapserver

Le site de l'OGC aussi propose un document intéressant sur FE wink

Y.


Yves Jacolin, bénévole de l'association GeoRezo.net, agit au nom et pour le compte de l'association - Partageons ce qui nous départage !!  - GeoRezo vous aide ? Aidez GeoRezo !

Hors ligne

 

#3 Thu 07 October 2010 17:22

Tony VINCENT
Participant actif
Lieu: Poitiers
Date d'inscription: 13 Jan 2010
Messages: 86

Re: GeoExt + formulaire de recherche

Bonjour,

Merci Yves pour ta et tes réponses.
Parce que tu donnes toujours une solution ou une piste qui me permet d'avancer toujours un peu plus.


J'ai modifié mon code comme ceci, en déplaçant la création de ma couche ici  :

Code:

    var protocol = new OpenLayers.Protocol({
        read: function(options) {
            var f; html = [];
            
            //// Récuperation des variable du formulaire
            f = options.filter.filters[0];
            
            //// Création de la couche
            var layerVector = new OpenLayers.Layer.Vector("Vocaton",
            {
                strategies: [
                    new OpenLayers.Strategy.Fixed() 
                ],
                protocol: new OpenLayers.Protocol.WFS({
                    url: "http://xxxxxxxxxxx?VERSION=1.0.0&SERVICE=WFS&REQUEST=GetFeature&typename=za&Filter=<Filter><PropertyIsEqualTo><PropertyName>tzv_p_id</PropertyName><Literal>"+f.value+"</Literal></PropertyIsEqualTo></Filter>",
                    featureType: "za"
                })
            },
            {
                extractAttributes:true,
                displayInLayerSwitcher: true,  
                visibility: true
            });    
            
            //// Ajout de la couche à la carte
            map.addLayer(layerVector);

        }
    });

Mais je ne vois toujours pas le résultat s'afficher sur la carte.

Dans firebug, je vois bien la requête qui est envoyée. Je la test dans une fenêtre de mon navigateur et j'ai bien comme retour le fichier XML et le filtre qui fonctionne.

Alors pourquoi, mais point ne s'affiche pas sur la carte ????

Bon, je continu à chercher.


Tony

Hors ligne

 

#4 Thu 07 October 2010 19:22

Yves
Membre du bureau
Lieu: Aix-les-Bains
Date d'inscription: 22 Mar 2006
Messages: 9869
Site web

Re: GeoExt + formulaire de recherche

Bonsoir,

Rapidement : il me semble qu'une couche vecteur prend un protocole et un format pour définir la récupération des données.

Dans le cas d'un service WFS le format est GML.

Y.


Yves Jacolin, bénévole de l'association GeoRezo.net, agit au nom et pour le compte de l'association - Partageons ce qui nous départage !!  - GeoRezo vous aide ? Aidez GeoRezo !

Hors ligne

 

#5 Fri 08 October 2010 09:34

Tony VINCENT
Participant actif
Lieu: Poitiers
Date d'inscription: 13 Jan 2010
Messages: 86

Re: GeoExt + formulaire de recherche

Bonjour,

oui c'est tout à fait cela Yves.

J'ai refais le test en modifiant ma couche vector et maintenant mes points apparaissent bien sur la carte.
Ensuite j'arrive à appliquer un style, en fonction de la valeur envoyée par le formulaire.

Code:

var protocol = ...

...
            //// Création de la couche
            var layerVector = new OpenLayers.Layer.Vector("Vocaton",
            {
                strategies: [
                    new OpenLayers.Strategy.Fixed() 
                ],
                protocol: new OpenLayers.Protocol.HTTP({
                    url: wms_server_url_iaat+"VERSION=1.0.0&SERVICE=WFS&REQUEST=GetFeature&typename=za&Filter=<Filter><PropertyIsEqualTo><PropertyName>tzv_p_id</PropertyName><Literal>"+f.value+"</Literal></PropertyIsEqualTo></Filter>",
                    format: new OpenLayers.Format.GML(),
                    singleTile: true
                }),
                styleMap:new OpenLayers.StyleMap(
                    new OpenLayers.Style({}, {rules: rules})
                )
            },
            {
                extractAttributes:true,
                displayInLayerSwitcher: true,  
                visibility: true
            });    
            
            //// Ajout de la couche à la carte
            map.addLayer(layerVector);

...

Donc là, il fait bien se que je lui demande. Il m'ajoute une couche à chaque fois que je valide mon formulaire.
Je voudrais arriver à soit rafraichir la couche, ou bien la supprimer pour la rajouter.

Pour avoir qu'une seul couche avec le résultat voulu.

J'ai essayé la ceci :

Code:

layerVector.refresh();

Mais la couche ne s'actualise pas.


Tony

Hors ligne

 

Pied de page des forums

Powered by FluxBB