Merge pull request #25 from IGNF/feature-autoPan

Adaptation SDK à la version 1.0 de l'extension pour OpenLayers
IGNF · Dec 21, 2017 · 19b188b · 19b188b
2 parents a49944a + 6e2421d
commit 19b188b
Show file tree

Hide file tree

Showing 26 changed files with 242 additions and 105 deletions.
diff --git a/samples/ol3/ol3-geojson.html b/samples/ol3/ol3-geojson.html
@@ -14,6 +14,7 @@
     </head>
     <body>
         <h1>Une carte avec une couche GeoJSON</h1>
+        <p>NB : le clic sur les features s'obtient par l'ajout du controle GetFeatureInfo (ici : caché et activé).</p>
         <div id="geoportalMap"></div>
         <script type="text/javascript">
 
@@ -24,7 +25,13 @@ <h1>Une carte avec une couche GeoJSON</h1>
                     y : 5097147
                 },
                 controlsOptions : {
-                    "layerSwitcher" : {}
+                    "layerSwitcher" : {},
+                     "getfeatureinfo" : {
+                         options : {
+                             auto : true,
+                             hidden : true
+                         }
+                     }
                 },
                 layersOptions : {
                     macoucheGeoJSON : {

diff --git a/samples/ol3/ol3-gfi-wms.html b/samples/ol3/ol3-gfi-wms.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+        <link rel="stylesheet" href="../../dist/ol3/GpOl3-src.css" type="text/css">
+        <style>
+        body {
+            width : 100% !important;
+        }
+        #geoportalMap {
+            height: 500px;
+            width: 100%;
+        }
+        </style>
+        <script src="../../dist/ol3/GpOl3-src.js"></script>
+    </head>
+    <body>
+        <h1>Get Feature Info</h1>
+        <p>Exemple de mise en oeuvre du widget getFeatureInfo avec une couche WMS (école) et WMTS (photos).</p>
+        <p>Ici l'évènement par défault est le simple click.</p>
+        <div id="geoportalMap"></div>
+        <script type="text/javascript">
+
+            var map = Gp.Map.load('geoportalMap',{
+                apiKey : "jhyvi0fgmnuxvfv0zjzorvdn",
+                // proxyUrl : "http://localhost/proxy/php/proxy.php?url=",
+                // noProxyDomains : ["wxs.ign.fr"/*,"gpp3-wxs-v-ign-fr.aw.atosorigin.com"*/],
+                center : {
+                    x : 22700,
+                    y : 6395900
+                },
+                zoom : 15,
+                controlsOptions : {
+                    "layerSwitcher" : {},
+                    "mousePosition" : {},
+                    "getfeatureinfo" : {
+                        options : {
+                            active : true,
+                            hidden: false,
+                            defaultEvent : "singleclick",
+                            cursorStyle : "pointer"
+                        },
+                        layers : {
+                            'ecoles' : {},
+                            'ORTHOIMAGERY.ORTHOPHOTOS' : {}
+                        }
+                    }
+                },
+                layersOptions : {
+                    'ORTHOIMAGERY.ORTHOPHOTOS' : {
+                        queryable : true
+                    },
+                    'ecoles' : {
+                        minZoom : 14,
+                        maxZoom : 21,
+                        format : "wms",
+                        title : "Ecoles maternelles et élémentaires",
+                        description : "L'école maternelle peut accueillir les enfants avant l'instruction obligatoire qui débute à 6 ans. L'école élémentaire accueille les enfants scolarisés de 6 à 11 ans. Elle est mixte et gratuite si elle est publique. <a href='http://www.education.gouv.fr/pid24/les-niveaux-et-les-etablissements-d-enseignement.html'>En savoir plus.</a>. Source des données : MENESR février 2014, BD TOPO 2016",
+                        url : "http://wxs.ign.fr/an7nvfzojv5wa96dsga5nk8w/geoportail/v/wms",
+                        layers : ["UTILITYANDGOVERNMENTALSERVICES.IGN.POI.ENSEIGNEMENTPRIMAIRE"],
+                        outputFormat : "image/png",
+                        queryable : true,
+                        gfiFormat : "text/html",
+                        originators: [{
+                                "name":"IGN",
+                                "attribution":"Institut national de l'information géographique et forestière",
+                                "url":"http://www.ign.fr",
+                            }
+                        ]
+                    }
+                }
+            });
+
+        </script>
+    </body>
+</html>
diff --git a/samples/ol3/ol3-gfi.html b/samples/ol3/ol3-gfi.html
@@ -40,7 +40,12 @@ <h1>Get Feature Info</h1>
                             active : false,
                             hidden: false,
                             defaultEvent : "singleclick",
-                            cursorStyle : "pointer"
+                            cursorStyle : "pointer",
+                            autoPanOptions : {
+                                autoPan : true,
+                                duration : 1000,
+                                margin : 20
+                            }
                         },
                         layers : {
                             myVectorLayer : {},

diff --git a/samples/ol3/ol3-gpx.html b/samples/ol3/ol3-gpx.html
@@ -14,6 +14,7 @@
     </head>
     <body>
         <h1>Une carte avec une couche GPX</h1>
+        <p>NB : le clic sur les features s'obtient par l'ajout du controle GetFeatureInfo (ici : caché et activé).</p>
         <div id="geoportalMap"></div>
         <script type="text/javascript">
 

diff --git a/samples/ol3/ol3-interaction.html b/samples/ol3/ol3-interaction.html
@@ -14,10 +14,11 @@
     </head>
     <body>
         <h1>Test de l'activation / desactivation des interactions</h1>
+        <p>Version 1.0 : bugs constatés : (1) Après activation puis desactivation de getfeatureinfo => erreur au clic. (2) activation / desactivation de la navigation au clavier ("keyboard") inopérante </p>
         <div id="eventsDiv">
             <input type="checkbox" name="draggable" onclick="toggle(this);"/>enable Mouse navigation<br/>
             <input type="checkbox" name="keyboard" onclick="toggle(this);"/>enable keybord navigation<br/>
-            <input type="checkbox" name="selectable" onclick="toggle(this);"/>enable feature selection<br/>
+            <input type="checkbox" name="getfeatureinfo" onclick="toggle(this);"/>enable feature selection<br/>
         </div>
         <div id="geoportalMap"></div>
 
@@ -39,13 +40,32 @@ <h1>Test de l'activation / desactivation des interactions</h1>
                 },
                 zoom : 14,
                 controlsOptions : {
-                    selectable : false
+                    getfeatureinfo : {
+                        options : {
+                            auto : true,
+                            // hidden : true,
+                            active : false
+                        }
+                    },
+                    draggable : false,
+                    keyboard : false
                 }
             });
             function toggle(elem) {
                 var controlsOptions = {} ;
-                controlsOptions[elem.name] = elem.checked
-                map.addControls(controlsOptions) ;
+                if ( elem.name == "getfeatureinfo" ) {
+                    controlsOptions[elem.name] = {
+                        options : {
+                            auto : true,
+                            active : elem.checked,
+                            // hidden : true
+                        } 
+                    } ;
+                    map.modifyControls(controlsOptions) ;
+                } else {
+                    controlsOptions[elem.name] = elem.checked
+                    map.addControls(controlsOptions) ;
+                }
             }
         </script>
     </body>

diff --git a/samples/ol3/ol3-kml-drawing.html b/samples/ol3/ol3-kml-drawing.html
@@ -14,6 +14,7 @@
     </head>
     <body>
         <h1>Une carte affichant une couche KML</h1>
+        <p>NB : le clic sur les features s'obtient par l'ajout du controle GetFeatureInfo (ici : caché et activé).</p>
         <div id="geoportalMap"></div>
         <script type="text/javascript">
 

diff --git a/samples/ol3/ol3-kml.html b/samples/ol3/ol3-kml.html
@@ -14,6 +14,7 @@
     </head>
     <body>
         <h1>Une carte affichant une couche KML</h1>
+        <p>NB : le clic sur les features s'obtient par l'ajout du controle GetFeatureInfo (ici : caché et activé).</p>
         <div id="geoportalMap"></div>
         <script type="text/javascript">
 

diff --git a/samples/ol3/ol3-local-config.html b/samples/ol3/ol3-local-config.html
@@ -18,7 +18,7 @@
     </head>
     <body>
         <h1>Test du paramètre configUrl</h1>
-        <h2>Config locale.</h2>
+        <p>La carte s'initialise à l'aide d'un fichier d'autoconfiguration local.</p>
         <div id="geoportalMap1"></div>
         <script type="text/javascript">
 

diff --git a/samples/ol3/ol3-marker.html b/samples/ol3/ol3-marker.html
@@ -83,17 +83,25 @@ <h1>Test du paramètre markersOptions</h1>
                 },
                 markersOptions: [{
                     url : "https://www.google.fr/maps/vt/icon/name=assets/icons/spotlight/spotlight_poi-0-tiny.png&color=ffff0000?scale=2",
-                    content : "Marker Google",
+                    content : "Marker Google. Avec autoPan.",
                     position : {
                         x : 261500,
                         y : 6250398
+                    },
+                    autoPanOptions : {
+                        autoPan : true,
+                        duration : 1000,
+                        margin : 20
                     }
                 },{
-                    content : "Marker par defaut",
+                    content : "Marker par defaut. Avec autoPan désactivé.",
                     offset : [-25.5, -38],
                     position : {
                         x : 261300,
                         y : 6250398
+                    },
+                    autoPanOptions : {
+                        autoPan : false
                     }
                 }]
             });

diff --git a/samples/ol3/ol3-measures-without-toolbox.html b/samples/ol3/ol3-measures-without-toolbox.html
@@ -22,6 +22,7 @@
     </head>
     <body>
         <h1>Controles Mesures</h1>
+        <p>Ici, les outils de mesures sont positionnés dans une div indépendante de la carte (sans container).</p>
         <div id="geoportalMap">
           <div id="container-measure">
             <!-- HERE : widgets tools measures -->

diff --git a/samples/ol3/ol3-measures.html b/samples/ol3/ol3-measures.html
@@ -20,6 +20,7 @@
     </head>
     <body>
         <h1>Controles Mesures</h1>
+        <p>Ajout des outils de mesures dans leur container standard. Personnalisation des styles de tracé.</p>
         <div id="geoportalMap"></div>
         <script type="text/javascript">
 

diff --git a/samples/ol3/ol3-modifyLayers.html b/samples/ol3/ol3-modifyLayers.html
@@ -18,6 +18,7 @@
     </head>
     <body>
         <h1>Modify Layers</h1>
+        <p>Les trois boutons permettent d'agir sur les propriétés de chacune des couches à l'aide de la méthode modifyLayers().</p>
         <div id="geoportalMap"></div>
         <div id="BoutonDiv">
             <input type="button" name="export" onclick="modifyLayers();" value="modifiyLayers(null)"/><br/>

diff --git a/samples/ol3/ol3-projection.html b/samples/ol3/ol3-projection.html
@@ -13,6 +13,10 @@
             height: 400px;
             width: 600px;
           }
+          #geoportalMap3 {
+            height: 400px;
+            width: 600px;
+          }
         </style>
         <script src="../../dist/ol3/GpOl3-src.js"></script>
     </head>
@@ -24,6 +28,9 @@ <h2>CAS 1 : l'utilisateur veut afficher une carte en WebMercator.</h2>
         <h2>CAS 2 : l'utilisateur veut afficher une carte en WGS84.</h2>
         <p>La projection de la carte est EPSG:4326.</p>
         <div id="geoportalMap2"></div>
+        <h2>CAS 3 : l'utilisateur veut afficher une carte en EPSG:2154.</h2>
+        <p>La projection de la carte est EPSG:2154.</p>
+        <div id="geoportalMap3"></div>
         <script type="text/javascript">
             Gp.Map.load('geoportalMap1',{
                 apiKey : "jhyvi0fgmnuxvfv0zjzorvdn",
@@ -51,6 +58,19 @@ <h2>CAS 2 : l'utilisateur veut afficher une carte en WGS84.</h2>
                 }
             });
 
+            Gp.Map.load('geoportalMap3',{
+                apiKey : "jhyvi0fgmnuxvfv0zjzorvdn",
+                projection : "EPSG:2154",
+                layersOptions : {
+                    'maCoucheWMS' : {
+                        format : "wms",
+                        title : "Cours d'eau",
+                        url : "http://services.sandre.eaufrance.fr/geo/zonage",
+                        layers : ["TronconHydrographique"]
+                    }
+                }
+            });
+
         </script>
     </body>
 </html>
diff --git a/samples/ol3/ol3-removeLayers.html b/samples/ol3/ol3-removeLayers.html
@@ -18,6 +18,7 @@
     </head>
     <body>
         <h1>removeLayers</h1>
+        <p>Les trois boutons permettent de retirer des couches à l'aide la méthode removeLayers()</p>
         <div id="geoportalMap"></div>
         <div id="BoutonDiv">
             <input type="button" name="export" onclick="removeLayers();" value="Remove(null)"/><br/>

diff --git a/samples/ol3/ol3-wfs-geoportail.html b/samples/ol3/ol3-wfs-geoportail.html
@@ -14,6 +14,7 @@
     </head>
     <body>
         <h1>Affichage couche WFS Géoportail</h1>
+        <p>En mode : "couche externe"</p>
         <div id="geoportalMap"></div>
         <script type="text/javascript">
 
@@ -28,7 +29,8 @@ <h1>Affichage couche WFS Géoportail</h1>
                     "ORTHOIMAGERY.ORTHOPHOTOS" : {},
                     maCoucheWFS : {
                         format :"wfs",
-                        url : "http://wxs.ign.fr/kgco926a9mj4fcng4whjf5ac/geoportail/wfs",
+                        // TODO : changer la clef ?
+                        url : "https://wxs.ign.fr/kgco926a9mj4fcng4whjf5ac/geoportail/wfs",
                         typeNames : "BDPARCELLAIRE-VECTEUR_WLD_BDD_WGS84G:parcelle",
                         version : "2.0.0",
                         // version : "1.1",

diff --git a/samples/ol3/ol3-wfs.html b/samples/ol3/ol3-wfs.html
@@ -14,6 +14,7 @@
     </head>
     <body>
         <h1>Une carte avec une couche WFS</h1>
+        <p>TODO : revoir le serveur WFS ou les features utilisés ("Error occurred getting features Schema 'water_areas' does not exist.")</p>
         <div id="geoportalMap"></div>
         <script type="text/javascript">
 

diff --git a/samples/ol3/ol3-wms-gfi.html b/samples/ol3/ol3-wms-gfi.html
@@ -17,8 +17,8 @@
     </head>
     <body>
         <h1>WMS Géoportail "externe" et GetFeatureInfo</h1>
-        <p>couche WMS SHOM chargée avec l'option tiled : true => logos parfois tronqués</p>
-        <p>couche WMS Ecoles chargée sans l'option tiled => logos non tronqués</p>
+        <p>couche WMS SHOM chargée avec l'option tiled : true => logos parfois tronqués, queryable avec le bouton droit (event : "contextmenu").</p>
+        <p>couche WMS Ecoles chargée sans l'option tiled => logos non tronqués, queryable au clic gauche.</p>
         <div id="geoportalMap"></div>
         <script type="text/javascript">
 
@@ -38,6 +38,8 @@ <h1>WMS Géoportail "externe" et GetFeatureInfo</h1>
                         layers : {
                             'WMS1' : {
                                 event: "contextmenu",
+                            },
+                            'ecoles' : {
                             }
                         },
                         options : {

diff --git a/samples/ol3/ol3-wms.html b/samples/ol3/ol3-wms.html
@@ -14,6 +14,7 @@
     </head>
     <body>
         <h1>Une carte avec une couche WMS</h1>
+        <p>Serveur utilisé : url : "http://services.sandre.eaufrance.fr/geo/zonage", layers : ["TronconHydrographique", "RegionHydro"]</p>
         <div id="geoportalMap"></div>
         <script type="text/javascript">
 

diff --git a/samples/ol3/ol3-wmsc-espagne.html b/samples/ol3/ol3-wmsc-espagne.html
@@ -17,6 +17,7 @@
     </head>
     <body>
         <h1>WMSC Géoportail comme WMS</h1>
+        <p>Ne marche pas : mauvais positionnement du tuilage à priori ("HTTP 400: X,Y values for the tile index were calculated to be {31.516983765983948, 23.381766524120494}  which had to be rounded to {32, 23}  and exceeds the threshold of 10%. Perhaps the client is using the wrong origin ?")</p>
         <div id="geoportalMap"></div>
         <script type="text/javascript">
 

diff --git a/samples/ol3/ol3-wmsc-geologie.html b/samples/ol3/ol3-wmsc-geologie.html
@@ -16,14 +16,15 @@
         <script src="../../dist/ol3/GpOl3-src.js"></script>
     </head>
     <body>
-        <h1>WMSC Géoportail comme WMS</h1>
+        <h1>WMSC Géologie comme WMS</h1>
+        <p>Charge la couche géologie du BRGM depuis le serveur WMSC comme une couche WMS (en mode tuilé)</p>
         <div id="geoportalMap"></div>
         <script type="text/javascript">
 
             var map = Gp.Map.load('geoportalMap',{
                 apiKey : "jhyvi0fgmnuxvfv0zjzorvdn",
-                proxyUrl : "http://localhost/proxy/php/proxy.php?url=",
-                noProxyDomains : ["wxs.ign.fr"/*,"gpp3-wxs-v-ign-fr.aw.atosorigin.com"*/],
+                // proxyUrl : "http://localhost/proxy/php/proxy.php?url=",
+                // noProxyDomains : ["wxs.ign.fr"/*,"gpp3-wxs-v-ign-fr.aw.atosorigin.com"*/],
                 center : {
                     x : 5.35,
                     y : 45.27,
@@ -36,8 +37,8 @@ <h1>WMSC Géoportail comme WMS</h1>
                 },
                 layersOptions : {
                     "ORTHOIMAGERY.ORTHOPHOTOS" : {},
-                    // Couche WMS-C externe proxyfiée...
                     "GEOLOGY.GEOLOGY::EXTERNAL:OGC:EXTERNALWMS" : {
+                        tiled : true,
                         format : "wms",
                         version : "1.1.1",
                         title : "Géologie (BRGM)",