[Mapbender-commits] r7114 - in trunk/mapbender/http: plugins widgets
svn_mapbender at osgeo.org
svn_mapbender at osgeo.org
Thu Nov 11 06:28:55 EST 2010
Author: christoph
Date: 2010-11-11 03:28:55 -0800 (Thu, 11 Nov 2010)
New Revision: 7114
Added:
trunk/mapbender/http/plugins/mb_measure_widget.js
Modified:
trunk/mapbender/http/widgets/w_measure.js
Log:
Measure widget with jQUery UI widget factory and RaphaelJS
Added: trunk/mapbender/http/plugins/mb_measure_widget.js
===================================================================
--- trunk/mapbender/http/plugins/mb_measure_widget.js (rev 0)
+++ trunk/mapbender/http/plugins/mb_measure_widget.js 2010-11-11 11:28:55 UTC (rev 7114)
@@ -0,0 +1,184 @@
+/**
+ * Package: measure_widget
+ *
+ * Description:
+ * Measure module with jQuery UI widget factory and RaphaelJS
+ *
+ * Files:
+ * - http/plugins/mb_measure_widget.js
+ * - http/widgets/w_measure.js
+ *
+ * SQL:
+ * > INSERT INTO gui_element(fkey_gui_id, e_id, e_pos, e_public, e_comment,
+ * > e_title, e_element, e_src, e_attributes, e_left, e_top, e_width, e_height,
+ * > e_z_index, e_more_styles, e_content, e_closetag, e_js_file, e_mb_mod,
+ * > e_target, e_requires, e_url) VALUES('<appId>','measure_widget',2,1,
+ * > 'Measure','Measure distance','img',
+ * > '../img/button_blink_red/measure_off.png','',515,60,24,24,1,'','','',
+ * > '../plugins/mb_measure_widget.js',
+ * > '../widgets/w_measure.js,../extensions/RaphaelJS/raphael-1.4.7.min.js',
+ * > 'mapframe1','jq_ui_dialog,jq_ui_widget',
+ * > 'http://www.mapbender.org/index.php/Measure');
+ *
+ * Help:
+ * http://www.mapbender.org/Measure_widget
+ *
+ * Maintainer:
+ * http://www.mapbender.org/User:Christoph_Baudson
+ *
+ * License:
+ * Copyright (c) 2009, Open Source Geospatial Foundation
+ * This program is dual licensed under the GNU General Public License
+ * and Simplified BSD license.
+ * http://svn.osgeo.org/mapbender/trunk/mapbender/license/license.txt
+ */
+
+var $measure = $(this);
+
+var MeasureApi = function (o) {
+
+ var measureDialog,
+ button,
+ that = this,
+ title = "Messung",
+ defaultHtml = "<div title='" + title + "'>" +
+ "<div class='mb-measure-text'>Fahren Sie mit der Maus über die Karte, um die Koordinaten anzuzeigen.<br> Klicken Sie, um eine Messung zu starten</div>" +
+ "</div>",
+ totalDistance,
+ currentDistance,
+ informationHtml =
+ "<div>Letzter Punkt: <span class='mb-measure-clicked-point' /></div>" +
+ "<div>Aktuelle Koordinaten: <span class='mb-measure-current-point' /></div>" +
+ "<div>Distanz (zum letzten Punkt): <span class='mb-measure-distance-last' /> <span class='mb-measure-distance-last-unit' /></div>" +
+ "<div>Distanz (gesamt): <span class='mb-measure-distance-total' /> <span class='mb-measure-distance-total-unit' /></div>" +
+ "<div>Fläche: <span class='mb-measure-area' /> <span class='mb-measure-area-unit' /></div>" +
+ "<a class='mb-measure-clear' href='#' title='Messung löschen'/>";
+
+ var hideMeasureData = function () {
+ measureDialog.find(".mb-measure-clicked-point").parent().hide();
+// measureDialog.find(".mb-measure-current-point").parent().hide();
+ measureDialog.find(".mb-measure-distance-last").parent().hide();
+ measureDialog.find(".mb-measure-distance-total").parent().hide();
+ measureDialog.find(".mb-measure-area").parent().hide();
+ };
+
+ var changeDialogContent = function () {
+ measureDialog.html(informationHtml);
+ hideMeasureData();
+ o.$target.unbind("mouseenter", changeDialogContent);
+ };
+
+ var create = function () {
+ //
+ // Initialise measure dialog
+ //
+ measureDialog = $(defaultHtml);
+ measureDialog.dialog({
+ autoOpen: false,
+ position: [o.$target.offset().left, o.$target.offset().top]
+ }).bind("dialogclose", function () {
+ that.deactivate();
+ });
+
+ //
+ // Initialise button
+ //
+ button = new Mapbender.Button({
+ domElement: $measure.get(0),
+ over: o.src.replace(/_off/, "_over"),
+ on: o.src.replace(/_off/, "_on"),
+ off: o.src,
+ name: o.id,
+ go: that.activate,
+ stop: that.deactivate
+ });
+ };
+
+ var updateCurrentPoint = function (evt, p) {
+ measureDialog.find(".mb-measure-current-point").text(
+ p.pos.x + " " + p.pos.y
+ ).parent().show();
+ };
+
+ var updateClickedPoint = function (evt, p) {
+ totalDistance = typeof totalDistance === "number" ? totalDistance + currentDistance : currentDistance;
+
+ measureDialog.find(".mb-measure-clicked-point").text(
+ p.pos.x + " " + p.pos.y
+ ).parent().show();
+ };
+
+ var updateDistance = function (evt, dist) {
+ if (!dist) {
+ return;
+ }
+ var lastDistanceUnit = "m";
+ currentDistance = dist;
+ displayDistance = dist;
+ if (displayDistance > 10000){
+ displayDistance /= 1000;
+ lastDistanceUnit = "km";
+ }
+ measureDialog.find(".mb-measure-distance-last-unit").html(lastDistanceUnit);
+ measureDialog.find(".mb-measure-distance-last").text(Math.round(displayDistance*10)/10).parent().show();
+
+ var totalDistanceUnit = "m";
+ var displayTotalDistance = typeof totalDistance === "number" ? totalDistance + dist : dist;
+ if (displayTotalDistance > 10000){
+ displayTotalDistance = displayTotalDistance / 1000;
+ totalDistanceUnit = "km";
+ }
+
+ measureDialog.find(".mb-measure-distance-total-unit").html(totalDistanceUnit);
+ measureDialog.find(".mb-measure-distance-total").text(Math.round(displayTotalDistance*10)/10).parent().show();
+ };
+
+ var updateArea = function (evt, area) {
+ if (area === null) {
+ return;
+ }
+ var areaUnit = "m²";
+ if (area > 10000000){
+ area /= 1000000;
+ areaUnit = "km²";
+ }
+ else if (area > 100000){
+ area /= 10000;
+ areaUnit = "ha";
+ }
+ area = Math.round(area*10)/10;
+
+ measureDialog.find(".mb-measure-area-unit").html(areaUnit);
+ measureDialog.find(".mb-measure-area").text(area).parent().show();
+ };
+
+ this.activate = function () {
+ if (o.$target.size() > 0) {
+ o.$target
+ .mb_measure()
+ .bind("mb_measurepointadded", updateClickedPoint)
+ .bind("mb_measureonmeasure", updateCurrentPoint)
+ .bind("mb_measureonmeasuredistance", updateDistance)
+ .bind("mb_measureonmeasurearea", updateArea)
+ .bind("mouseenter", changeDialogContent);
+ }
+
+ measureDialog.dialog("open");
+ };
+
+ this.deactivate = function () {
+ if (o.$target.size() > 0) {
+ o.$target.mb_measure("destroy");
+ }
+
+ hideMeasureData();
+
+ if (measureDialog.dialog("isOpen")) {
+ measureDialog.dialog("close");
+ }
+ };
+
+ create();
+};
+
+$measure.mapbender(new MeasureApi(options));
Modified: trunk/mapbender/http/widgets/w_measure.js
===================================================================
--- trunk/mapbender/http/widgets/w_measure.js 2010-11-11 11:07:43 UTC (rev 7113)
+++ trunk/mapbender/http/widgets/w_measure.js 2010-11-11 11:28:55 UTC (rev 7114)
@@ -1,4 +1,4 @@
-$.widget("mapbender.measure", {
+$.widget("mapbender.mb_measure", {
options: {
opacity: 0.6,
measurePointDiameter: 10,
@@ -36,13 +36,13 @@
var pj = this._measurePoints[i + 1].pos;
if (i > 0 && this._lineIntersect(
- pi.x, pi.y, pj.x, pj.y,
+ pi.x, pi.y, pj.x, pj.y,
p0.x, p0.y, pos.x, pos.y)
) {
return false;
}
if (this._lineIntersect(
- pi.x, pi.y, pj.x, pj.y,
+ pi.x, pi.y, pj.x, pj.y,
pn.x, pn.y, pos.x, pos.y)
) {
this._currentPolygonIsInvalid = true;
@@ -55,18 +55,18 @@
_lineIntersect: function ( x1, y1, x2, y2, x3, y3, x4, y4 ) {
var isOnSegment = function (xi, yi, xj, yj, xk, yk) {
// changed <= to < so the segments are allowed to touch!
- return (xi < xk || xj < xk) &&
+ return (xi < xk || xj < xk) &&
(xk < xi || xk < xj) &&
- (yi < yk || yj < yk) &&
+ (yi < yk || yj < yk) &&
(yk < yi || xk < yj);
};
-
+
var computeDirection = function (xi, yi, xj, yj, xk, yk) {
var a = (xk - xi) * (yj - yi);
var b = (xj - xi) * (yk - yi);
return a < b ? -1 : a > b ? 1 : 0;
};
-
+
var e1 = computeDirection(x3, y3, x4, y4, x1, y1);
var e2 = computeDirection(x3, y3, x4, y4, x2, y2);
var e3 = computeDirection(x1, y1, x2, y2, x3, y3);
@@ -88,7 +88,7 @@
if (this._measurePoints.length < 2) {
return null;
}
-
+
var area = 0;
var p0 = this._measurePoints[0].pos, pi, pj;
for (var i = 0; i < this._measurePoints.length - 1; i++) {
@@ -103,13 +103,13 @@
if (this._measurePoints.length < 2) {
return null;
}
-
+
// add current point and first point
this._measurePoints.push({
pos: pos
});
this._measurePoints.push(this._measurePoints[0]);
-
+
var area = 0.0;
var p1, p2;
for(var i=0; i<this._measurePoints.length-1; i++) {
@@ -132,7 +132,7 @@
switch (this._map.getSrs()) {
case "EPSG:4326":
return this._calculateAreaGeographic(pos);
- default:
+ default:
return this._calculateAreaMetric(pos);
}
return null;
@@ -146,14 +146,14 @@
var lon_to = this._toRad(b.x);
var lat_to = this._toRad(b.y);
return Math.abs(6371229 * Math.acos(
- Math.sin(lat_from) * Math.sin(lat_to) +
- Math.cos(lat_from) * Math.cos(lat_to) *
+ Math.sin(lat_from) * Math.sin(lat_to) +
+ Math.cos(lat_from) * Math.cos(lat_to) *
Math.cos(lon_from - lon_to)
));
},
_calculateDistanceMetric: function (a, b) {
return Math.abs(Math.sqrt(
- Math.pow(Math.abs(b.x - a.x), 2) +
+ Math.pow(Math.abs(b.x - a.x), 2) +
Math.pow(Math.abs(b.y - a.y), 2)
));
},
@@ -162,7 +162,7 @@
switch (this._map.getSrs()) {
case "EPSG:4326":
return this._calculateDistanceGeographic(a, b);
- default:
+ default:
return this._calculateDistanceMetric(a, b);
}
}
@@ -191,7 +191,7 @@
},
_draw: function (pos, drawOptions) {
this._canvas.clear();
-
+
var str_path = "";
if (!drawOptions.highlightFirst) {
@@ -210,15 +210,15 @@
str_path += (k === 0) ? 'M' : 'L';
str_path += q.x + ' ' + q.y;
-
- if (drawOptions.drawPoints &&
+
+ if (drawOptions.drawPoints &&
(k === 0 && !this._polygonIsInvalid || k >= len - 2)) {
var circle = this._canvas.circle(q.x, q.y, this.options.measurePointDiameter);
-
+
if (k === 0) {
circle.attr({
- fill: drawOptions.highlightFirst ?
+ fill: drawOptions.highlightFirst ?
this.options.pointFillSnapped : this.options.pointFillDefault,
stroke: "none",
opacity: this.options.opacity
@@ -226,7 +226,7 @@
}
else {
circle.attr({
- fill: drawOptions.highlightLast && k === len - 2 ?
+ fill: drawOptions.highlightLast && k === len - 2 ?
this.options.pointFillSnapped : this.options.pointFillDefault,
stroke: "none",
opacity: this.options.opacity
@@ -238,93 +238,92 @@
if (!drawOptions.highlightFirst) {
this._measurePoints.pop();
}
-
-
+
+
if (this._isPolygon(this._measurePoints, pos) && !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,
+ 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.highlightFirst || drawOptions.highlightLast ?
- this.options.lineStrokeSnapped : this.options.lineStrokeDefault,
- "stroke-width": drawOptions.highlightLast ?
- this.options.lineStrokeWidthSnapped : this.options.lineStrokeWidthDefault,
+ stroke: drawOptions.highlightFirst || drawOptions.highlightLast ?
+ this.options.lineStrokeSnapped : this.options.lineStrokeDefault,
+ "stroke-width": drawOptions.highlightLast ?
+ this.options.lineStrokeWidthSnapped : this.options.lineStrokeWidthDefault,
opacity: this.options.opacity
});
- line.toFront();
+ line.toFront();
},
_measure: function (e) {
- var self = $(this).data("measure");
-
- if (self._srs !== self._map.getSrs()){
+ if (this._srs !== this._map.getSrs()){
// button.stop();
return;
}
- var mousePos = self._map.getMousePosition(e);
+ var mousePos = this._map.getMousePosition(e);
-
- var firstPointSnapped = self._isFirstPointSnapped(mousePos)
- && !self._polygonIsInvalid;
- var lastPointSnapped = self._isLastPointSnapped(mousePos);
+ var firstPointSnapped = this._isFirstPointSnapped(mousePos)
+ && !this._polygonIsInvalid;
+ var lastPointSnapped = this._isLastPointSnapped(mousePos);
+
var pos = {
mousePos: mousePos,
- pos: self._firstPointSnapped ?
- self._measurePoints[0].pos : lastPointSnapped ?
- self._measurePoints[self._measurePoints.length - 1].pos :
- self._map.convertPixelToReal(mousePos)
+ pos: this._firstPointSnapped ?
+ this._measurePoints[0].pos : lastPointSnapped ?
+ this._measurePoints[this._measurePoints.length - 1].pos :
+ this._map.convertPixelToReal(mousePos)
};
- self._trigger("onmeasure", null, pos);
-
- var previousPoint = self._measurePoints.length > 0 ?
- self._measurePoints[self._measurePoints.length - 1].pos : null;
+ this._trigger("onmeasure", null, pos);
- self._currentDistance = self._calculateDistance(
- previousPoint,
+
+ var previousPoint = this._measurePoints.length > 0 ?
+ this._measurePoints[this._measurePoints.length - 1].pos : null;
+
+ this._currentDistance = this._calculateDistance(
+ previousPoint,
pos.pos
);
+ console.log(previousPoint);
+ console.log(pos.pos);
+ this._trigger("onmeasuredistance", null, this._currentDistance);
- if (self._isPolygon(self._measurePoints, pos) && !self._polygonIsInvalid) {
-// updateArea(self._calculateArea(pos));
+ if (this._isPolygon(this._measurePoints, pos) && !this._polygonIsInvalid) {
+ this._currentArea = this._calculateArea(pos);
+ this._trigger("onmeasurearea", null, this._currentArea);
}
- else {
-// measureDialog.find(".mb-measure-area").parent().hide();
- }
- self._draw(pos, {
- highlightFirst: firstPointSnapped,
+ this._draw(pos, {
+ highlightFirst: firstPointSnapped,
highlightLast: lastPointSnapped,
drawPoints: true
- });
+ });
},
- reinitialize: function (e) {
- var self = $(this).data("measure");
- self._canvas.clear();
- self._measurePoints = [];
-
+ _reinitialize: function (e) {
+ this._canvas.clear();
+ this._measurePoints = [];
+
// hideMeasureData();
-
- self._polygonIsInvalid = false;
- self._currentPolygonIsInvalid = false;
- self._totalDistance = 0;
-
- self.element
- .bind("click", self._addPoint)
- .bind("mousemove", self._measure)
- .unbind("click", self._reinitialize)
+
+ this._polygonIsInvalid = false;
+ this._currentPolygonIsInvalid = false;
+ this._totalDistance = 0;
+
+ this.element
+ .unbind("click", $.proxy(this, "_reinitialize"))
+ .bind("click", $.proxy(this, "_addPoint"))
+ .bind("mousemove", $.proxy(this, "_measure"))
.css("cursor", "crosshair");
return false;
},
@@ -332,47 +331,45 @@
this.element.unbind("click", this._addPoint)
.unbind("mousemove", this._measure)
.css("cursor", "auto")
- .bind("click", this._reinitialize);
- },
+ .bind("click", $.proxy(this, "_reinitialize"));
+ },
_addPoint: function (e) {
- var self = $(this).data("measure");
+ var mousePos = this._map.getMousePosition(e);
- var mousePos = self._map.getMousePosition(e);
-
var pos = {
mousePos: mousePos,
- pos: self._map.convertPixelToReal(mousePos),
- distance: self._currentDistance
+ pos: this._map.convertPixelToReal(mousePos),
+ distance: this._currentDistance
};
- self._trigger("pointadded", null, pos);
-
- var firstPointSnapped = self._isFirstPointSnapped(mousePos);
- var lastPointSnapped = self._isLastPointSnapped(mousePos);
-
- self._isPolygon(self._measurePoints, pos);
- if (self._currentPolygonIsInvalid) {
- self._polygonIsInvalid = true;
+ this._trigger("pointadded", null, pos);
+
+ var firstPointSnapped = this._isFirstPointSnapped(mousePos);
+ var lastPointSnapped = this._isLastPointSnapped(mousePos);
+
+ this._isPolygon(this._measurePoints, pos);
+ if (this._currentPolygonIsInvalid) {
+ this._polygonIsInvalid = true;
}
- self._currentPolygonIsInvalid = false;
+ this._currentPolygonIsInvalid = false;
if (lastPointSnapped || firstPointSnapped) {
- self._draw(pos, {
- highlightFirst: firstPointSnapped,
+ this._draw(pos, {
+ highlightFirst: firstPointSnapped,
highlightLast: lastPointSnapped,
drawPoints: false
});
- self._addLastPoint(e);
+ this._addLastPoint(e);
}
else {
- self._measurePoints.push(pos);
+ this._measurePoints.push(pos);
- self._totalDistance += self._currentDistance;
- self._currentDistance = 0;
-
- lastPointSnapped = self._isLastPointSnapped(pos.mousePos);
- self._draw(pos, {
- highlightFirst: firstPointSnapped,
+ this._totalDistance += this._currentDistance;
+ this._currentDistance = 0;
+
+ lastPointSnapped = this._isLastPointSnapped(pos.mousePos);
+ this._draw(pos, {
+ highlightFirst: firstPointSnapped,
highlightLast: lastPointSnapped,
drawPoints: true
});
@@ -380,25 +377,24 @@
return true;
},
_init: function () {
- console.log(this.element);
},
_create: function () {
- // ":maps" is a Mapbender selector which
+ // ":maps" is a Mapbender selector which
// checks if an element is a Mapbender map
this.element = this.element.filter(":maps");
if (!this.element.jquery || this.element.size() === 0) {
$.error("This widget must be applied to a Mapbender map.");
}
-
+
this.element
- .bind("click", this._addPoint)
- .bind("mousemove", this._measure)
- .css("cursor", "crosshair");
+ .bind("click", $.proxy(this, "_addPoint"))
+ .bind("mousemove", $.proxy(this, "_measure"))
+ .css("cursor", "crosshair");
this._map = this.element.mapbender();
this._srs = this._map.getSrs();
-
+
var $canvas = $("<div />").css({
"z-index": 100,
"position": "relative"
@@ -409,7 +405,7 @@
this.element
.unbind("click", this._addPoint)
.unbind("mousemove", this._measure)
- .css("cursor", "default");
+ .css("cursor", "default");
this._canvas.clear();
More information about the Mapbender_commits
mailing list