Exemple de surcharge de la fonction d'export au format GPX de l'outil…

… de dessin (Drawing)
IGNF · Feb 15, 2017 · 38679f2 · 38679f2
1 parent 0172589
commit 38679f2
Show file tree

Hide file tree

Showing 4 changed files with 183 additions and 18 deletions.
diff --git a/samples/ol3/Drawing/amd-overload-export.html b/samples/ol3/Drawing/amd-overload-export.html
@@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta content="IE=edge,chrome=1; charset=UTF-8" http-equiv="X-UA-Compatible">
+        <title>sample ol3 MousePosition</title>
+
+        <!-- Library OpenLayers 3 -->
+        <link rel="stylesheet" href="../../../lib/ol3/ol.css" />
+        <!-- <script src="../../../lib/ol3/ol-debug.js"></script> -->
+
+        <!-- Plugin OpenLayers 3 IGN -->
+        <link rel="stylesheet" href="../../../dist/ol3/GpPluginOl3.css" />
+        <!-- <script src="../../../dist/ol3/GpPluginOl3.js" data-url="./../resources/AutoConf.js"></script> -->
+
+        <!-- requirejs -->
+        <script src="../../../lib/require.js"></script>
+
+        <!-- load geoportail-waiting image -->
+        <style>
+            div#map {
+                background-image:url(../resources/geoportail-waiting.gif);
+                background-position:center center;
+                background-repeat:no-repeat;
+                max-width: 800px;
+                height: 300px;
+                margin: 10px;
+            }
+        </style>
+
+    </head>
+    <body>
+        <h1>
+            <a href="http://openlayers.org/"><img src="../resources/logo-ol3.png" alt="OpenLayers3" width="100" /></a>
+            <a href="http://www.ign.fr"><img src="../resources/logo-ign.jpg" alt="IGN" width="100" /></a>
+        </h1>
+        <h3>
+            OpenLayers3 - A high-performance, feature-packed library for all your mapping needs.
+        </h3>
+
+        <div>
+            <p>Ajout d'un widget d'affichage des coordonnées de la souris (x, y et H)</p>
+
+            <script>
+                var map;
+                /* global requirejs */
+                requirejs.config({
+                    "baseUrl" : "../../../src/",
+                    "paths": {
+                        // lib external
+                        "ol" : "../lib/ol3/ol-debug",
+                        "proj4"   : "../lib/proj4/proj4",
+                        "gp"      : "../lib/gp/GpServices-src",
+                        "sortable" : "../lib/sortable/Sortable",
+                        "woodman" : "../lib/woodman/woodman-amd"
+                    }
+                });
+                requirejs(
+                    ["ol", "gp",
+                    "Ol3/Layers/LayerWMTS",
+                    "Ol3/Controls/Drawing"],
+                    function (ol, Gp,
+                      LayerWMTS,
+                      Drawing) {
+
+                  var createMap = function () {
+
+                    // Création de la map
+                    map = new ol.Map({
+                        target : "map",
+                        layers : [new LayerWMTS({
+                            layer: "GEOGRAPHICALGRIDSYSTEMS.MAPS",
+                        })],
+                        view : new ol.View({
+                            center : [288074.8449901076, 6247982.515792289],
+                            zoom : 8
+                        })
+                    });
+
+                    // creation du controle
+                    var drawing = new Drawing();
+
+                    // surcharge de la fonction d'export : kml to geojson
+                    Drawing.prototype.onExportFeatureClick = function () {
+                      console.log("overload!");
+                      var oKml = new ol.format.KML({
+                          writeStyles : true
+                      }) ;
+                      var kml = oKml.writeFeatures(this.layer.getSource().getFeatures(), {
+                          dataProjection : "EPSG:4326",
+                          featureProjection : this.getMap().getView().getProjection()
+                      }) ;
+                      console.log("KML", kml);
+
+                      var oGpx = new ol.format.GPX();
+                      var gpx  = oGpx.writeFeatures(this.layer.getSource().getFeatures(), {
+                              dataProjection : "EPSG:4326",
+                              featureProjection : this.getMap().getView().getProjection()
+                      })
+                      console.log("GPX", gpx);
+
+                    };
+                    map.addControl(drawing);
+
+                  };
+
+                  Gp.Services.getConfig({
+                      serverUrl : "./../resources/AutoConf.js",
+                      callbackSuffix : "",
+                      // apiKey: "jhyvi0fgmnuxvfv0zjzorvdn",
+                      timeOut : 20000,
+                      onSuccess : createMap
+                  });
+                });
+            </script>
+
+            <!-- map -->
+            <div id="map">
+            </div>
+
+            <!-- Comment utiliser le plugin avec un exemple -->
+            <p>EXEMPLE D'UTILISATION</p>
+            <pre>
+                <code>
+                    window.onload = function () {
+                        var map = new ol.Map({
+                            layers: [
+                                new LayerWMTS({
+                                    layer: "GEOGRAPHICALGRIDSYSTEMS.MAPS",
+                                })
+                            ],
+                            target: 'map',
+                            view: new ol.View({
+                                center: [288074.8449901076, 6247982.515792289],
+                                zoom: 5
+                            })
+                        });
+                        map.addControl(new MousePosition({}));
+                    }
+                </code>
+            </pre>
+
+            <!-- Toutes les informations utiles sur ol3 -->
+            <p>
+                <ul>
+                    <li>En savoir plus avec le <a href="http://openlayers.org/en/v3.11.2/doc/quickstart.html">quick start guide</a>,</li>
+                    <li>d'autres informations avec <a href="http://openlayers.org/en/v3.11.2/examples/">les exemples</a>,</li>
+                    <li>ou aller directement à l'<a href="http://openlayers.org/en/v3.11.2/apidoc/">API documentation</a>.</li>
+                </ul>
+                Si vous avez des questions, jetez un oeil à la
+                <a href="http://stackoverflow.com/questions/tagged/openlayers-3">FAQ</a>.
+            </p>
+        </div>
+    </body>
+</html>
diff --git a/samples/ol3/WMTS/index-bundle-layerWMTS.html b/samples/ol3/WMTS/index-bundle-layerWMTS.html
@@ -5,7 +5,7 @@
           <link rel="stylesheet" href="../../../lib/ol3/ol.css" />
           <!-- <script src="../../../lib/ol3/ol.js"></script> -->
           <script src="http://openlayers.org/en/v3.12.1/build/ol-debug.js"></script>
-          
+
           <!-- Plugin OpenLayers 3 IGN -->
           <link rel="stylesheet" href="../../../dist/ol3/GpPluginOl3.css" />
           <!--<script src="../../../dist/ol3/GpPluginOl3-src.js" data-key="0pc8wopu0q520etd77qi619k"></script>-->

diff --git a/src/Common/Controls/DrawingDOM.js b/src/Common/Controls/DrawingDOM.js
@@ -289,23 +289,7 @@ define([], function () {
             var context = this ;
             /** export function */
             button.onclick = function () {
-                // TODO
-                var content = context.exportFeatures() ;
-                if (!content) {
-                    return ;
-                }
-                var link = document.createElement("a") ;
-                // FIXME : determiner le bon charset !
-                var charset = "utf-8" ;
-                link.setAttribute("href","data:application/vnd.google-earth.kml+xml;charset=" + charset + "," + encodeURIComponent(content)) ;
-                link.setAttribute("download","croquis.kml") ;
-                if (document.createEvent) {
-                    var event = document.createEvent("MouseEvents");
-                    event.initEvent("click", true, true);
-                    link.dispatchEvent(event);
-                } else {
-                    link.click();
-                }
+                context.onExportFeatureClick();
             } ;
             container.appendChild(button) ;
 

diff --git a/src/Ol3/Controls/Drawing.js b/src/Ol3/Controls/Drawing.js
@@ -1414,5 +1414,32 @@ define([
         this.dispatchEvent("change:collapsed");
     };
 
+    /**
+     * this method is called by event 'click' on 'drawing-export' tag button.
+     *
+     * @method onExportFeatureClick
+     * @private
+     */
+    Drawing.prototype.onExportFeatureClick = function () {
+
+        // TODO
+        var content = this.exportFeatures();
+        if (!content) {
+            return ;
+        }
+        var link = document.createElement("a") ;
+        // FIXME : determiner le bon charset !
+        var charset = "utf-8" ;
+        link.setAttribute("href","data:application/vnd.google-earth.kml+xml;charset=" + charset + "," + encodeURIComponent(content)) ;
+        link.setAttribute("download","croquis.kml") ;
+        if (document.createEvent) {
+            var event = document.createEvent("MouseEvents");
+            event.initEvent("click", true, true);
+            link.dispatchEvent(event);
+        } else {
+            link.click();
+        }
+    };
+
     return Drawing;
 });