IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

affichage données vecteur GeoEXT/OpenLayers


Sujet :

JavaScript

  1. #1
    Membre averti
    Profil pro
    Administrateur de base de données
    Inscrit en
    Avril 2010
    Messages
    14
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Administrateur de base de données
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Avril 2010
    Messages : 14
    Par défaut affichage données vecteur GeoEXT/OpenLayers
    Bonjour à tous,

    je suis un néo-développeur en train de monter une application carto sur le web en html/JS

    je rencontre un problème dans mon code: les données vecteur ne s'affichent pas...j'ai bien mon tableau (gridpanel) dont les en-têtes de colonne s'affichent, mais pas les données...elles ne sont pas non plus placées sur la carte... auriez-vous une solution à ce problème?

    merci !

    au paasage le fichier gml est généré par un ogr2ogr...et j'ai aussi essayé avec un geojson...marche pas

    ci-dessous le code JS:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
     
    Ext.apply(Ext.form.VTypes, {
        daterange : function(val, field) {
            var date = field.parseDate(val);
     
            if(!date){
                return;
            }
            if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
                var start = Ext.getCmp(field.startDateField);
                start.setMaxValue(date);
                start.validate();
                this.dateRangeMax = date;
            } 
            else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
                var end = Ext.getCmp(field.endDateField);
                end.setMinValue(date);
                end.validate();
                this.dateRangeMin = date;
            }
            /*
             * Always return true since we're only using this vtype to set the
             * min/max allowed values (these are tested for after the vtype test)
             */
            return true;
        }
    });
     
    // Parmètres d'affichage de la carte
    // var lon=2
    // var lat=47
    // var zoom=5
     
    // Une fois le chargement effectué...
    Ext.onReady(function() {
     
    // ----------------------------- OpenLayers -----------------------------------------------
     
    	OpenLayers.Lang.code="fr";
     
    	// Nouvel objet Map
        var map = new OpenLayers.Map( 'map', optionsMap );
     
    	// Options de la carte
    	var optionsMap = {
    		projection: new OpenLayers.Projection("EPSG:900913"),
    		displayProjection: new OpenLayers.Projection("EPSG:4326"),
    		units: "m",
    	};
     
    	// Couche Google Physical
    	var gphy = new OpenLayers.Layer.Google(
    		"Google Physical",
    		{type: G_PHYSICAL_MAP}
    	);
     
    	// Couche Google Hybrid
    	var ghyb = new OpenLayers.Layer.Google(
    		"Google Hybrid",
    		{type: G_HYBRID_MAP}
    	);
     
    	// Couche Google Satellite
    	var gsat = new OpenLayers.Layer.Google(
    		"Google Satellite",
    		{type: G_SATELLITE_MAP}
    	);
     
    	// Couche Google Street
    	var gmap = new OpenLayers.Layer.Google(
            "Google Streets",
            {type: G_NORMAL_MAP}
    	);
     
    	// Creation d'une couche vecteur
        var vecLayer = new OpenLayers.Layer.Vector("vector",
    		{
    			projection: new OpenLayers.Projection("EPSG:4326"), 
    			displayProjection: new OpenLayers.Projection("EPSG:4326")
    		}
    	);
     
    	// Ajout des couches raster à la carte
        map.addLayers([gsat, gphy, ghyb, gmap, vecLayer]);
     
    // -------------------------------------------------------------------------------------------
     
    	// Nouvel objet Panel
    	var panel = new OpenLayers.Control.Panel({defaultControl: pan});
     
    	// Nouveau control Pan
    	var pan = new OpenLayers.Control.MouseDefaults({title:"Déplacement"});
     
    	// Historique de navigation
    	nav = new OpenLayers.Control.NavigationHistory();
        map.addControl(nav);
     
    	// Gestionnaire de couches
    	map.addControl(new OpenLayers.Control.LayerSwitcher());
     
    	// Le cadre acceuillant les differents controls
    	panel.addControls([
    		pan,
    		new OpenLayers.Control.ZoomBox({title:"Zoom +"}),
    		nav.next,nav.previous,
    		new OpenLayers.Control.ScaleLine(),
            new OpenLayers.Control.Permalink('permalink'),
            new OpenLayers.Control.MousePosition(),
    		new OpenLayers.Control.Navigation(),
     
    	]);
     
    	// Ajout des controls à la carte
    	map.addControl(panel);
     
    // --------------------- GeoExt --------------------------------------------------------
    	var mapUI = new GeoExt.MapPanel({
            region : 'center',
            title: 'A Simple GeoExt Map',
    		center: new OpenLayers.LonLat(2, 47),
    		zoom: 5,
            map: map
        }); 
     
    	// Creation du bloc de données pour la "grid"
        var store = new GeoExt.data.FeatureStore({
    		layer: vecLayer,
            fields: [
                {name: 'code_capta', type: 'integer'},
                {name: 'Departemen', type: 'integer'},
    			{name: 'Molecule', type: 'string'},
    			{name: 'Commune', type: 'string'},
    			{name: 'Point_X', type: 'integer'},
    			{name: 'Point_Y', type: 'integer'}	
            ],
    		proxy: new GeoExt.data.ProtocolProxy({
                protocol: new OpenLayers.Protocol.HTTP({
                    url: "http://manu.thiebaut4.free.fr/data/captage_wgs84.gml",
                    format: new OpenLayers.Format.GML(),
                })
            }),
            autoLoad: true
        });
     
    	// Création de la "grid" configurée à partir du "store"
        var gridPanel = new Ext.grid.GridPanel({
            store: store,
    		region: 'east',
    		title: 'Observations',
    		width: '30%', 
    		split: true,
            columns: [{
                header: "Code",
                dataIndex: "code_capta",
    			sortable:true
            }, {
                header: "Département",
                dataIndex: "Departemen",
    			sortable:true
            }, {
                header: "Molécule Active",
                dataIndex: "Molecule",
    			sortable:true
            }, {
                header: "Commune",
                dataIndex: "Commune",
    			sortable:true
            }, {
                header: "Coordonnée X",
                dataIndex: "Point_X",
    			sortable:true
            }, {
                header: "Coordonnée Y",
                dataIndex: "Point_Y",
    			sortable:true
            }],
            sm: new GeoExt.grid.FeatureSelectionModel() 
        });
     
    	// Viewport
    	new Ext.Viewport({
            layout: "border",
            items: [mapUI, gridPanel]
        });   
     
    });
    la page web:

    http://sce.alwaysdata.net/

  2. #2
    Membre Expert
    Avatar de gwyohm
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Octobre 2007
    Messages
    925
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Octobre 2007
    Messages : 925
    Par défaut
    Bonjour,

    Je ne connais pas la libraire Ext js, mais de ce que je lis, tes données du store sont chargées dynamiquement en ajax non ?

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
     
    var store = new GeoExt.data.FeatureStore({
    		layer: vecLayer,
            fields: [
                {name: 'code_capta', type: 'integer'},
                {name: 'Departemen', type: 'integer'},
    			{name: 'Molecule', type: 'string'},
    			{name: 'Commune', type: 'string'},
    			{name: 'Point_X', type: 'integer'},
    			{name: 'Point_Y', type: 'integer'}	
            ],
    		proxy: new GeoExt.data.ProtocolProxy({
                protocol: new OpenLayers.Protocol.HTTP({
                    url: "http://manu.thiebaut4.free.fr/data/captage_wgs84.gml",
                    format: new OpenLayers.Format.GML(),
                })
            }),
            autoLoad: true
        });
    Cependant, ton url de chargement n'est pas sur le même domaine (manu.thiebaut4.free.fr vs sce.alwaysdata.net)
    Ce ne serait pas un simple problème de SOP ?

  3. #3
    Membre à l'essai
    Profil pro
    Inscrit en
    Juin 2009
    Messages
    5
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2009
    Messages : 5
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    var vecLayer = new OpenLayers.Layer.Vector("vector",
    		{
    			projection: new OpenLayers.Projection("EPSG:4326"), 
    			displayProjection: new OpenLayers.Projection("EPSG:4326")
    		}
    	);
    Où est la source !?

  4. #4
    Membre averti
    Profil pro
    Administrateur de base de données
    Inscrit en
    Avril 2010
    Messages
    14
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Administrateur de base de données
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Avril 2010
    Messages : 14
    Par défaut
    je reviens à la charge pour ce problème que j'essaie tant bien que mal de résoudre...

    le problème de SOP je pense pas, j'ai essayé en mettant la même adresse et ça ne fonctionnait pas non plus...

    désormais, en ne conservant que le strict nécessaire, j'arrive au code suivant:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    var mapPanel, store, gridPanel, mainPanel;
     
    Ext.onReady(function() {
     
     
    	// Couche Google Physical
    	var map = new OpenLayers.Map();
    	var gphy = new OpenLayers.Layer.Google(
    		"Google Physical",
    		{type: G_PHYSICAL_MAP},
    		{layers: 'basic'}
    	);
     
        // create vector layer
        var vecLayer = new OpenLayers.Layer.Vector("vector", "manu.thiebaut4.free.fr/data/captage_wgs84");
        map.addLayers([gphy, vecLayer]);
     
        // create map panel
        mapPanel = new GeoExt.MapPanel({
            title: "Map",
            region: "center",
            height: 400,
            width: 600,
            map: map,
            center: new OpenLayers.LonLat(5, 45),
            zoom: 6
        });
     
        // create feature store, binding it to the vector layer
        store = new GeoExt.data.FeatureStore({
            layer: vecLayer,
            fields: [
                {name: 'code_capta', type: 'string'},
                {name: 'Departemen', type: 'float'},
    			{name: 'Molecule', type: 'float'},
    			{name: 'Commune', type: 'float'},
    			{name: 'Point_X', type: 'float'},
    			{name: 'Point_Y', type: 'float'}
            ],
            proxy: new GeoExt.data.ProtocolProxy({
                protocol: new OpenLayers.Protocol.HTTP({
                    url: "http://manu.thiebaut4.free.fr/data/captage_wgs84",
                    format: new OpenLayers.Format.GeoJSON()
                })
            }),
            autoLoad: true
        });
     
        // create grid panel configured with feature store
        gridPanel = new Ext.grid.GridPanel({
            title: "Feature Grid",
            region: "east",
            store: store,
            width: 320,
            columns: [{
                header: "Code captage",
                width: 200,
                dataIndex: "code_capta"
            }, {
                header: "Département",
                width: 100,
                dataIndex: "Departemen"
    		}, {
                header: "Molécule",
                width: 100,
                dataIndex: "Molecule"
    		}, {
                header: "Commune",
                width: 100,
                dataIndex: "Commune"
    		}, {
                header: "Coordonnée X",
                width: 100,
                dataIndex: "Point_X"
    		}, {
                header: "Coordonnée Y",
                width: 100,
                dataIndex: "Point_Y"
            }],
            sm: new GeoExt.grid.FeatureSelectionModel() 
        });
     
        // create a panel and add the map panel and grid panel
        // inside it
        mainPanel = new Ext.Panel({
            renderTo: "mainpanel",
            layout: "border",
            height: 400,
            width: 920,
            items: [mapPanel, gridPanel]
        });
    });
    qui m'affiche la page toujours visible à cette adresse: http://sce.alwaysdata.net/

    au cas où, la commande qui a généré mon geojson, même si le contenu est correct, p-e un oubli de ma part:
    ogr2ogr -f "GeoJSON" captage_wgs84.geojson captage_wgs84.shp

    voili-voilou, moi je sèche depuis un moment déjà...

Discussions similaires

  1. Pb affichage des données vecteur
    Par manumanu35 dans le forum Ext JS / Sencha
    Réponses: 15
    Dernier message: 25/08/2010, 16h44
  2. [SQL] Moteur de recherche problème affichage donnée dans select
    Par vincedjs dans le forum PHP & Base de données
    Réponses: 9
    Dernier message: 07/04/2006, 20h27
  3. [SQL-Server] Pb affichage données dans tableau
    Par steve o'steen dans le forum PHP & Base de données
    Réponses: 6
    Dernier message: 14/03/2006, 09h29
  4. [débutant] problème affichage données table ds TDBGrid
    Par lidouka dans le forum Composants VCL
    Réponses: 1
    Dernier message: 16/12/2005, 13h50
  5. Affichage Données avec Espace ds Zone Texte
    Par dai.kaioh dans le forum ASP
    Réponses: 2
    Dernier message: 22/02/2005, 16h43

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo