API IGN dans openlayers

**gilgil** · 27/12/2011, 18h32

Bonjour,

J'essaie désespérément d'intégrer les couche de l'API IGN dans une application openlayers déjà réalisée (en remplacement d'un WMS local que je dois étendre à toutes les Alpes)
Je me suis inspiré du code ici : http://api.ign.fr/geoportail/api/doc...les/index.html

Voici ma fonction pour créer la carte openlayers :

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
,createMap: function() {
            if (typeof(OpenLayers)==='undefined' || typeof(Geoportal)==='undefined') {
                setTimeout('application.createMap();',300);
                return;
            }
            var map;
            OpenLayers.ProxyHost= "http://integration.vttrack.fr/proxy.php";
            Proj4js.ProxyHost= OpenLayers.ProxyHost;
            
            if (window.gGEOPORTALRIGHTSMANAGEMENT===undefined) {
                var gGEOPORTALRIGHTSMANAGEMENT= {apiKey:['xxxma_clefxxx']};
            }
                    /**
             * Function: setGeoRM
             * Assign Geoportal's GeoRM token to an Object.
             *
             * Returns:
             * {Object} the rightsManagement key
             */
            function setGeoRM() {
                return Geoportal.GeoRMHandler.addKey(
                    gGEOPORTALRIGHTSMANAGEMENT.apiKey,
                    gGEOPORTALRIGHTSMANAGEMENT[gGEOPORTALRIGHTSMANAGEMENT.apiKey[0]].tokenServer.url,
                    gGEOPORTALRIGHTSMANAGEMENT[gGEOPORTALRIGHTSMANAGEMENT.apiKey[0]].tokenServer.ttl,
                    map);
            }
            var epsg4258= new OpenLayers.Projection("EPSG:4258");
            var id = Ext.id();
            Ext.DomHelper.append(Ext.getBody(), {tag: 'div', cn: {tag: 'div', id: id}, style:'visibility: hidden'});
            map = new OpenLayers.Map(id 
                ,OpenLayers.Util.extend({
                    // maxResolution: 200
                    maxResolution: 1.40625
                    ,numZoomLevels: 21
                    ,projection: epsg4258
                    ,units: epsg4258.getUnits()
                    // ,maxExtent: new OpenLayers.Bounds(872150, 1942230, 943685, 2030790)
                    ,maxExtent: new OpenLayers.Bounds(4.6, 43.5, 7.15, 46)
                    ,controls:[
                        new OpenLayers.Control.PanZoomBar()
                        ,new OpenLayers.Control.NavToolbar()
                        // ,new OpenLayers.Control.LayerSwitcher({'ascending':false})
                        ,new OpenLayers.Control.ScaleLine()
                        ,new OpenLayers.Control.MousePosition()
                        ,new OpenLayers.Control.KeyboardDefaults()
                        ,new OpenLayers.Control.Attribution()
                        ,new Geoportal.Control.PermanentLogo()
                        ,new Geoportal.Control.TermsOfService()
                    ]
                }
                ,gGEOPORTALRIGHTSMANAGEMENT)
            );
            maMap = map;//debug
            // get IGNF's catalogue :
            var cat = new Geoportal.Catalogue(map,gGEOPORTALRIGHTSMANAGEMENT);
            // prepare CRS :
            var zon = cat.getTerritory('EUE');
            map.addLayers([
                new OpenLayers.Layer(
                    '__PlateCarre__',
                    {
                        isBaseLayer: true,
                        displayInLayerSwitcher: false,
                        projection: new OpenLayers.Projection('EPSG:4326'),
                        units: 'degrees',
                        // maxResolution: 200,
                        maxResolution: 1.40625,
                        numZoomLevels: 21,
                        // maxExtent: new OpenLayers.Bounds(872150, 1942230, 943685, 2030790),
                        maxExtent: new OpenLayers.Bounds(4.6, 43.5, 7.15, 46),
                        minZoomLevel:5,
                        maxZoomLevel:18,
                        territory:'EUE'
                    })
                ]);

            // get Geoportail layer's parameters :
            var europeanMapOpts= cat.getLayerParameters(zon, 'GEOGRAPHICALGRIDSYSTEMS.MAPS:WMSC');
            // overwrite some :
            europeanMapOpts.options.opacity= 1.0;
            // link with GeoRM :
             europeanMapOpts.options["GeoRM"]= setGeoRM();
            europeanMapOpts.transitionEffect= 'resize';
            // build map :
             var europeanMap= new europeanMapOpts.classLayer(
                 OpenLayers.i18n(europeanMapOpts.options.name),
                 europeanMapOpts.url,
                 europeanMapOpts.params,
                 europeanMapOpts.options);
            // reproject maxExtent (Geoportal's API standard and extended do it automagically :
           europeanMapOpts.options.maxExtent.transform(europeanMapOpts.options.projection, map.getProjection(), true);
            // add it to the map :
            map.addLayers([europeanMap]);

            
         

            var overlay = new OpenLayers.Layer.WMS("overlay",
                "/flor/flor",
                {
                    layers: [
                      'coeur', 'aireadhesion',
                      'zones2', 'zones3', 'zones4', 'zones5',
                      'zones6', 'zones8', 'zones9',
                      'zones10', 'zones11', 'zones12',
                      'ap', 'zp_pasrelue', 'zp_relue', 'secteurs', 'communes', 'zp_Selected'
                    ],
                    transparent: true,
                    projection: new OpenLayers.Projection("EPSG:4326"),
                    statuscode: application.user.statuscode,
                    indexzp: 0
                },
                {
                    singleTile: true
                }
            );
            map.addLayers([overlay]);
            // center map (otherwise : centered at (0,0), zoom 0 :
            map.setCenter(new OpenLayers.LonLat(6.1,44.75),9);
 
            
            return map;
        }

A la ligne "europeanMapOpts.options.opacity= 1.0;" j'ai une erreur :
europeanMapOpts is null

Si je commente à partir de cette ligne jusqu'à la fin, mon application se construit mais je n'ai pas de fond de carte (par contre j'ai bien mon wms (overlay).

Vu que l'exemple dans le lien ci-dessus ne fonctionne pas (mais avec une autre erreur), je ne comprends pas où est la mienne.

Précision : j'inclu ces js
- client/mfbase/openlayers/lib/Firebug/firebug.js
- client/mfbase/openlayers/lib/OpenLayers.js
- client/mfbase/openlayers/lib/OpenLayers/Lang/fr.js
- client/mfbase/geoportal/lib/GeoportalMin.js
- client/mfbase/mapfish/MapFish.js
- client/mfbase/mapfish/lang/fr.js
- client/mfbase/proj4js/lib/proj4js.js
+ ceux de l'application

Qq'un aurait-il une idée ?

**dgrichard** · 27/12/2011, 19h49

L'exemple utilisé ne fonctionne plus car OpenLayers est passé en 2.11 (grosso modo, le modèle de classes Javascript n'est plus le même et les surcharges API ne fonctionnent plus)

Il faudrait essayer ceci :

Code :

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

1
2
http://dev.openlayers.org/releases/OpenLayers-2.10/OpenLayers.js

en lieu et place de ceci :

Code :

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

1
2
http://www.openlayers.org/api/OpenLayers.js

**gilgil** · 28/12/2011, 10h28

Merci pour cette réponse rapide.
Le problème ne semble pas venir de là.
Ma librairie Openlayers chargée en local est bien la 2.10 mais j'ai essayé avec le lien - "http://dev.openlayers.org/releases/OpenLayers-2.10/OpenLayers.js". Le problème est le même.
Voici ce que je charge, je reste sur les librairies en ligne pour être sur de parler de la même chose :
- "http://dev.openlayers.org/releases/OpenLayers-2.10/OpenLayers.js"
- "http://depot.ign.fr/geoportail/api/js/1.2/GeoportalMin.js"

Pour info : "http://api.ign.fr/api?v=1.2-m&key=xxxma_clefxxx&includeEngine=true" provoque une erreur

en essayant de debuguer à partir du message d'erreur, il semble que la fonction "getLayerParameters" renvoie null

Code :

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

1
2
3
var cat = new Geoportal.Catalogue(map,gGEOPORTALRIGHTSMANAGEMENT);
var europeanMapOpts = cat.getLayerParameters('EUE', 'GEOGRAPHICALGRIDSYSTEMS.MAPS:WMSC')...

A partir de là, je ne sais pas où se situe le problème :
Si j'analyse l'objet cat créé par new Geoportal.Catalogue, il n'est pas null, par contre je ne sais pas s'il est complet. Il comporte notamment un objet du nom de ma clef "xxxxma_clefxxxx" comportant lui même un objet allowedGeoportalLayers = []. Le pb se situe peut-être ici.
mais cat.getLayerParameters('EUE', 'GEOGRAPHICALGRIDSYSTEMS.MAPS:WMSC')...
me renvoi un objet null.

**dgrichard** · 28/12/2011, 11h26

Envoyé par gilgil

Voici ce que je charge, je reste sur les librairies en ligne pour être sur de parler de la même chose :
- "http://dev.openlayers.org/releases/OpenLayers-2.10/OpenLayers.js"
- "http://depot.ign.fr/geoportail/api/js/1.2/GeoportalMin.js"

Comme il n'y a pas de lien vers une page web, j'avais pas les librairies chargées vraiment. Mais, c'est ok

Envoyé par gilgil

Pour info : "http://api.ign.fr/api?v=1.2-m&key=xxxma_clefxxx&includeEngine=true" provoque une erreur

quelle erreur ? la clef est-elle toujours bonne ? le problème pourrait venir de là

Envoyé par gilgil

mais cat.getLayerParameters('EUE', 'GEOGRAPHICALGRIDSYSTEMS.MAPS:WMSC')...
me renvoi un objet null.

Justement, le catalogue n'est pas vide, mais rechercher si une couche est autorisée pour cette clef, oui

Je penche donc pour un problème de clef ...

**gilgil** · 28/12/2011, 11h52

Envoyé par dgrichard

quelle erreur ? la clef est-elle toujours bonne ? le problème pourrait venir de là

Cette erreur apparait uniquement si je charge ce js avec ma clef :"http://api.ign.fr/api?v=1.2-m&key=xxxma_clefxxx&includeEngine=true"
voici l'erreur dans ce cas : q is undefined GeoportalMin.js ligne 111

Si je charge le js sans clef
"http://depot.ign.fr/geoportail/api/js/1.2/GeoportalMin.js"
je n'ai pas cette erreur mais une l'erreur sur l'objet null avec "getLayerParameters".

Si je vais dans mes contrats, la clef que j'utilise est active et valide jusqu'au 22/11/2012. Elle fonctionne sur une page test simple comme ceci :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>API Geoportail - test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <style type="text/css"><!--/*--><![CDATA[/*><!--*/
    div#viewerDiv {
        width:800px;
        height:600px;
        background-color:white;
        background-image:url(http://api.ign.fr/geoportail/api/js/1.2/theme/geoportal/img/loading.gif);
        background-position:center center;
        background-repeat:no-repeat;
    }
    /*]]>*/--></style>
</head> 
<body> 
    <div style="color:#a2a2a2;font-size:2em;">Petit test pour voir</div>
    <div id="viewerDiv"></div>
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    window.onload= function() {
        Geoportal.load(
            // div's ID:
            'viewerDiv',
            // API's keys:
            ['xxxma_clefxxx'],
            {// map's center :
                // longitude:
                lon:6.3,
                // latitude:
                lat:44.80
            }
        );
    };
    //--><!]]></script>

    <script
    type="text/javascript"
    src="http://api.ign.fr/geoportail/api/js/1.2/Geoportal.js">
  <!-- -->
  </script>
  </body>
</html>

Ce test fonctionne sur http://mon_url/ign/testgeoportail.html
mon application avec erreur est ici http://mon_url/flore/pda
Normalement si j'ai bien compris la clef fonctionne sur toutes les URL de
http://mon_url

Citation:
Envoyé par gilgil Voir le message
petite question :
pour mon exemple utilisant "Geoportal.GeoRMHandler", faut-il une clef "Service Données IGN" ou une clef "API web Gratuite " suffit ?
Peu importe ...

Donc ma clef est bonne.

**dgrichard** · 28/12/2011, 12h07

1/ Est-ce que ta clef donne accès à GEOGRAPHICALGRIDSYSTEMS.MAPS ?
2/ Quant tu utilises

Code :

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

1
2
http://api.ign.fr/api?v=1.2-m&key=xxxma_clefxxx&includeEngine=true

que retourne cet URL ?

PS: sinon, peux-tu me passer ta clef par le canal "messages privés" ?

3/ http://mon_url/flore/pda envoie-t-il bien le referrer ?

**gilgil** · 28/12/2011, 11h26

petite question :
pour mon exemple utilisant "Geoportal.GeoRMHandler", faut-il une clef "Service Données IGN" ou une clef "API web Gratuite " suffit ?

**dgrichard** · 28/12/2011, 11h30

Envoyé par gilgil

petite question :
pour mon exemple utilisant "Geoportal.GeoRMHandler", faut-il une clef "Service Données IGN" ou une clef "API web Gratuite " suffit ?

Peu importe ...

API IGN dans openlayers

IGN API Géoportail

Vue hybride

Discussions similaires

Partager

Partager