[Mapbender-commits] r8844 - in trunk/mapbender/http: plugins widgets

svn_mapbender at osgeo.org svn_mapbender at osgeo.org
Mon May 12 06:02:55 PDT 2014


Author: hwbllmnn
Date: 2014-05-12 06:02:55 -0700 (Mon, 12 May 2014)
New Revision: 8844

Modified:
   trunk/mapbender/http/plugins/mb_digitize_widget.php
   trunk/mapbender/http/widgets/w_digitize.js
Log:
added digitizing of lines via context menu & add dialog, reworked drawing of features when digitizing


Modified: trunk/mapbender/http/plugins/mb_digitize_widget.php
===================================================================
--- trunk/mapbender/http/plugins/mb_digitize_widget.php	2014-05-12 11:51:32 UTC (rev 8843)
+++ trunk/mapbender/http/plugins/mb_digitize_widget.php	2014-05-12 13:02:55 UTC (rev 8844)
@@ -263,7 +263,12 @@
                 status = 'new-point';
                 digitizingFor = $link.parent().attr('title');
                 that.activate();
-            });;
+            });
+            digitizeDialog.find('.digitize-line').bind('click', function() {
+                status = 'new-line';
+                digitizingFor = $link.parent().attr('title');
+                that.activate();
+            });
             menu.menu('destroy').remove();
         });
         return false;

Modified: trunk/mapbender/http/widgets/w_digitize.js
===================================================================
--- trunk/mapbender/http/widgets/w_digitize.js	2014-05-12 11:51:32 UTC (rev 8843)
+++ trunk/mapbender/http/widgets/w_digitize.js	2014-05-12 13:02:55 UTC (rev 8844)
@@ -88,65 +88,6 @@
     _toRad: function (deg) {
         return deg * Math.PI/180;
     },
-    //
-    // calculate area
-    //
-    _calculateAreaMetric: function (pos) {
-        if (this._digitizePoints.length < 2) {
-            return null;
-        }
-        this._digitizePoints.push(pos);
-        var part, area = 0;
-        var p0 = this._digitizePoints[0].pos, pi, pj;
-        for (var i = 0; i < this._digitizePoints.length - 1; i++)  {
-            pi = this._digitizePoints[i].pos;
-            pj = this._digitizePoints[i + 1].pos;
-            part = (pi.y + pj.y) * (pi.x - pj.x) / 2;
-            area += part;
-        }
-        part = (pj.y + p0.y) * (pj.x - p0.x) / 2;
-        area += part;
-        this._digitizePoints.pop();
-        return Math.abs(area);
-    },
-    _calculateAreaGeographic: function (pos) {
-        if (this._digitizePoints.length < 2) {
-            return null;
-        }
-
-        // add current point and first point
-        this._digitizePoints.push({
-            pos: pos
-        });
-        this._digitizePoints.push(this._digitizePoints[0]);
-
-        var area = 0.0;
-        var p1, p2;
-        for(var i=0; i<this._digitizePoints.length-1; i++) {
-            p1 = this._digitizePoints[i].pos;
-            p2 = this._digitizePoints[i+1].pos;
-            var c = this._toRad(p2.x - p1.x) *
-                (2 + Math.sin(toRad(p1.y)) +
-                 Math.sin(toRad(p2.y)));
-            area += c;
-        }
-        area = area * 6378137.0 * 6378137.0 / 2.0;
-
-        // remove current point and first point
-        this._digitizePoints.pop();
-        this._digitizePoints.pop();
-
-        return Math.abs(area);
-    },
-    _calculateArea: function (pos) {
-        switch (this._map.getSrs()) {
-            case "EPSG:4326":
-            return this._calculateAreaGeographic(pos);
-            default:
-            return this._calculateAreaMetric(pos);
-        }
-        return null;
-    },
     _isPointSnapped: function (p1, p2) {
         return p1.dist(p2) <= this.options.digitizePointDiameter/2;
     },
@@ -168,87 +109,138 @@
         }
         return false;
     },
+
     _draw: function (pos, drawOptions) {
         this._canvas.clear();
 
         var str_path = "";
 
-        if (pos && drawOptions && !drawOptions.highlightFirst) {
-            this._digitizePoints.push(pos);
-        }
+        if(this.options.type) {
+            var pts = [];
 
-        var len = this._digitizePoints.length;
-        if (len > 0) {
-            for (var k=0; k < len; k++) {
-                var pk = this._digitizePoints[k].pos;
-                var q = this._digitizePoints[k].mousePos;
-
-                str_path += (k === 0) ? 'M' : 'L';
-                str_path += q.x + ' ' + q.y;
-
-                if (drawOptions.highlightFirst && k === len - 1) {
-                    var p0 = this._digitizePoints[0].mousePos;
-                    str_path += 'L' + p0.x + ' ' + p0.y;
-
+            switch(this.options.type) {
+                case 'line':
+                for(i = 0; i < this._digitizePoints.length; ++i) {
+                    var pt = this._digitizePoints[i].mousePos;
+                    str_path += (i === 0) ? 'M' : 'L';
+                    str_path += pt.x + ' ' + pt.y;
                 }
-                if (drawOptions && drawOptions.highlightLast && k === len - 1) {
-                    continue;
+                if(pos) {
+                    str_path += (this._digitizePoints.length === 0) ? 'M' : 'L';
+                    str_path += pos.mousePos.x + ' ' + pos.mousePos.y;
                 }
+                case 'point':
+                for(var i = 0; i < this._digitizePoints.length; ++i) {
+                    var pt = this._digitizePoints[i].mousePos;
+                    pts.push(this._canvas.circle(pt.x, pt.y, this.options.digitizePointDiameter));
+                }
+                if(pos) {
+                    pts.push(this._canvas.circle(pos.mousePos.x, pos.mousePos.y, this.options.digitizePointDiameter));
+                }
+                break;
+            }
 
-                if (drawOptions && drawOptions.drawPoints &&
-                    (k === 0 && !this._polygonIsInvalid || k >= len - 2 && !drawOptions.highlightFirst)) {
+            for(i = 0; i < pts.length; ++i) {
+                pts[i].attr({
+                    fill: drawOptions && drawOptions.highlightFirst ?
+                        this.options.pointFillSnapped : this.options.pointFillDefault,
+                    "fill-opacity": this.options.opacity,
+                    stroke: drawOptions.highlightFirst || drawOptions.highlightLast ?
+                        this.options.pointStrokeSnapped: this.options.pointStrokeDefault,
+                    "stroke-width": this.options.pointStrokeWidthDefault
+                });
+            }
 
-                    var circle = this._canvas.circle(q.x, q.y, this.options.digitizePointDiameter);
+            if(pts.length > 1) {
+                var line = this._canvas.path(str_path);
 
-                    if (k === 0) {
-                        circle.attr({
-                            fill: drawOptions && drawOptions.highlightFirst ?
-                                this.options.pointFillSnapped : this.options.pointFillDefault,
-                            "fill-opacity": this.options.opacity,
-                            stroke: drawOptions.highlightFirst || drawOptions.highlightLast ?
-                                this.options.pointStrokeSnapped: this.options.pointStrokeDefault,
-                            "stroke-width": this.options.pointStrokeWidthDefault
-                        });
-                    }
-                    else {
-                        circle.attr({
-                            fill: drawOptions && drawOptions.highlightLast && k === len - 2 ?
-                                this.options.pointFillSnapped : this.options.pointFillDefault,
-                            "fill-opacity": this.options.opacity,
-                            stroke: drawOptions.highlightFirst || drawOptions.highlightLast ?
-                                this.options.pointStrokeSnapped: this.options.pointStrokeDefault,
-                            "stroke-width": this.options.pointStrokeWidthDefault
-                        });
-                    }
-                }
+                line.attr({
+                    stroke: drawOptions && (drawOptions.highlightFirst || drawOptions.highlightLast) ?
+                        this.options.lineStrokeSnapped : this.options.lineStrokeDefault,
+                    "stroke-width": drawOptions && drawOptions.highlightLast ?
+                        this.options.lineStrokeWidthSnapped : this.options.lineStrokeWidthDefault
+                });
             }
+
+            return;
         }
-        if (pos && drawOptions && !drawOptions.highlightFirst) {
-            this._digitizePoints.pop();
-        }
 
+        // if (pos && drawOptions && !drawOptions.highlightFirst) {
+        //     this._digitizePoints.push(pos);
+        // }
 
-        if (this._isPolygon(this._digitizePoints, pos) && drawOptions && !drawOptions.highlightLast && !this.polygonIsInvalid) {
-            var poly = this._canvas.path(str_path + 'Z');
-            poly.attr({
-                fill: drawOptions.highlightFirst ?
-                    this.options.polygonFillSnapped : this.options.polygonFillDefault,
-                stroke: drawOptions.highlightFirst || drawOptions.highlightLast ?
-                    this.options.lineStrokeSnapped: this.options.lineStrokeDefault,
-                "stroke-width": drawOptions.highlightFirst ?
-                    this.options.polygonStrokeWidthSnapped : this.options.polygonStrokeWidthDefault,
-                opacity: this.options.opacity
-            });
-        }
+        // var len = this._digitizePoints.length;
+        // if (len > 0) {
+        //     for (var k=0; k < len; k++) {
+        //         var pk = this._digitizePoints[k].pos;
+        //         var q = this._digitizePoints[k].mousePos;
 
-        var line = this._canvas.path(str_path);
-        line.attr({
-            stroke: drawOptions && (drawOptions.highlightFirst || drawOptions.highlightLast) ?
-                this.options.lineStrokeSnapped : this.options.lineStrokeDefault,
-            "stroke-width": drawOptions && drawOptions.highlightLast ?
-                this.options.lineStrokeWidthSnapped : this.options.lineStrokeWidthDefault
-        });
-        line.toFront();
+        //         str_path += (k === 0) ? 'M' : 'L';
+        //         str_path += q.x + ' ' + q.y;
+
+                // if (drawOptions.highlightFirst && k === len - 1) {
+                //     var p0 = this._digitizePoints[0].mousePos;
+                //     str_path += 'L' + p0.x + ' ' + p0.y;
+
+                // }
+                // if (drawOptions && drawOptions.highlightLast && k === len - 1) {
+                //     continue;
+                // }
+
+        //         if (drawOptions && drawOptions.drawPoints &&
+        //             (k === 0 && !this._polygonIsInvalid || k >= len - 2 && !drawOptions.highlightFirst)) {
+
+        //             var circle = this._canvas.circle(q.x, q.y, this.options.digitizePointDiameter);
+
+        //             if (k === 0) {
+        //                 circle.attr({
+        //                     fill: drawOptions && drawOptions.highlightFirst ?
+        //                         this.options.pointFillSnapped : this.options.pointFillDefault,
+        //                     "fill-opacity": this.options.opacity,
+        //                     stroke: drawOptions.highlightFirst || drawOptions.highlightLast ?
+        //                         this.options.pointStrokeSnapped: this.options.pointStrokeDefault,
+        //                     "stroke-width": this.options.pointStrokeWidthDefault
+        //                 });
+        //             }
+        //             else {
+        //                 circle.attr({
+        //                     fill: drawOptions && drawOptions.highlightLast && k === len - 2 ?
+        //                         this.options.pointFillSnapped : this.options.pointFillDefault,
+        //                     "fill-opacity": this.options.opacity,
+        //                     stroke: drawOptions.highlightFirst || drawOptions.highlightLast ?
+        //                         this.options.pointStrokeSnapped: this.options.pointStrokeDefault,
+        //                     "stroke-width": this.options.pointStrokeWidthDefault
+        //                 });
+        //             }
+        //         }
+        //     }
+        // }
+        // if (pos && drawOptions && !drawOptions.highlightFirst) {
+        //     this._digitizePoints.pop();
+        // }
+
+
+        // if (this._isPolygon(this._digitizePoints, pos) && drawOptions && !drawOptions.highlightLast && !this.polygonIsInvalid) {
+        //     var poly = this._canvas.path(str_path + 'Z');
+        //     poly.attr({
+        //         fill: drawOptions.highlightFirst ?
+        //             this.options.polygonFillSnapped : this.options.polygonFillDefault,
+        //         stroke: drawOptions.highlightFirst || drawOptions.highlightLast ?
+        //             this.options.lineStrokeSnapped: this.options.lineStrokeDefault,
+        //         "stroke-width": drawOptions.highlightFirst ?
+        //             this.options.polygonStrokeWidthSnapped : this.options.polygonStrokeWidthDefault,
+        //         opacity: this.options.opacity
+        //     });
+        // }
+
+        // var line = this._canvas.path(str_path);
+        // line.attr({
+        //     stroke: drawOptions && (drawOptions.highlightFirst || drawOptions.highlightLast) ?
+        //         this.options.lineStrokeSnapped : this.options.lineStrokeDefault,
+        //     "stroke-width": drawOptions && drawOptions.highlightLast ?
+        //         this.options.lineStrokeWidthSnapped : this.options.lineStrokeWidthDefault
+        // });
+        // line.toFront();
     },
     _digitize: function (e) {
         var mousePos = this._map.getMousePosition(e);
@@ -288,7 +280,9 @@
             .css("cursor", "auto")
             .bind("click", $.proxy(this, "_reinitialize"));
     },
+
     _addPoint: function (e) {
+        console.log('clicked')
         var mousePos = this._map.getMousePosition(e);
 
         var len = this._digitizePoints.length;
@@ -341,6 +335,7 @@
 
         return true;
     },
+
     _redraw: function () {
         if (!$(this.element).data("mb_digitize")) {
             return;
@@ -377,10 +372,8 @@
     },
 
     _init: function () {
-        if (this._digitizePoints.closedLine || this._digitizePoints.closedPolygon) {
-            this._digitizePoints = [];
-            this._canvas.clear();
-        }
+        this._digitizePoints = [];
+        this._canvas.clear();
 
         if(this.options.type === 'point') {
             this.element



More information about the Mapbender_commits mailing list