Accueil » Créer un grid en relation avec des données vecteurs grâce à GeoExt

Créer un grid en relation avec des données vecteurs grâce à GeoExt

Ecrit par Arnaud le 6/04/2009.
| |

résumé: 
GeoExt est une librairie javascript couplant OpenLayers et Ext. Nous apprendrons dans ce tutoriel à enrichir la librairie existante et par la même occasion je vous présenterai un nouvel objet, GridPanelFeature
pré-requis: 

- Disposer de la librairie GeoExt

Introduction

GeoExt a pour objectif de fournir une bibliothèque de fonctions couplant OpenLayers pour la partie cartographique et Ext pour la partie IHM (billet blog). Même si nous en sommes encore aux prémices, les fonctionnalités qu'il est possible d'imaginer en consultant les démos d'Ext et les exemples déjà disponibles (Tree, MapPanel et PopUp) laissent à penser que c'est de cette librairie que s'inspireront nos applications cartographiques de demain.

Déclarons les fichiers nécessaires

Commençons tout d'abord par la télécharger (téléchargement par SVN - révision 351 au moment où j'ai réalisé ce script) et télécharger la nouvelle classe GridPanelFeature (ou en version compactée 1,9ko) .

Maintenant appelons les différents scripts nécessaires :

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>OpenLayers map preview</title> 
 
	<!-- Lib Ext -->		
	<link rel="stylesheet" type="text/css"	href="../../lib/js/ext-2.2/resources/css/ext-all.css" />
	<script type="text/javascript"	src="../../lib/js/ext-2.2/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="../../lib/js/ext-2.2/ext-all.js"></script>
	<!-- Lib OL -->
	<script src="../../lib/js/geoext/openlayers/lib/OpenLayers.js" type="text/javascript"></script>
	<!-- Lib GeoExt -->
    	<script type="text/javascript" src="../../lib/js/geoext/geoext/lib/GeoExt.js"></script>	
        <script type="text/javascript" src="../../lib/js/geoext/geoext/lib/GridPanelFeature.js"></script>		
    </head>

Ici nous avons appelé notre fichier JavaScript GridPanelFeature.js directement dans la page Html. Nous aurions pu également le déclarer dans la variable jsfiles du fichier GeoExt.js (geoext/geoext/lib) :

var jsfiles = new Array(
        "GeoExt/data/FeatureRecord.js",
        "GeoExt/data/FeatureReader.js",
	"GeoExt/data/FeatureStore.js",
	"GeoExt/data/FeatureStoreMediator.js",
        "GeoExt/data/LayerRecord.js",
        "GeoExt/data/LayerReader.js",
        "GeoExt/data/LayerStore.js",
        "GeoExt/data/LayerStoreMediator.js",
        "GeoExt/data/ProtocolProxy.js",
        "GeoExt/widgets/MapPanel.js",
        "GeoExt/widgets/Popup.js",
        //Personnal JavaScript file
	"GeoExt/grid/GridPanelFeature.js"
);

Création de notre objet GridPanelFeature

La création de l'objet GridPanelFeature se fait exactement de la même façon que l'objet GridPanel de Extjs à ceci près qu'il a besoin d'un store particulier, featureStore. Ce dernier n'est pas encore disponible dans la version svn car encore en discussion.

Passons maintenant à notre objet :

Layer = new OpenLayers.Layer.GML('Disaster','./data/YourGMLLayer.gml');
map.addLayer(Layer);
 
var featureStore = new GeoExt.data.FeatureStore({	
 	fields: [
 		{name: 'ID', type: 'int'}
 		,{name: 'NAME', type: 'string'}
 		,{name: 'REGION', type: 'string'}	
 		,{name:'idFeature', type:'int'}
 		,{name: 'Y_2004', type: 'int'}
 	],
 	layer : Layer
});
 
var olGrid = new GeoExt.grid.GridPanelFeature({
	store: featureStore,
	width:300,
	columns: [{
		 header: "Pays",
		 width:100,
		 dataIndex: "NAME"
		},{
		 header: "Population touchée",
		 width:170,
		 dataIndex: "Y_2004"
	}],//EOF columns
});

Comme souligné précédemment, le store inclut dans le GridPanelfeature est un peu particulier, il prend directement en argument le fichier contenant les entités vecteurs que l'on souhaite afficher. La méthode createLayer va ensuite créer la couche comme cela se fait habituellement dans OpenLayers.

Démo

GridPanelFeature.png

Retour en haut

Bonjour, je cherche à entrer

Par R. Burton (non vérifié), le mer, 09/09/2009 - 11:03pm.

Bonjour,

je cherche à entrer en contact avec vous pour une question relative à du webmapping en vue d'un projet chez nous.

Merci
Roger Burton

Bonsoir, Auriez-vous une

Par Arnaud, le jeu, 09/10/2009 - 8:20pm.

Bonsoir,

Auriez-vous une adresse mail à laquelle nous puissions vous contacter?

Cordialement

Arnaud

Bonjour, En testant la même

Par Arno (non vérifié), le ven, 06/26/2009 - 9:12am.

Bonjour,
En testant la même démo sur mon serveur, j'ai un problème remonté par Firebug:

Ext.StatusBar is not a constructor
pour la ligne id: 'basic-statusbar'

Le problème vient de feaData.js
La version de GeoExt est la 0.5 et OpenLayers 2.8

comment puis-je intervenir pour contourner ce problème

Merci
Arno

En supprimant cette ligne

Par Arnaud, le ven, 06/26/2009 - 11:50am.

En supprimant cette ligne dans le constructeur du gridPanelFeature cela devrait fonctionner :

 
  bbar: new Ext.StatusBar({
   defaultText: '',
   id: 'basic-statusbar'
 })

Je m'en servais à un moment mais plus dans cette version de l'application

L'application fonctionne

Par arno (non vérifié), le lun, 06/29/2009 - 2:59pm.

L'application fonctionne maintenant.

Cependant, en testant un GML avec des caractères spéciaux, les données retournées dans le gridPanelFeature affichent des points d'interrogation.

Mon GML, affiche mes attributs convenablement en UTF-8
Mon HTML est défini en UTF-8
et je défini le charset en UTF-8 pour la ligne de mon featdata.js

Rien ne change mes attributs ne s'affichent pas correctement.

Une astuce?

Hum étant donné que le

Par Arnaud, le lun, 06/29/2009 - 8:08pm.

Hum étant donné que le fichier GML est manipulé par le javascript c'est peut être de là que vient le problème.
Essaye de faire un regex ou alors un tableau de correspondance qui remplacent les caractères spéciaux par leur équivalent en HTML.
Ce type de tableau se trouve facilement sur le net.
Cela devrait arranger les choses.

Il s'agissait bien des

Par arno (non vérifié), le mar, 06/30/2009 - 9:45am.

Il s'agissait bien des caractères stockés au sein du GML.
Une conversion m'a permis d'afficher correctement les données attributs.
Merci encore Arnaud

De rien entre arnaud faut

Par Arnaud, le mar, 06/30/2009 - 11:44am.

De rien entre arnaud faut bien s'aider :)