version 1.0beta5-2009-11-22 et étiquettes

**Unusual** · 23/11/2009, 12h00

Bonjour,

Comme je n'ai pas trop suivi dernièrement et que je n'ai (a priori) pas vu d'exemple montrant le fonctionnement d'affichage permanent d'étiquettes sur des éléments (cf google avec les KML), j'aurais voulu savoir si c'était fonctionnel dans cette version et comment les mettre rapidement en place.

Est-ce une propriété au chargement d'une couche, cela correspond-il à un champ prédéfini ? Y a-t-il un événement prévu à cet effet ?

Corollaire : Y a-t-il moyen de préciser leur placement (automatique, offset X et Y, relatif à l'élément...) ?

**mga_geo** · 23/11/2009, 12h25

Sur cette page http://atlasnw.free.fr/geoportail/ex..._transect.html j'ai un fichier kml avec 2 folders.
Les étiquettes sont présentes mais je sais rien modifier.

**Unusual** · 23/11/2009, 15h44

Oui, cela marche (mais est-ce bien la marche à suivre dans cette version ?)
mais en même temps, j'ai un souci avec le chargement de KML sous IE8

(ssi cette option est activée)...cela semble comme "figé"...j'ai encore l'impression qu'il est parti loin....loin...

**dgrichard** · 23/11/2009, 22h26

Envoyé par Unusual

Oui, cela marche (mais est-ce bien la marche à suivre dans cette version ?)
mais en même temps, j'ai un souci avec le chargement de KML sous IE8

(ssi cette option est activée)...cela semble comme "figé"...j'ai encore l'impression qu'il est parti loin....loin...

C'est la bonne démarche que mga_geo à appliquer (Cf. geoportalMap_kml.html).
Une autre méthode (que je dois tester) est de déclarer un styleMap (Cf. style = new OpenLayers.StyleMap()) et de rajouter styleMap: styles à la création de la couche. Si vous faîtes le test je suis preneur

Comment placer les labels?

J'ai rajouté un patch 2312 du trunk directement dans cette version (ou celle d'avant, je sais plus), si tu ajoutes labelXOffset, labelYOffset dans le style (avec label, labelAlign, ...), alors les écritures sont déplacées de l'offset en question ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 * Adds the following to OpenLayers.Feature.Vector (patch 2312) :
 *       * labelXOffset - {Number} Pixel offset along the positive x axis for
 *       displacing the label.
 *       * labelYOffset - {Number} Pixel offset along the positive y axis for
 *       displacing the label.

J'ai pas testé, mais c'était suite à ta demande que j'ai rajouté cela

**Unusual** · 25/11/2009, 14h13

J'ai testé ce midi la version bêta 5 en raccrochant ce que j'avais de côté en attendant (étiquette, contrôles cf OL2.8)...Tout est nickel sous FF3.5...le seul pb rencontré vient de IE8 lorsque les étiquettes sont activées. C'est lent (mais c'est peut être un effet de bord de ce qui suit)...et une fois l'affichage de la couche réalisé, le panel information "clignote" sans cesse (cf déjà dit dans une autre discussion) alors qu'il est censé être invisible puisque j'utilise :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
map.setInformationPanelVisibility(false);

Si ce pb pouvait être réglé, je pense que le pb de performance précité serait sans doute atténué...car le chargement est (presque) aussi rapide que FF sans l'affichage de ces étiquettes sous IE8 avec la même couche (par contre, on a TOUJOURS le pb de clignotement du panel information)

**dgrichard** · 25/11/2009, 22h31

Comme je n'arrive pas à reproduire le clignotement, pourrais-tu décrire le squelette du code (plus spécialement l'ordre des opérations : couches, désactivation du panneau, chargement du KML). Pour le KML, tu as combien d'objets ? Les fiches associées sont-elles lourdes ?

Bref, une capture du code expergée facileterait la recherche du problème ...

**Unusual** · 26/11/2009, 10h29

Concernant les KML générés, j'ai fixé des limites d'éléments à afficher propres aux navigateurs et à leurs versions afin de déterminer si je les affiche ou pas.
Ainsi, après quelques réalisations effectuées, j'ai déterminé arbitrairement des limites pour que le chargement soit acceptable en terme de temps.
Ces limites vont de IE8 (800 maxi) à FF3.5 (2000 maxi). Si le nombre d'éléments requis par l'affichage souhaité dépasse la limite courante,
seules les éléments prioritaires sont générés dans le KML et affichés dans la carto...et l'utilisateur est invité pour voir le détail à zoomer plus
avant sur un quartier de la commune ou à choisir une rue. Dès lors, on rentre généralement dans les clous en termes d'objets.

Le clignotement a lieu sous IE7 ou IE8 que j'active ou non l'affichage des étiquettes, que la commune soit importante ou non.

En l'occurrence, si j'active l'affichage des étiquettes, le problème de performance intervient sous IE7 et IE8
même sur des petites communes avec moins d'une centaine de points. Pour le même "petit" KML,
la différence de vitesse est énorme entre SANS et AVEC étiquette.

Pour ce qui est de la séquence de code utilisée à chaque fois, elle est triviale :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
- EnleveCoucheKML(NomAncienneCouche); // Enlève la précédente couche KML si existante
- initGeoportalMap();                 // Initialisation si map est à null (donc effectué seulement la première fois)
- loadKML(...);                       // Charge une couche KML
- CentrerSurCoordonnees(...);         // Permet de centrer la carte sur des coordonnées avec un zoom adéquat

Je décris succinctement les deux fonctions principales (j'ai épuré...)

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
function initGeoportalMap() 
{
  if (map==null)
  {
		OpenLayers.Control.KeyboardDefaults.prototype.defaultKeyPress = function(evt) {...}
		geoportalLoadmap("GeoportalMapDiv", "normal", "FXX");
		// Palette "couches" développée (true=oui  false=non)
		map.openLayersPanel(IsPaletteCouchesDeveloppee);
		// Palette "outils" développée (true=oui  false=non)                                
		map.openToolsPanel(IsPaletteOutilsDeveloppee);
		
		if (IsPanelInformation == false)
		{
		    // #TODO1 - TEST A ENLEVER MAIS DOIT RESTER TANT QUE pb de clignotement du panel information
		    if (!((IsIE) && (VersionBeta==5)))
		    {
		        map.setInformationPanelVisibility(false); 
		    }
		}
		
		// "Ortho-photographies" affichées (true=oui  false=non)		
		map.addGeoportalLayer('ORTHOIMAGERY.ORTHOPHOTOS:WMSC');
		map.addGeoportalLayer('GEOGRAPHICALGRIDSYSTEMS.MAPS:WMSC',{visibility:false});
		map.addGeoportalLayer('TRANSPORTNETWORKS.ROADS:WMSC');
		map.addGeoportalLayer('CADASTRALPARCELS.PARCELS:WMSC');
		    
		var ToolBox = map.getMap().getControlsByClass('Geoportal.Control.ToolBox')[0]; 
		                  
		// Permet ou non d'afficher un outil de mesure de distances / surfaces
		if (IsOutilsMesure==true)
		{                            
		    var BarreMesure = new Geoportal.Control.MeasureToolbar({...});
		    map.getMap().addControl(BarreMesure);   
		}
		
		// Permet ou non d'ajouter un outil de recherche
		if (IsOutilsRecherche==true)
		{                            
		    var BarreRecherche = new Geoportal.Control.SearchToolbar({...});
		    map.getMap().addControl(BarreRecherche);
		}
		
		// Permet ou non d'ajouter un outil d'ajout de couches
		if (IsOutilsAjoutCouche==true)
		{
		    var BarreAjoutCouche = new Geoportal.Control.LayerToolbar({...});
		    map.getMap().addControl(BarreAjoutCouche);                        
		} 
		
		// Permet ou non d'afficher l'outil d'historique de navigation 
		if (IsOutilsHistorique==true)
		{
		    var BarreNavigationHistorique = new OpenLayers.Control.NavigationHistory();
		    map.getMap().addControl(BarreNavigationHistorique);
		    var PanelBarre = new OpenLayers.Control.Panel({
		                div: ToolBox.createControlAnchor(ToolBox.id+'_nxtprv','nhBar')
		                });
		    PanelBarre.addControls([BarreNavigationHistorique.next, BarreNavigationHistorique.previous]);
		    map.getMap().addControl(PanelBarre);
		    // active la navigation 
		    var ControleNavigation = map.getMap().getControlsByClass('Geoportal.Control.NavToolbar')[0];
		    ControleNavigation.activateControl(ControleNavigation.getControlsByClass('OpenLayers.Control.Navigation')[0]);
		}
		
		// Initialise les coordonnées de l'emprise carto courante (variables globales)
		GetEmprise();
		// Permettra de mettre à jour ces données après zoom ou déplacement de la carte
		// Permet de conserver les coordonnées de l'emprise courante 
		// pour éventuellement charger un KML trop gros par fragment 
		// (ex : pas toute une commune, mais juste un quartier préalablement zoomé ou d'après le choix d'une rue
		map.getMap().events.register("zoomend",map.getMap(),GetEmprise);
		map.getMap().events.register("dragend",map.getMap(),GetEmprise);
		map.getMap().events.register("moveend",map.getMap(),GetEmprise);                                              
	}
}

et

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
function loadKML(aNomCouche, aNomFichierKML, aLongitude, aLatitude, aNiveauZoom) 
{      
     var element = aNomFichierKML;
     if (map)
     {
        var LonCourant = parseFloat(aLongitude)
        var LatCourant = parseFloat(aLatitude)
        var NiveauZoom = parseInt(aNiveauZoom)   
        var CoucheKMLDirecte = null;
        
        map.getMap().setCenterAtLonLat(LonCourant, LatCourant, NiveauZoom);
            
        map.getMap().addControl(new OpenLayers.Control.LoadingPanel());
        
        // #TODO1 - A ENLEVER MAIS RESTE TANT QUE PROBLEMES DE PERFORMANCES 
        if (IsIE)
        {
            IsAffichageEtiquette = false;
        }
        CoucheKMLDirecte = map.getMap().addLayer("KML", aNomCouche, aNomFichierKML, 
            {            
                 buffer: 0,
                 visibility:IsVisibiliteImmediate,
                 opacity:true, 
                 view:{
                        drop:true,
                        zoomToExtent:true
                      }, 
                 extractAttributes:true,
                 extractStyles: IsExtractionStyles,                    
                 preFeatureInsert:function(f) 
                 {
                    if (f) 
                    {
                        if (VersionBeta == 4)
                        {
                            f.style= OpenLayers.Util.applyDefaults({cursor:'help'}, f.style);
                        }
                        else
                        {
                            // Voir pour : OpenLayers.Rule --> minScaleDenominator et maxScaleDenominator
                            // default Geoportal API : cursor pointer on hover ...
                            // Geoportal.Popup.Anchored.setPointerCursorForFeature(f);
                            Geoportal.Popup.setPointerCursorForFeature(f);
                            // Voir http://code.google.com/intl/fr/apis/kml/documentation/kmlreference.html#labelstyle
                            if (IsAffichageEtiquette) 
                            {
                                OpenLayers.Util.extend(f.style, {
                                    label: f.attributes.name,
                                    labelAlign: "rb",
                                    // Suite application patch 2312
                                    labelXOffset: labelXOffset,
                                    labelYOffset: labelYOffset,
                                    fontColor: "black",
                                    fontWeight: "bold",
                                    fontSize: fontSize, 
                                    // Permet d'avoir une couleur de fond pour les étiquettes
                                    backgroundGraphic:"./images/BarreBlanche.png",
                                    backgroundHeight  : 10,
                                    backgroundWidth   : (f.attributes.name.length*8),
                                    backgroundXOffset : -(f.attributes.name.length*8),
                                    backgroundYOffset : -19, 
                                    fontFamily: "Arial" 
                                });
                             }
                        }
                    }
                 },

                 attribution:"fourni par xxx",                 
                 minZoomLevel : MinZoomLevelCarto,
                 maxZoomLevel : MaxZoomLevelCarto,
                 originators:[
                     {
                         pictureUrl:'./images/logo_xxx50x50.png',
                         url: 'http://www.xxx.net'
                     }
                             ]
              
            }
        );
        
        if (IsVisibiliteImmediate==false)
        { 
          setTimeout(OpenLayers.Function.bind(function(){this.setVisibility(true);},CoucheKMLDirecte), DelaiAffichageCouche);
        }
     		
     		selectControl = new OpenLayers.Control.SelectFeature(CoucheKMLDirecte,
            {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});

        map.getMap().addControl(selectControl);
        selectControl.activate();   
     }          
}

**dgrichard** · 28/11/2009, 18h17

Je n'ai qu'une piste

... Peux-tu déplacer les lignes suivantes comme proposé ci-dessous ?

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
function initGeoportalMap() 
{
     if (map==null)
     {
        geoportalLoadmap("GeoportalMapDiv", "normal", "FXX");
         // "Ortho-photographies" affichées (true=oui  false=non)        
        map.addGeoportalLayer('ORTHOIMAGERY.ORTHOPHOTOS:WMSC');
        map.addGeoportalLayer('GEOGRAPHICALGRIDSYSTEMS.MAPS:WMSC',{visibility:false});
        map.addGeoportalLayer('TRANSPORTNETWORKS.ROADS:WMSC');
        map.addGeoportalLayer('CADASTRALPARCELS.PARCELS:WMSC'); 
        OpenLayers.Control.KeyboardDefaults.prototype.defaultKeyPress = function(evt) {...}
        // Palette "couches" développée (true=oui  false=non)
        ...
    }
    ...
}

L'idée est de faire monter proprement les données pour que le navigateur puisse calculer la div carto suffisamment vite.

Sinon, je sêche

**Unusual** · 30/11/2009, 10h45

J'ai fait le changement d'ordre des appels....Cela ne change rien....

**Unusual** · 30/11/2009, 14h43

J'ai fait un profilage du traitement sous IE8...Si cela peut t'intéresser (en pièce jointe)

Débugage réalisé en local le KML généré fait 300Ko (220 éléments)

**dgrichard** · 30/11/2009, 20h47

Envoyé par Unusual

J'ai fait un profilage du traitement sous IE8...Si cela peut t'intéresser (en pièce jointe)

Intéressant, setInformationPanelVisibility() prend plus de 7 secondes ...

Voici le code de la méthode (comme cela tu pourras inspecter son contexte d'appel) :

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
    /**
     * APIMethod: setInformationPanelVisibility
     * Allows to show or not the information panel (the blue bar just under the
     * map).
     *
     * Parameters:
     * b - {Boolean} If true, show the panel, if not, do not show it.
     */
    Geoportal.Viewer.Default.prototype.setInformationPanelVisibility= function(b) {
        if (this.timeout[b]) { window.clearTimeout(this.timeout[b]); this.timeout[b]= null; }
        if (this.mode=="mini") {b= false;}
        if (this.infoCntrl) {
            var reload= false;
            if (!b && this.timeout[!b]) {
                reload= true;
            } else {
                var rh= this.div.offsetHeight;
                var loading= this.ready.h==-1;
                if (loading) {
                    if (/\d(%|em)/.test(this.div.style.height)) {
                        rh= Geoportal.Util.convertToPixels(this.div.style.height,false,this.div.parentNode) || rh;
                    }
                    var bh= this.mapCell.offsetHeight - this.mapCell.clientHeight;//border-top + border-bottom
                    var bw= this.mapCell.offsetWidth - this.mapCell.clientWidth;//border-left + border-right
                    var h= rh - this.mapInfoDiv.offsetHeight - bh;
                    var w= this.div.offsetWidth - bw;
                    this.ready.h= h;
                    this.ready.w= w;
                    this.ready.b= bh;
                    reload= !this.isMapReady();
                    this.mapTbl.style.height= rh+'px';//table
                }
                if (b) {
                    this.mapCell.style.height= this.ready.h+'px';
                    this.infoCntrl.div.style.display= "";
                } else {
                    this.mapCell.style.height= (rh-this.ready.b)+'px';
                    this.infoCntrl.div.style.display= "none";
                }
                this.infoCell.style.height= this.mapInfoDiv.offsetHeight+'px';
                this.mapCell.style.width= this.ready.w+'px';
                this.mapDiv.style.height= this.mapCell.style.height;
                this.mapDiv.style.width= this.mapCell.style.width;
                if (loading) {
                    reload= reload || !this.isMapReady();
                }
            }
            if (reload) {
                if (b) {
                    this.ready.h= -1;
                }
                this.timeout[b]=
                    setTimeout(OpenLayers.Function.bind(function(b){this.setInformationPanelVisibility(b);},this,b),500);
            } else {
                this.getMap().updateSize();
            }
        }
    };

Comme tu le vois, elle ne fait pas grand chose ...

En espérant que cela t'aide

version 1.0beta5-2009-11-22 et étiquettes

IGN API Géoportail

Discussions similaires

Partager

Partager