[Mapbender-commits] r6640 - trunk/mapbender/http/javascripts
svn_mapbender at osgeo.org
svn_mapbender at osgeo.org
Mon Jul 26 09:56:48 EDT 2010
Author: christoph
Date: 2010-07-26 13:56:48 +0000 (Mon, 26 Jul 2010)
New Revision: 6640
Modified:
trunk/mapbender/http/javascripts/mod_measure.php
Log:
new mouse events
Modified: trunk/mapbender/http/javascripts/mod_measure.php
===================================================================
--- trunk/mapbender/http/javascripts/mod_measure.php 2010-07-26 11:25:32 UTC (rev 6639)
+++ trunk/mapbender/http/javascripts/mod_measure.php 2010-07-26 13:56:48 UTC (rev 6640)
@@ -20,16 +20,22 @@
require_once(dirname(__FILE__)."/../php/mb_validateSession.php");
echo "var mod_measure_target = '".$e_target[0]."';";
-?>
+?>
var mod_measure_color1 = "white";
var mod_measure_color2 = "black";
var mod_measure_font = "Arial, Helvetica, sans-serif";
-var mod_measure_fontsize = "9px";
-var mod_measure_basepoint = "#8a2be2";
-var mod_measure_linepoint = "#ff00ff";
+var mod_measure_fontsize = "10px";
+var mod_measure_basepoint = "#FF0000";
+var mod_measure_line = "#005395";
+var mod_measure_poly = "#c1d0e3";
+var mod_measure_line_opacity = "1";
+var mod_measure_poly_opacity = "0.2";
+
+
var mod_measure_bg = "";
var mod_measure_pgsql = true;
-
+var polygonIsSimple = true;
+var MeasureIsPolygon = false;
var mod_measure_win = null;
var mod_measure_elName = "measure";
@@ -43,6 +49,15 @@
var mod_measure_Dist = new Array();
var mod_measure_TotalDist = new Array();
+var mod_measure_WinContent_header = "<div style='font-family:verdana;font-size:12px;margin:5pt;'>";
+var mod_measure_WinContent_koord = "Koordinate:<br>";
+var mod_measure_WinContent_strecke = "<br>";
+var mod_measure_WinContent_flaeche = "<br>";
+var mod_measure_WinContent_clear = "<br><img src='../http_ms/img/button_ms/clear_off.png' onclick='javascript:mod_measure_clear();' onmouseover='this.src = this.src.replace(/_off/,\"_over\");' onmouseout='this.src = this.src.replace(/_over/,\"_off\");' alt='Messung löschen' title='Messung löschen'>";
+var mod_measure_WinContent_footer = "</div>";
+
+var MeasurePaper;
+
// global variable
window.eventAfterMeasure = new MapbenderEvent();
@@ -50,9 +65,15 @@
var mod_measure_img_off = new Image(); mod_measure_img_off.src = "<?php echo $e_src; ?>";
var mod_measure_img_over = new Image(); mod_measure_img_over.src = "<?php echo preg_replace("/_off/","_over",$e_src); ?>";
+
+function mod_measure_update(){
+ MeasureWin.setHtml(mod_measure_WinContent_header+mod_measure_WinContent_koord+mod_measure_WinContent_strecke+mod_measure_WinContent_flaeche+mod_measure_WinContent_clear+mod_measure_WinContent_footer);
+}
+
function init_mod_measure(ind){
+ local_ind=ind;
mod_measure_mapObj = getMapObjByName(mod_measure_target);
//ensure we have the div elements in Mapframe
var map_el = mod_measure_mapObj.getDomElement()
@@ -98,44 +119,69 @@
drawDashedLine();
});
mb_registerPanSubElement(mod_measure_target+"_measuring");
-}
+ MeasurePaper = Raphael(el, mod_measure_width, mod_measure_height);
+
+ }
+
+
function mod_measure_go(){
var el = mod_measure_mapObj.getDomElement();
- el.onmousedown = mod_measure_start;
- el.onmousemove = mod_measure_run;
- el.onmouseover = function () {
+ if (el) {
+ $(el).bind("mousedown", mod_measure_start)
+ .bind("mousemove", mod_measure_run);
el.style.cursor = 'crosshair';
- }
- el.onmouseout = function () {
- el.style.cursor = 'auto';
- }
+ }
+
var measureSub = eventAfterMeasure.trigger({}, "CAT");
- writeTag("",mod_measure_target+"_measure_sub",measureSub);
+
+ MeasureWin = new mb_popup({
+ title:"Messung",frameName:"",
+ left:265,top:75,width:250,height:120,
+ html: mod_measure_WinContent_header+"Fahren Sie mit der Maus über die Karte, um die Koordinaten anzuzeigen.<br> Klicken Sie, um eine Messung zu starten"+ mod_measure_WinContent_footer,
+ closeCallback:function(){mod_measure_disable();}
+ });
+
+ MeasureWin.show();
}
+
+
function mod_measure_disable(){
var el = mod_measure_mapObj.getDomElement();
- el.onmousedown = null;
- el.onmousemove = null;
- el.onmouseover = null;
- el.onmouseout = null;
+ if (el) {
+ $(el).unbind("mousedown", mod_measure_start)
+ .unbind("mousemove", mod_measure_run);
+ el.style.cursor = 'auto';
+ }
+
writeTag("",mod_measure_target+"_measure_display","");
- writeTag("",mod_measure_target+"_measure_sub","");
+ MeasureWin.destroy();
+ mod_measure_delete();
+ parent.mb_disableThisButton('measure');
}
+
+
function mod_measure_timeout(){
- var el = mod_measure_mapObj.getDomElement();
- el.onmousedown = null;
- el.ondblclick = null;
- el.onmousemove = null;
+ var el = mod_measure_mapObj.getDomElement();
+ if (el) {
+ $(el).unbind("mousedown", mod_measure_start)
+ .unbind("mousemove", mod_measure_run);
+ }
}
+
+
function mod_measure_disableTimeout(){
var el = mod_measure_mapObj.getDomElement();
- el.onmousedown = mod_measure_start;
- el.onmousemove = mod_measure_run;
+ if (el) {
+ $(el).bind("mousedown", mod_measure_start)
+ .bind("mousemove", mod_measure_run);
+ }
}
+
+
function mod_measure_start(e){
- mod_measure_mapObj.getMousePos(e);
+ var pos = mod_measure_mapObj.getMousePosition(e);
- var realWorldPos = makeClickPos2RealWorldPos(mod_measure_target,clickX,clickY);
+ var realWorldPos = makeClickPos2RealWorldPos(mod_measure_target, pos.x, pos.y);
if(mod_measure_epsg=="EPSG:4326"){
mod_measure_RX[mod_measure_RX.length] = realWorldPos[0];
mod_measure_RY[mod_measure_RY.length] = realWorldPos[1];
@@ -168,8 +214,28 @@
mod_measure_Dist[mod_measure_Dist.length] = 0;
mod_measure_TotalDist[mod_measure_TotalDist.length] = 0;
}
+ if (polygonIsSimple){checkpolygon()};
+ var closedist_x = Math.abs(mod_measure_RX[0] - mod_measure_RX[mod_measure_RX.length-1]);
+ var closedist_y = Math.abs(mod_measure_RY[0] - mod_measure_RY[mod_measure_RY.length-1]);
+ var closedist = Math.round(Math.sqrt(Math.pow(closedist_x,2) + Math.pow(closedist_y,2))*100)/100;
+ if (closedist > mod_measure_TotalDist[mod_measure_TotalDist.length-1]/2 ) {MeasureIsPolygon = false} else {MeasureIsPolygon = true}
drawDashedLine();
+ if(mod_measure_RX.length == 1){
+ mod_measure_WinContent_strecke="Punkt: "+mod_measure_RX[0]+" "+mod_measure_RY[0]+"<br>";
+ } else {
+ mod_measure_WinContent_strecke="Strecke: "+Math.round(mod_measure_TotalDist[mod_measure_TotalDist.length-1]*10)/10+" m<br>";
+ }
+ tmp_area = mod_measure_calc_area();
+
+ if (tmp_area != '' && polygonIsSimple && MeasureIsPolygon){
+ mod_measure_WinContent_flaeche="Fläche: "+mod_measure_calc_area()+"<br>";
+ } else {
+ mod_measure_WinContent_flaeche="<br>";
+ }
+ mod_measure_update();
}
+
+
function drawDashedLine(){
//check if epsg has changed
mod_measure_width = mod_measure_mapObj.width;
@@ -178,51 +244,28 @@
mod_measure_delete();
mod_measure_epsg = mod_measure_mapObj.epsg;
}
- var str_mPoints = "<div style='position:absolute;left:0px;top:0px' ><img src='"+mb_trans.src+"' width='"+mod_measure_width+"' height='0'></div>";
- str_mPoints += "<div style='position:absolute;left:0px;top:0px' ><img src='"+mb_trans.src+"' width='0' height='"+mod_measure_height+"'></div>";
- for(var i=0; i<mod_measure_RX.length; i++){
- var pos = makeRealWorld2mapPos(mod_measure_target,mod_measure_RX[i],mod_measure_RY[i]);
- str_mPoints += "<div style='font-size:1px;position:absolute;top:"+(pos[1]-2)+"px;left:"+(pos[0]-2)+"px;width:4px;height:4px;background-color:"+mod_measure_basepoint+"'></div>";
- if(i>0){
- str_mPoints += "<div style='font-family:"+mod_measure_font+";font-size:"+mod_measure_fontsize+";color:"+mod_measure_color1+";";
- if(mod_measure_bg != ""){
- str_mPoints += "background-color:"+mod_measure_bg+";";
- }
- str_mPoints += "position:absolute;top:"+(pos[1] + 3)+"px;left:"+(pos[0]+3)+"px;z-index:20'>"+mod_measure_TotalDist[i]+"</div>";
- str_mPoints += "<div style='font-family:"+mod_measure_font+";font-size:"+mod_measure_fontsize+";color:"+mod_measure_color2+";position:absolute;top:"+(pos[1] + 4)+"px;left:"+(pos[0]+4)+"px;z-index:21'>"+mod_measure_TotalDist[i]+"</div>";
- }
- }
- if(mod_measure_RX.length>1){
- for(var k=1; k<mod_measure_RX.length; k++){
+ MeasurePaper.clear();
+ if(mod_measure_RX.length>0){
+ var str_path;
+ for(var k=0; k<mod_measure_RX.length; k++){
var pos0 = makeRealWorld2mapPos(mod_measure_target,mod_measure_RX[k], mod_measure_RY[k]);
- var pos1 = makeRealWorld2mapPos(mod_measure_target,mod_measure_RX[k-1], mod_measure_RY[k-1]);
- str_mPoints += evaluateDashes(pos1[0],pos1[1],pos0[0],pos0[1],k);
+ if (k == 0){str_path += 'M'} else {str_path += 'L'};
+ str_path += pos0[0]+' '+pos0[1];
+ var circle = MeasurePaper.circle(pos0[0],pos0[1],3);
+ if (k==0){circle.attr({fill: mod_measure_basepoint, stroke: "none", opacity: mod_measure_line_opacity})}else{circle.attr({fill: mod_measure_line, stroke: "none", opacity: mod_measure_line_opacity})};
}
}
- writeTag("",mod_measure_target+"_measuring",str_mPoints);
+
+ if (mod_measure_RX.length >2 && polygonIsSimple && MeasureIsPolygon) {
+ poly = MeasurePaper.path(str_path + 'Z');
+ poly.attr({fill: mod_measure_poly, opacity: mod_measure_poly_opacity});
+ //poly.toFront();
+ };
+ var line = MeasurePaper.path(str_path);
+ line.attr({stroke: mod_measure_line, "stroke-width": 2, opacity: mod_measure_line_opacity});
+ line.toFront();
}
-function evaluateDashes(x1,y1,x2,y2,count){
- var str_dashedLine = "";
- var s = 10;
- var d = Math.sqrt(Math.pow((y1-y2),2) + Math.pow((x1-x2),2)) ;
- var n = Math.round(d/s);
- var s_x = (x2 - x1)/n;
- var s_y = (y2 - y1)/n;
- for(var i=1; i<n; i++){
- var x = Math.round(x1 + i * s_x)-2;
- var y = Math.round(y1 + i * s_y)-2;
- if(x >= 0 && x <= mod_measure_width && y >= 0 && y <= mod_measure_height){
- str_dashedLine += "<div style='font-size:1px;position:absolute;top:"+y+"px;left:"+x+"px;width:4px;height:4px;background-color:"+mod_measure_linepoint+"'></div>";
- }
- }
- str_dashedLine += "<div style='font-family:"+mod_measure_font+";font-size:"+mod_measure_fontsize+";color:"+mod_measure_color1+";";
- if(mod_measure_bg != ""){
- str_dashedLine += "background-color:"+mod_measure_bg+";";
- }
- str_dashedLine += "position:absolute;top:"+(Math.round(y1 + (y2-y1)/2 +3))+"px;left:"+(Math.round(x1 + (x2-x1)/2 +3))+"px'>"+mod_measure_Dist[count]+"</div>";
- str_dashedLine += "<div style='font-family:"+mod_measure_font+";font-size:"+mod_measure_fontsize+";color:"+mod_measure_color2+";position:absolute;top:"+(Math.round(y1 + (y2-y1)/2 + 4))+"px;left:"+(Math.round(x1 + (x2-x1)/2+4))+"px'>"+mod_measure_Dist[count]+"</div>";
- return str_dashedLine;
-}
+
function mod_measure_run(e){
mod_measure_mapObj.getMousePos(e);
var pos = makeClickPos2RealWorldPos(mod_measure_target,clickX,clickY);
@@ -240,135 +283,75 @@
var dist_y = Math.abs(mod_measure_RY[mod_measure_RY.length-1] - pos[1]);
dist=Math.sqrt(dist_x*dist_x+dist_y*dist_y);
}
- if(isNaN(dist) == false && clickX > 0 && clickX < mod_measure_width && clickY > 0 && clickY < mod_measure_height){
+ if(isNaN(dist) == false && pos.x > 0 && pos.x < mod_measure_width && pos.y > 0 && pos.y < mod_measure_height){
var str_display = "<span style='font-family:"+mod_measure_font+";font-size:"+mod_measure_fontsize+";color:"+mod_measure_color2+";'>"+(Math.round(dist*100)/100)+" m</span>";
writeTag("", mod_measure_target+"_measure_display",str_display);
- mb_arrangeElement("",mod_measure_target+"_measure_display",clickX +2, clickY - 10);
+ mb_arrangeElement("",mod_measure_target+"_measure_display",pos.x +2, pos.y - 10);
}
else{
writeTag("",mod_measure_target+"_measure_display","");
}
+ mod_measure_WinContent_koord="Koordinate: "+Math.round(pos[0])+ " "+Math.round(pos[1])+"<br>";
+ mod_measure_update();
}
-function mod_measure_close(){
- if(mod_measure_RX.length < 3 || (mod_measure_RX[mod_measure_RX.length-1] == mod_measure_RX[0] && mod_measure_RY[mod_measure_RY.length-1] == mod_measure_RY[0])){return;}
- mod_measure_RX[mod_measure_RX.length] = mod_measure_RX[0];
- mod_measure_RY[mod_measure_RY.length] = mod_measure_RY[0];
- if(mod_measure_RX.length > 1){
- var dist;
- if(mod_measure_epsg=="EPSG:4326"){
- //convert coordinates to radian
- var lon_from=(mod_measure_RX[mod_measure_RX.length-2]*Math.PI)/180;
- var lat_from=(mod_measure_RY[mod_measure_RY.length-2]*Math.PI)/180;
- var lon_to=(mod_measure_RX[mod_measure_RX.length-1]*Math.PI)/180;
- var lat_to=(mod_measure_RY[mod_measure_RY.length-1]*Math.PI)/180;
- dist=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));
- dist=Math.round(dist*100)/100;
- }
- else{
- var dist_x = Math.abs(mod_measure_RX[mod_measure_RX.length-2] - mod_measure_RX[mod_measure_RX.length-1]);
- var dist_y = Math.abs(mod_measure_RY[mod_measure_RY.length-2] - mod_measure_RY[mod_measure_RY.length-1]);
- dist = Math.round(Math.sqrt(Math.pow(dist_x,2) + Math.pow(dist_y,2))*100)/100;
- }
- mod_measure_Dist[mod_measure_Dist.length] = dist;
- var totalDist = mod_measure_TotalDist[mod_measure_TotalDist.length-1] + dist;
- mod_measure_TotalDist[mod_measure_TotalDist.length] = Math.round(totalDist * 100)/100;
- }
- else{
- mod_measure_Dist[mod_measure_Dist.length] = 0;
- mod_measure_TotalDist[mod_measure_TotalDist.length] = 0;
- }
- drawDashedLine();
-}
+
+
function mod_measure_delete(){
+ mod_measure_clear();
+ MeasureWin.destroy();
+}
+
+
+function mod_measure_clear(){
mod_measure_RX = new Array();
mod_measure_RY = new Array();
mod_measure_Dist = new Array();
mod_measure_TotalDist = new Array();
writeTag("",mod_measure_target+"_measuring","");
writeTag("",mod_measure_target+"_measure_display","");
+ mod_measure_WinContent_strecke = "<br>";
+ mod_measure_WinContent_flaeche = "<br>";
+ mod_measure_update();
+ MeasurePaper.clear();
+ polygonIsSimple = true;
}
-var mod_closePolygon_img = new Image();
-mod_closePolygon_img.src = "../img/button_gray/closePolygon_off.gif";
-mod_closePolygon_img.title = '<?php echo _mb("Close polygon");?>';
-eventAfterMeasure.register(function(){
- return mod_closePolygon();
-});
-
-function mod_closePolygon(){
- var str = "<div style='position:absolute;top:25px' onmouseup='mod_closePolygon_go()' ";
- str += "onmouseover='mod_measure_timeout()' onmouseout='mod_measure_disableTimeout()'><img src='"+mod_closePolygon_img.src+"' style='cursor:pointer' title='"+mod_closePolygon_img.title+"'></div>";
- return str;
+function mod_measure_calc_area(){
+ if(mod_measure_RX.length < 3 || (mod_measure_RX[mod_measure_RX.length-1] == mod_measure_RX[0] && mod_measure_RY[mod_measure_RY.length-1] == mod_measure_RY[0])){return "";}
+ var area = 0;
+ for (var i=1;i<mod_measure_RX.length;i++) {
+ area += (Number(mod_measure_RY[i-1])+Number(mod_measure_RY[i]))*(Number(mod_measure_RX[i-1])-Number(mod_measure_RX[i]))/2;
+ }
+ area += (mod_measure_RY[mod_measure_RX.length-1]+mod_measure_RY[0])*(mod_measure_RX[mod_measure_RX.length-1]-mod_measure_RX[0])/2;
+ area= Math.abs(area);
+ if (area > 10000000){
+ area /= 1000000; return Math.round(area*10)/10+" km²";
+ } else if (area > 100000){
+ area /= 10000; return Math.round(area*10)/10+" ha";
+ } else {
+ return Math.round(area*10)/10+" m²";
+ }
}
-function mod_closePolygon_go(){
- mod_measure_close();
-}
-var mod_rubber_img = new Image();
-mod_rubber_img.src = "../img/button_gray/rubber_off.gif";
-mod_rubber_img.title = '<?php echo _mb("Rubber");?>';
-eventAfterMeasure.register(function () {
- return mod_rubber();
-});
-
-function mod_rubber(){
- var str = "<div onmouseup='mod_rubber_go()' onmouseover='mod_measure_timeout()' onmouseout='mod_measure_go()'><img src='"+mod_rubber_img.src+"' style='cursor:pointer' title='"+mod_rubber_img.title+"'></div>";
- return str;
+function checkpolygon(){
+ for (var i=1;i<mod_measure_RX.length-2;i++) {
+ if (line_intersect(mod_measure_RX[i-1],mod_measure_RY[i-1],mod_measure_RX[i],mod_measure_RY[i],mod_measure_RX[mod_measure_RX.length-2],mod_measure_RY[mod_measure_RX.length-2],mod_measure_RX[mod_measure_RX.length-1],mod_measure_RY[mod_measure_RX.length-1] ) ) {polygonIsSimple = false}
+ }
}
-function mod_rubber_go(){
- mod_measure_delete();
-}
-var mod_getArea_img = new Image();
-mod_getArea_img.src = "../img/button_gray/getArea_off.gif";
-mod_getArea_img.title = '<?php echo _mb("Get area");?>';
-eventAfterMeasure.register(function () {
- return mod_getArea();
-});
-function mod_getArea(){
- var str = "<div id='getAreaButton' style='position:absolute;top:50px' onmouseup='mod_getArea_go()' ";
- str += "onmouseover='mod_measure_timeout()' onmouseout='mod_measure_disableTimeout()'><img src='"+mod_getArea_img.src+"' style='cursor:pointer' title='"+mod_getArea_img.title+"'></div>";
- return str;
-}
-function mod_getArea_go(){
- if(mod_measure_RX[mod_measure_RX.length -1] == mod_measure_RX[0] && mod_measure_RY[mod_measure_RY.length -1] == mod_measure_RY[0]){
- var ind = getMapObjIndexByName(mod_measure_target);
- var url = "../php/mod_evalArea.php?x=";
- for(var i=0; i<mod_measure_RX.length;i++){
- if(i>0){ url += ",";}
- url += mod_measure_RX[i];
- }
- url += "&y=";
- for(var i=0; i<mod_measure_RY.length;i++){
- if(i>0){ url += ",";}
- url += mod_measure_RY[i];
- }
- var srs = mb_mapObj[ind].epsg.split(":");
- url += "&srs="+ escape(srs[1]);
- url += "&length=" + mod_measure_TotalDist[mod_measure_TotalDist.length-1];
- url += "&distance=" + mod_measure_TotalDist[mod_measure_TotalDist.length-2];
- if(!mod_measure_win || mod_measure_win == null || mod_measure_win.closed == true){
- mod_measure_win = window.open(url,"mod_measure_win","width=200,height=150,resizable=yes");
- }
- else{
- mod_measure_win.document.location.href = url;
- }
- mod_measure_win.focus();
- }
- else{
- if(!mod_measure_win || mod_measure_win == null || mod_measure_win.closed == true){
- mod_measure_win = window.open("","mod_measure_win","width=200,height=150,resizable=yes");
- mod_measure_win.document.open("text/html");
- mod_measure_win.document.write("<span style = 'font-family : Arial, Helvetica, sans-serif;font-size : 12px;font-weight : bold;';>Strecke: " +mod_measure_TotalDist[mod_measure_TotalDist.length-1]+" m</span>");
- mod_measure_win.document.close();
- }
- else{
- mod_measure_win.document.open("text/html");
- mod_measure_win.document.write("<span style = 'font-family : Arial, Helvetica, sans-serif;font-size : 12px;font-weight : bold;';>Strecke: " +mod_measure_TotalDist[mod_measure_TotalDist.length-1]+" m</span>");
- mod_measure_win.document.close();
- }
- mod_measure_win.focus();
- }
-}
+function line_intersect ( a1, a2, b1, b2, c1, c2, d1, d2 ) {
+ var s;
+ var t;
+ //alert (a1+' '+a2+' '+b1+' '+b2+' '+c1+' '+c2+' '+d1+' '+d2);
+ var N = (b1-a1)*(d2-c2)-(b2-a2)*(d1-c1);
+ if (N == 0) {
+ // Strecken sind parallel
+ return false;
+ } else {
+ s = ((c1-a1)*(d2-c2)-(c2-a2)*(d1-c1)) / N;
+ t = (a1-c1 + s*(b1-a1)) / (d1-c1);
+ if (s <= 1 && s>=0 && t <= 1 && t>=0){return true;}else {return false;};
+ }
+}
\ No newline at end of file
More information about the Mapbender_commits
mailing list