[Mapbender-commits] r8820 - in trunk/mapbender: http/plugins http/widgets lib
svn_mapbender at osgeo.org
svn_mapbender at osgeo.org
Wed May 7 01:51:46 PDT 2014
Author: hwbllmnn
Date: 2014-05-07 01:51:46 -0700 (Wed, 07 May 2014)
New Revision: 8820
Modified:
trunk/mapbender/http/plugins/kmlTree.js
trunk/mapbender/http/plugins/mb_digitize_widget.php
trunk/mapbender/http/widgets/w_digitize.js
trunk/mapbender/lib/mb.ui.displayKmlFeatures.js
Log:
initial implementation of digitizing into json object
Modified: trunk/mapbender/http/plugins/kmlTree.js
===================================================================
--- trunk/mapbender/http/plugins/kmlTree.js 2014-05-07 08:47:30 UTC (rev 8819)
+++ trunk/mapbender/http/plugins/kmlTree.js 2014-05-07 08:51:46 UTC (rev 8820)
@@ -66,6 +66,9 @@
title = obj.url;
+ if(obj.refreshing) {
+ $KMLfolder.find('ul li[title="' + title + '"]').remove();
+ }
abbrevTitle = title.length < 20 ? title : title.substr(0,17) + "...";
$kmlEntry = $('<li title="'+ title +'" class="open"><button class="toggle" name="toggle" value="toggle" ></button> <input type="checkbox"'+checked +'/><button class="digitize-layer" name="digitize-layer" value="digitize-layer"></button><button class="remove" name="remove" value="remove" ></button><a href="#">'+abbrevTitle+'</a></li>');
$KMLfolder.children("ul").append($kmlEntry);
Modified: trunk/mapbender/http/plugins/mb_digitize_widget.php
===================================================================
--- trunk/mapbender/http/plugins/mb_digitize_widget.php 2014-05-07 08:47:30 UTC (rev 8819)
+++ trunk/mapbender/http/plugins/mb_digitize_widget.php 2014-05-07 08:51:46 UTC (rev 8820)
@@ -106,16 +106,8 @@
digitizeDialog.find(".mb-digitize-perimeter").parent().hide();
digitizeDialog.find(".mb-digitize-area").parent().hide();
digitizeDialog.find(".mb-digitize-angle").parent().hide();
-
};
- var changeDialogContent = function () {
- digitizeDialog.html(informationHtml);
- hideDigitizeData();
-
- o.$target.unbind("click", changeDialogContent);
- };
-
var create = function () {
//
// Initialise digitize dialog
@@ -143,132 +135,16 @@
});
};
- var updateCurrentPoint = function (evt, data) {
- if (data.pos) {
- var p = data.pos;
- digitizeDialog.find(".mb-digitize-current-point").text(
- p.pos.x + " " + p.pos.y
- ).parent().show();
- }
- };
-
- var updateClickedPoint = function (evt, data) {
- if (data.pos) {
- var p = data.pos;
- digitizeDialog.find(".mb-digitize-clicked-point").text(
- p.pos.x + " " + p.pos.y
- ).parent().show();
-
-
- var digitizedX = $('input[name="digitized_x_values"]').val();
- if(digitizedX != "") {
- digitizedX += ",";
- }
- digitizedX += p.pos.x;
- $('input[name="digitized_x_values"]').val(digitizedX)
-
- var digitizedY = $('input[name="digitized_y_values"]').val();
- if(digitizedY != "") {
- digitizedY += ",";
- }
- digitizedY += p.pos.y;
- $('input[name="digitized_y_values"]').val(digitizedY);
- }
- };
-
- var updateCurrentDistance = function (evt, data) {
- if (data.currentDistance) {
- var lastDistanceUnit = "m";
- var displayDistance = data.currentDistance;
- if (displayDistance > 10000){
- displayDistance /= 1000;
- lastDistanceUnit = "km";
- }
- digitizeDialog.find(".mb-digitize-distance-last-unit").html(lastDistanceUnit);
- digitizeDialog.find(".mb-digitize-distance-last").text(Math.round(displayDistance*10)/10).parent().show();
- }
- };
-
- var updateTotalDistance = function (evt, data) {
- if (data.totalDistance) {
- var totalDistanceUnit = "m";
- var displayTotalDistance = data.totalDistance;
- if (displayTotalDistance > 10000){
- displayTotalDistance = displayTotalDistance / 1000;
- totalDistanceUnit = "km";
- }
- digitizeDialog.find(".mb-digitize-distance-total-unit").html(totalDistanceUnit);
- digitizeDialog.find(".mb-digitize-distance-total").text(Math.round(displayTotalDistance*10)/10).parent().show();
- }
- else {
- digitizeDialog.find(".mb-digitize-distance-total").parent().hide();
- }
- };
-
- var updatePerimeter = function (evt, data) {
- if (data.perimeter) {
- var unit = "m";
- var displayPerimeter = data.perimeter;
- if (displayPerimeter > 10000){
- displayPerimeter = displayPerimeter / 1000;
- unit = "km";
- }
- digitizeDialog.find(".mb-digitize-perimeter-unit").html(unit);
- digitizeDialog.find(".mb-digitize-perimeter").text(Math.round(displayPerimeter*10)/10).parent().show();
-
- }
- else {
- //digitizeDialog.find(".mb-digitize-perimeter").parent().hide();
- }
- };
-
- var updateArea = function (evt, data) {
- if (data.area) {
- var areaUnit = "m²";
- var area = data.area;
- if (area > 10000000){
- area /= 1000000;
- areaUnit = "km²";
- }
- else if (area > 100000){
- area /= 10000;
- areaUnit = "ha";
- }
- area = Math.round(area*10)/10;
-
- digitizeDialog.find(".mb-digitize-area-unit").html(areaUnit);
- digitizeDialog.find(".mb-digitize-area").text(area).parent().show();
- }
- else {
- digitizeDialog.find(".mb-digitize-area").parent().hide();
- }
- };
-
- var updateAngle = function (evt, data) {
- if (data.currentAngle) {
- var unit = "°";
- var displayAngle = data.currentAngle;
- digitizeDialog.find(".mb-digitize-angle-unit").html(unit);
- digitizeDialog.find(".mb-digitize-angle").text(Math.round(displayAngle*10)/10).parent().show();
-
- }
- else {
- //digitizeDialog.find(".mb-digitize-angle").parent().hide();
- }
- };
-
- var updateView = function (evt, data) {
- updateCurrentPoint(evt, data);
- updateCurrentDistance(evt, data);
- updateTotalDistance(evt, data);
- updateArea(evt, data);
- updatePerimeter(evt, data);
- updateAngle(evt, data);
- };
-
var finishDigitize = function () {
inProgress = false;
that.deactivate();
+ // TODO experimental
+ var kml = $('#mapframe1').data('kml');
+ if(kml) {
+ var digit = o.$target.data('mb_digitize');
+ var pts = digit._digitizePoints;
+ kml.addGeometry(pts);
+ }
};
var reinitializeDigitize = function () {
@@ -285,11 +161,9 @@
if (o.$target.size() > 0) {
o.$target
.mb_digitize(o)
- .bind("mb_digitizeupdate", updateView)
- .bind("mb_digitizepointadded", updateClickedPoint)
+// .bind("mb_digitizepointadded", newPoint)
.bind("mb_digitizelastpointadded", finishDigitize)
- .bind("mb_digitizereinitialize", reinitializeDigitize)
- .bind("click", changeDialogContent);
+ .bind("mb_digitizereinitialize", reinitializeDigitize);
}
if (!inProgress) {
inProgress = true;
@@ -302,8 +176,7 @@
this.destroy = function () {
if (o.$target.size() > 0) {
o.$target.mb_digitize("destroy")
- .unbind("mb_digitizeupdate", updateView)
- .unbind("mb_digitizepointadded", updateClickedPoint)
+// .unbind("mb_digitizepointadded", newPoint)
.unbind("mb_digitizelastpointadded", finishDigitize)
.unbind("mb_digitizereinitialize", reinitializeDigitize);
}
Modified: trunk/mapbender/http/widgets/w_digitize.js
===================================================================
--- trunk/mapbender/http/widgets/w_digitize.js 2014-05-07 08:47:30 UTC (rev 8819)
+++ trunk/mapbender/http/widgets/w_digitize.js 2014-05-07 08:51:46 UTC (rev 8820)
@@ -19,9 +19,6 @@
_digitizePoints: [],
_map: undefined,
_srs: undefined,
- _currentDistance: 0,
- _currentAngle: 0,
- _totalDistance: 0,
_polygonIsInvalid: false,
_currentPolygonIsInvalid: false,
_canvas: undefined,
@@ -148,63 +145,6 @@
}
return null;
},
- //
- // calculate distance
- //
- _calculateDistanceGeographic: function (a, b) {
- var lon_from = this._toRad(a.x);
- var lat_from = this._toRad(a.y);
- 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.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.y - a.y), 2)
- ));
- },
- _calculateDistance: function (a, b) {
- if (a !== null && b !== null) {
- switch (this._map.getSrs()) {
- case "EPSG:4326":
- return this._calculateDistanceGeographic(a, b);
- default:
- return this._calculateDistanceMetric(a, b);
- }
- }
- return null;
- },
- _calculateAngle: function (a, b, c) {
- if (a !== null && b !== null && c !== null) {
- function angleAt(a,b,c){
- var vectorAB = [b.x- a.x,b.y-a.y];
- //var vectorBC = [c.x- b.x,c.y-b.y];
- var vectorBC = [b.x- c.x,b.y-c.y];
- var cosalpha = scalarProduct(vectorAB,vectorBC)/
- (vectorlen(vectorAB)*vectorlen(vectorBC));
-
- var acosalpha = Math.acos(cosalpha);
- return (acosalpha/Math.PI)*180;
- }
-
- function scalarProduct(va,vb){
- return va[0]*vb[0] + va[1]*vb[1];
- }
-
- function vectorlen(v) {
- return Math.sqrt(v[0]*v[0] + v[1]*v[1]);
- }
-
- var angle = angleAt(a,b,c);
- return angle;
- }
- return null;
- },
_isPointSnapped: function (p1, p2) {
return p1.dist(p2) <= this.options.digitizePointDiameter/2;
},
@@ -324,60 +264,6 @@
}
};
- //
- // calculate distance
- //
- var len = this._digitizePoints.length;
- var previousPoint = len > 0 ?
- this._digitizePoints[len - 1].pos : null;
-
- this._currentDistance = this._calculateDistance(
- previousPoint,
- digitizeData.pos.pos
- );
-
- //
- // calculate total distance and perimeter
- //
- if (len > 0) {
- digitizeData.currentDistance = this._currentDistance;
- this._totalDistance = this._currentDistance;
-
- if (!firstPointSnapped) {
- digitizeData.totalDistance = this._totalDistance ;
- }
-
- if (len > 1) {
- this._totalDistance = this._digitizePoints[len - 1].totalDistance + this._currentDistance;
- if (!firstPointSnapped) {
- digitizeData.totalDistance = this._totalDistance;
- }
- if (!lastPointSnapped) {
- digitizeData.perimeter = digitizeData.totalDistance + this._calculateDistance(
- this._digitizePoints[0].pos,
- digitizeData.pos.pos
- );
- }
-
- this._currentAngle = this._calculateAngle(
- this._digitizePoints[len-2].pos,
- previousPoint,
- digitizeData.pos.pos
- );
- digitizeData.currentAngle = this._currentAngle;
- }
- }
-
- //
- // calculate area
- //
- if (this._isPolygon(this._digitizePoints, digitizeData.pos) && !this._polygonIsInvalid) {
- this._currentArea = this._calculateArea(digitizeData.pos);
- if (!lastPointSnapped) {
- digitizeData.area = this._currentArea;
- }
- }
-
this._trigger("update", null, digitizeData);
this._draw(digitizeData.pos, {
@@ -412,10 +298,6 @@
}
};
- if (this._totalDistance) {
- data.pos.totalDistance = this._totalDistance;
- }
-
this._trigger("pointadded", e, data);
var firstPointSnapped = this._isFirstPointSnapped(mousePos);
@@ -433,16 +315,13 @@
highlightLast: lastPointSnapped,
drawPoints: false
});
- this._addLastPoint(e);
this._digitizePoints.closedPolygon = firstPointSnapped;
this._digitizePoints.closedLine = lastPointSnapped;
+ this._addLastPoint(e);
}
else {
this._digitizePoints.push(data.pos);
- this._totalDistance += this._currentDistance;
- this._currentDistance = 0;
-
lastPointSnapped = this._isLastPointSnapped(mousePos);
this._draw(data.pos, {
highlightFirst: firstPointSnapped,
Modified: trunk/mapbender/lib/mb.ui.displayKmlFeatures.js
===================================================================
--- trunk/mapbender/lib/mb.ui.displayKmlFeatures.js 2014-05-07 08:47:30 UTC (rev 8819)
+++ trunk/mapbender/lib/mb.ui.displayKmlFeatures.js 2014-05-07 08:51:46 UTC (rev 8820)
@@ -185,6 +185,52 @@
}
},
+ addGeometry: function(pts) {
+ var $map = $(this.element).mapbender();
+ var self = this;
+ var tp = pts.closedPolygon ? geomType.polygon : (pts.closedLine ? geomType.line : geomType.point);
+ var itm;
+ // todo select the one that's marked for editing
+ $.each(this._kmls, function(k, v) {
+ itm = v;
+ });
+
+ for(var i in itm.highlightArray){
+ itm.highlightArray[i].hide();
+ }
+ $map.setMapRequest();
+
+ var h = new Highlight([self.element.attr('id')], "mapframe1_" + parseInt(Math.random()*100000,10),{
+ "position":"absolute",
+ "top": "0px",
+ "left": "0px",
+ "z-index": "80" },1);
+
+ var geom = new Geometry();
+ var multi = new MultiGeometry(tp);
+ for(i = 0; i < pts.length; ++i) {
+ geom.addPoint(pts[i].pos);
+ }
+ geom.geomType = tp;
+ multi.add(geom);
+ multi.e = new Wfs_element();
+
+ var icon = multi.e.getElementValueByName("Mapbender:icon");
+ multi.e.setElement('title', 'title');
+ multi.e.setElement('name', 'name');
+
+ if(icon == "false" || icon === false){
+ multi.e.setElement("Mapbender:iconOffsetX", -10);
+ multi.e.setElement("Mapbender:iconOffsetY", -34);
+ multi.e.setElement("Mapbender:icon","../img/marker/red.png");
+ }
+ h.add(geom);
+
+ itm.data.features.push(JSON.parse(multi.toString()));
+ this._convertFromJson(itm);
+ this.element.trigger('kml:loaded',{type:"geojson",data:itm.data,url:itm.url,display: itm.display, refreshing: true});
+ },
+
_load : function(url){
var self = this, o = this.options;
var epsg = $(self.element).mapbender().epsg;
@@ -226,11 +272,13 @@
}
});
var kmls = mb_getWmcExtensionData('KMLS');
+ // try{
if(kmls) {
kmls = JSON.parse(kmls);
this._kmls = kmls;
for(var k in kmls) {
kmls[k].loadedOnStartup = true;
+ self._convertFromJson(kmls[k]);
self.element.trigger('kml:loaded',kmls[k]);
}
}
@@ -242,6 +290,9 @@
if(kmls) {
this.kmlOrder = JSON.parse(kmls);
}
+ // }catch(e){
+ // console.log(e)
+ // }
},
reload: function() {
@@ -309,23 +360,24 @@
$map.setMapRequest();
},
- _display : function(mapitem){
- var self = this, o = this.options;
- // getting the mapitem from the events bre
- mapitem = self._kmls[mapitem.url];
+ _convertFromJson: function(mapitem) {
var geojson = mapitem.data;
- if(typeof(Mapbender) != "undefined"){
+ var self = this;
var $map = $(self.element).mapbender();
var markers = [];
var title = "";
-
- if(geojson.features){
// we always transform _from_ 4326 KML use this as their default
// var projSrc = new Proj4js.Proj('EPSG:4326');
// var projDest = new Proj4js.Proj($map.epsg);
var markeroptions = {width: "19px", height: "34px"};
var g = null;
+ for(var i in mapitem.highlightArray){
+ var h = mapitem.highlightArray[i].hide;
+ if(h) h();
+ }
+
+
mapitem.geomArray = new GeometryArray();
mapitem.highlightArray = [];
mapitem.geomArray.importGeoJSON(geojson);
@@ -388,13 +440,18 @@
);
}
$map.setMapRequest();
+ },
+ _display : function(mapitem){
+ var self = this, o = this.options;
+ // getting the mapitem from the events bre
+ mapitem = self._kmls[mapitem.url];
+ if(typeof(Mapbender) != "undefined"){
+ this._convertFromJson(mapitem);
}
}
- }
-
};
More information about the Mapbender_commits
mailing list