Recherche rapide et zoom sur entité

**Geoff** · 17/09/2012, 16h18

Bonjour

Je développe une application à l'aide de GeoExt, Geoserver et Postigs. J'implémente un petit module classique permettant de faire une recherche rapide en entrant un identifiant de secteur et lorsque l'utilisateur exécute la requête, j'aimerais qu'il y ait un zoom sur le secteur avec sélection de celui-ci.

Pour arriver à cela, j'utilise les fonctions OpenLayers.Bounds et zoomToExtent d'OL. Actuellement, j'arrive sans problème à exécuter la requête php permettant de retrouver la Bbox du secteur voulu par l'utilisateur. Il me reste à faire passer les paramètres (Xmin, Ymin, Xmax, Ymax) retournés par le script Php et exécuter le zoomToExtent. Et c'est bien là que je coince. Comment puis-je faire pour utiliser ces paramètres dans mon code Javascript?

J'ai pour l'instant le code suivant :

Le fichier Php

function searchgrower()
{

include("dbconnect.php") ;
$pg_connexion=connect_pg();
$SectorId = $_POST['SectorId'];
$query = "SELECT ST_EXTENT(transform(public.sector.the_geom,4326)) FROM public.sector WHERE sectorid='".$SectorId."'";
$result = pg_query($query);

while ($row = pg_fetch_array($result)) {
$data[] = $row;
$sousChaine = explode(",",$data[1]);
echo $data[0]." ".$sousChaine[0]." ".$sousChaine[1]." ".$data[2];
}

pg_free_result($result);
pg_close($pg_connexion);
}

Exemple de résultat :
177.4592 -17.6761 177.5812 -17.5884

Côté Javascript

1. Le textbox et le bouton en Extjs (ils sont ajoutés dans la toolbar)

sectorItem = new Ext.form.NumberField({
fieldLabel: 'SectorId',
maxLength: 20,
anchor : '95%',
});

searchButton = new Ext.Button({
tooltip: 'Informations sur une parcelle / zone géographique',
tooltipType: 'qtip',
text: 'OK',
enableToggle: true,
handler: search
});

2. un dataStore pour communiquer avec le fichier php où est définie la requête

varDataStore = new Ext.data.Store({
id: 'varDataStore',
autoLoad: 'true',
proxy: new Ext.data.HttpProxy({
url: 'php/request.php',
method: 'POST'
}),
baseParams:{task: "SEARCHGROWER"},
});

3. La fonction exécutée lors du click sur le bouton

function search(){

varDataStore.baseParams = {
task: 'SEARCHGROWER',
SectorId: sectorItem.getValue(),
};
varDataStore.reload();

var geographic = new OpenLayers.Projection("EPSG:4326");
var mercator = new OpenLayers.Projection("EPSG:900913");
var bounds = new OpenLayers.Bounds(VARIABLES RENVOYEES PAR SCRIPT PHP).transform(geographic, mercator);
mapPanel.map.zoomToExtent(bounds);
}

Les paramètres à être pour la fonction var bounds = new OpenLayers.Bounds(....) me posent donc un problème

Quelqu'un a t'il un retour d'expérience par rapport à cela? Il me semble que c'est relativement simple d'un point de vue théorique mais ça fait déjà quelques temps que je suis dessus

Merci beaucoup

Geoffroy

**Barbapapa** · 17/09/2012, 16h49

Bonjour,
Quand tu charge le store pour tes zones, pourquoi ne pas rajouter les champs xMin, Ymin... dans le store.
Ainsi, tu n'as pas besoin de requêter le serveur une 2ème fois pour faire le zoom.
Tu récupère le record sélectionné :
var rec= ma_combo_box.getStore().getById(ma_combo_box.getVa lue())
et après rec.data["xMin"]
...

**Geoff** · 18/09/2012, 16h15

Bonjour,

J'ai suivi ta méthode avec l'intégration des champs dans le datastore. j'ai utilisé un JsonReader, ce qui donne le datastore suivant

varDataStore = new Ext.data.Store({
id: 'varDataStore',
autoLoad: 'true',
proxy: new Ext.data.HttpProxy({
url: 'php/request.php',
method: 'POST'
}),
baseParams:{task: "SEARCHGROWER"},
reader: new Ext.data.JsonReader({id: 'id',
// we tell the datastore where to get his data from
root: 'Bbox',

},[
{name: 'Xmin', type: 'float', mapping: 'Xmin'},
{name: 'Ymin', type: 'float', mapping: 'Ymin'},
{name: 'Xmax', type: 'float', mapping: 'Xmax'},
{name: 'Ymax', type: 'float', mapping: 'Ymax'}
]),

});

Ensuite dans la fonction sous le clic, j'ai été rechercher les variables Xmin, Xmax, etc. définies et les utilise pour mon OpenLayers.Bounds

varDataStore.load({
scope: this,
callback: function (records, operation, success) {
Xmin = varDataStore.getAt(0).get('Xmin');
Ymin = varDataStore.getAt(0).get('Ymin');
Xmax = varDataStore.getAt(0).get('Xmax');
Ymax = varDataStore.getAt(0).get('Ymax');
}
});

var geographic = new OpenLayers.Projection("EPSG:4326");
var mercator = new OpenLayers.Projection("EPSG:900913");
boundaries = new OpenLayers.Bounds(Xmin, Ymin, Xmax, Ymax).transform(geographic, mercator);
mapPanel.map.zoomToExtent(boundaries);

J'ai testé cela et ça marche. Je saisis un identifiant et il zoom sur sa Bbox.
Malgré cela, je pense bien qu'il y a des méthodes bien plus simple en utilisant par exemple GeoExt.data.FeatureStore au lieu d'un simple Ext data store. Si jamais quelqu'un a un retour sur ce point, je suis preneur

A bientôt

Geoffroy