Le portail francophone de la géomatique

eamon250d · Tue 11 February 2014 14:50

Bonjour ,
Je travail sur une petite application et je voulais ajouter info-bulle au

moment de passage de la souris

Quelques choses proches de ce site :
http://www.geotests.net/test/olsymb/index2.html

J'ai essayé de télécharger tout les fichiers en local pour executer l'example

mais ca ne marche pas
Je demande si vous avez des pistes
Merci

Laurent Jégou · Tue 11 February 2014 16:23

Bonjour, cet exemple, dont je suis l'auteur, est décrit dans cet article du PortailSIG :

http://www.portailsig.org/content/carte … et-postgis

(mais il s'agit ici de symboles plutôt que de polygones).

Les info-bulles sont des objets popups proposés dans l'API OpenLayers.

eamon250d · Tue 11 February 2014 16:57

Re-Bonjour ,
Je vous remercie pour votre réponse rapide et votre exemple
J'ai essayé d’intégrer votre code avec le mien , mais il me semble qu'il y'a un conflit
Voici mes deux fichiers JS principal , si vous pouvez me dire vos remarques
Merci
Map.js

Code:

Ext.define('CF.controller.Map', {
    extend: 'Ext.app.Controller',

    models: ['Donnee','Symbologie'],
    stores: ['Donnees'],
    views: ['Bouton'],
    
    requires: [
               'CF.controller.ChangeEchelleAction',
               'CF.controller.ChangePeriodeAction',
           ],
           
    mapPanel: null,
    menuHaut: null,
    menuBas: null,

    refs: [
        {ref: 'chart', selector: 'chart'},
        {ref: 'grid', selector: 'grid'}
    ],

    init: function() {
        var me = this;
        
        
        
        function addTooltip(value, metadata, record, rowIndex, colIndex, store){
            metadata.attr = 'ext:qtip="' + value + '"';
            return value;
        }
        
        ctrl = this;

        this.control({
            'cf_mappanel': {
                'beforerender': this.onMapPanelBeforeRender
            },
            'cf_menu': {
                'beforerender': this.onMenuBeforeRender
            }
        }, this);
        
        gcSymbologie = Ext.create('CF.model.Symbologie');
    },

    onMapPanelBeforeRender: function(mapPanel, options) {
        this.mapPanel = mapPanel;
        
        var me = this;

        var layers = [];
        
        if(gEchelle==1) {
            mapPanel.map.projection = 'EPSG:4326';
            mapPanel.map.maxExtent = new OpenLayers.Bounds(-135,15,-55,83);
        } else {
            mapPanel.map.projection = 'EPSG:32188';
            mapPanel.map.maxExtent = new OpenLayers.Bounds(238991, 5009000, 339009, 5094000);
        }
        
        // La carte est générée par Mapserver via Mapscript. 
        
        
         var wmsMunicipalites = new OpenLayers.Layer.WMS(
                  "fondcarte",
                  //"http://127.0.0.1/test_marieeve.map&",
                  "http://127.0.0.1/carte/"+gIndicateur+"/"+gEchelle+"/"+gPeriode,
                  {layers: 'carte_observatoire', format: 'image/png'},
                  {singleTile: true, ratio: 1.2} 
              );
          layers.push(wmsMunicipalites);
          

        var style = new OpenLayers.Style({
            strokeWidth: 0,
            fillColor: "#999999",
            fillOpacity: 0,
            cursor: "pointer",
           
            pointRadius: 8,
            graphicName: "circle"
        });
        var styleMap = new OpenLayers.StyleMap({
            'default': style 
        });
        styleMap.styles.select.defaultStyle.pointRadius = 8;
        
        var vecLayer = new OpenLayers.Layer.Vector("vector", {
            styleMap: styleMap,
            protocol: new OpenLayers.Protocol.HTTP({
                url: "../web/app_dev.php/json/indicateur/"+gIndicateur+"/"+gEchelle+"/"+gPeriode,
                format: new OpenLayers.Format.GeoJSON()
            }),
            
            strategies: [new OpenLayers.Strategy.Fixed()]
        });
        
        gcSymbologie.getSymbologie();
        layers.push(vecLayer);
        me.getDonneesStore().bind(vecLayer);
        mapPanel.map.addLayers(layers);
        map = mapPanel.map;
        this.chargeEchellesEtPeriodes();
    },

    onMenuBeforeRender: function(menu, options) {
        if(menu.nom=='haut') {
            this.menuHaut = menu;
        } else if(menu.nom=='bas') {
            this.menuBas = menu;
        }
    },
    
    onLaunch: function() {
        var me = this;
    },

    chargeEchellesEtPeriodes: function() {
        var protocol = new OpenLayers.Protocol.HTTP(
                {
                    url: "../web/app_dev.php/json/periodesEchelles/"+gEchelle+"/"+gIndicateur,
                    format: new OpenLayers.Format.JSON()
                }
            );
        protocol.read({callback: this.retourChargeEchellesEtPeriodes, scope: this});
    },
    
    retourChargeEchellesEtPeriodes: function(response) {
        gAIndInfos = response.features['indinfos'];
        gADescEchelles = response.features['descech'];
        
        Ext.getCmp('btnAnalyse').setAnalyse(response.features['analyse']);
        
        this.menuBas.removeItemsGroupe();
        this.menuHaut.removeItemsGroupe();
        
        var echellesDisponibles = null;
        var btnsPeriodes = [];
        for(var i=0; i<gAIndInfos.length; i++) {
            var paramsAction = {
                annee: gAIndInfos[i].periode,
                toggleGroup: "periodes"
            };
            
            if(gAIndInfos[i].periode == gPeriode) {
                paramsAction.pressed = true;
                paramsAction.checked = true;
                
                echellesDisponibles = gAIndInfos[i].echelles;
            }
            
            if(Ext.Array.indexOf(gAIndInfos[i].echelles, gEchelle) == -1) {
                paramsAction.disabled = true;
            } else {
                paramsAction.disabled = false;
            }
            
            btnsPeriodes.push(Ext.create('CF.view.Bouton', Ext.create('CF.controller.ChangePeriodeAction', paramsAction)));
        }
        this.menuBas.addItemsGroupe(btnsPeriodes);

        var btnsEchelles = [];
        for(var idEch in gADescEchelles){
            var paramsAction = {
                idEchelle: idEch,
                txtEchelle: gADescEchelles[idEch]['desc'],
                toggleGroup: "echelles"
            };

            if(idEch == gEchelle) {
                paramsAction.pressed = true;
                paramsAction.checked = true;
            }
            
            if(Ext.Array.indexOf(echellesDisponibles, parseInt(idEch)) == -1) {
                paramsAction.disabled = true;
            } else {
                paramsAction.disabled = false;
            }
            
            btnsEchelles.push(Ext.create('CF.view.Bouton', Ext.create('CF.controller.ChangeEchelleAction', paramsAction)));
        }
        this.menuHaut.addItemsGroupe(btnsEchelles);
    }
});

Symbologie.js

Code:

Ext.define('CF.model.Symbologie', {
    
    getSymbologie: function() {
        ctrl.getDonneesStore().removeAll();
        gcSymbologie.infosClasses = null; 
        var protocolSymbo = new OpenLayers.Protocol.HTTP(
                {
                    url: "../web/app_dev.php/json/symbologie/"+gIndicateur+"/"+gEchelle+"/"+gPeriode,
                    format: new OpenLayers.Format.JSON()
                }
            );
        protocolSymbo.read({callback: gcSymbologie.assigneSymbologie });
    },

    assigneSymbologie: function(response) {
        var vecLayer = map.getLayersByName('vector')[0];
        vecLayer.styleMap.styles["default"].rules = Array();        
        infosClasses = response.features;

        for(var i=0; i<infosClasses.length; i++) {
            var regle = new OpenLayers.Rule({
                filter: new OpenLayers.Filter.Comparison({
                    type: OpenLayers.Filter.Comparison.BETWEEN,
                    property: "valeur",
                    lowerBoundary: infosClasses[i].min, 
                    upperBoundary: infosClasses[i].max
                }),
                symbolizer: {
                    fillColor: infosClasses[i].couleurhex
                }
              });
            vecLayer.styleMap.styles["default"].addRules([regle]);
        }

        var regle = new OpenLayers.Rule({
            filter: new OpenLayers.Filter.Comparison({
                type: OpenLayers.Filter.Comparison.IS_NULL,
                property: "valeur"
            }),
            symbolizer: {fillColor: '#D2D2D2'}
          });
        vecLayer.styleMap.styles["default"].addRules([regle]);
        vecLayer.protocol = new OpenLayers.Protocol.HTTP({
            url: "../web/app_dev.php/json/indicateur/"+gIndicateur+"/"+gEchelle+"/"+gPeriode,
            format: new OpenLayers.Format.GeoJSON()
        });    
        vecLayer.protocol.read({callback: gcSymbologie.reafficherLayers });
        window.location.hash = '#/'+ gIndicateur+"/"+gEchelle+"/"+gPeriode;
    },
    
    reafficherLayers: function(response) {
        var vecLayer = map.getLayersByName('vector')[0];
        map.removeLayer(vecLayer);
        map.addLayer(vecLayer); 
        var fondcarte = map.getLayersByName('fondcarte')[0];
    
        map.projection = new OpenLayers.Projection('EPSG:'+gADescEchelles[gEchelle]['srid']);
        console.log('map.projection :   33');
        console.log('map.projection');
        map.displayProjection = new OpenLayers.Projection('EPSG:'+gADescEchelles[gEchelle]['srid']);
        fondcarte.projection = new OpenLayers.Projection('EPSG:'+gADescEchelles[gEchelle]['srid']);
        fondcarte.params.SRS = 'EPSG:'+gADescEchelles[gEchelle]['srid'];
        var bounds =  new OpenLayers.Bounds(gADescEchelles[gEchelle]['extent'][0], gADescEchelles[gEchelle]['extent'][1], gADescEchelles[gEchelle]['extent'][2], gADescEchelles[gEchelle]['extent'][3]);
        map.maxExtent = bounds;
        fondcarte.maxExtent = bounds;
        console.log('bounds');
        console.log(bounds);
        // on réaffiche le fond de carte avec les données choisies
        fondcarte.url = "127.0.0.1/carte/"+gIndicateur+"/"+gEchelle+"/"+gPeriode+"?SRS=EPSG:"+gADescEchelles[gEchelle]['srid'];
        map.removeLayer(fondcarte);
        map.addLayer(fondcarte);
        map.zoomToMaxExtent();        
        var imageLegende = gPanneauLegende.items.items[0];
        imageLegende.setSrc('127.0.0.1/carte/'+gIndicateur+'/'+gEchelle+'/'+gPeriode+'?LAYER=donnees&FORMAT=image%2Fpng&SERVICE=WMS&VERSION=1.0.0&REQUEST=GetLegendGraphic');
    }, 
    
    changeIndicateur: function(id, periode, echelle) {
        gIndicateur = id;
        gPeriode = periode;
        gEchelle = echelle;    
        this.getSymbologie();
        ctrl.chargeEchellesEtPeriodes();
    }
});

Laurent Jégou · Wed 12 February 2014 16:31

C'est franchement difficile d'essayer de comprendre du code brut quand on n'a pas le contexte ni aucune info précise sur ce qui cloche. Mettez vos essais en ligne quelque part, ce sera plus simple pour à la fois pouvoir comprendre et éventuellement repérer les problèmes.

Communauté	Ressources	L'emploi	Le marché	L'association	Fils RSS
Forum Blogs Wiki Planet Sites amis	Agenda Biblio Fiches AMO-CNIG Paris PCGIS Téléchargements	Offres d'emploi Banque de CV Formations Démarche Métiers	Geo-Entreprises Geo-Communiqué Appels d'offres	L'association Qui sommes-nous ? Nous aider Bienfaiteurs Partenaires Historique Statuts	Tout le site Job Géomatique Services GeoBlogs ...	Faire un don Mentions légales

Le portail francophone de la géomatique

#1 Tue 11 February 2014 14:50

Info-bulle onMouseOver

#2 Tue 11 February 2014 16:23

Re: Info-bulle onMouseOver

#3 Tue 11 February 2014 16:57

Re: Info-bulle onMouseOver

Code:

Code:

#4 Wed 12 February 2014 16:31

Re: Info-bulle onMouseOver

Pied de page des forums