[Mapbender-commits] r6674 - trunk/mapbender/http/javascripts

svn_mapbender at osgeo.org svn_mapbender at osgeo.org
Mon Aug 2 09:54:36 EDT 2010


Author: christoph
Date: 2010-08-02 13:54:36 +0000 (Mon, 02 Aug 2010)
New Revision: 6674

Modified:
   trunk/mapbender/http/javascripts/map_obj.js
Log:
html 4.01 transitional compatibility
scale calculation
bug fix slippy map

Modified: trunk/mapbender/http/javascripts/map_obj.js
===================================================================
--- trunk/mapbender/http/javascripts/map_obj.js	2010-08-02 13:52:19 UTC (rev 6673)
+++ trunk/mapbender/http/javascripts/map_obj.js	2010-08-02 13:54:36 UTC (rev 6674)
@@ -36,7 +36,10 @@
     });
     
     var localizeMap = function(){
-        $.post("../php/mod_map_messages.php", function(obj, status){
+        $.post("../php/mod_map_messages.php", {
+		"sessionName": Mapbender.sessionName,
+		"sessionId": Mapbender.sessionId
+        }, function(obj, status){
             mapMsgObj = $.parseJSON(obj);
         });
     };
@@ -143,12 +146,12 @@
         this.height = parseInt(h, 10);
 
         if (this.frameName) {
-            document.getElementById(this.frameName).style.width = this.width;
-            document.getElementById(this.frameName).style.height = this.height;
+            document.getElementById(this.frameName).style.width = this.width + "px";
+            document.getElementById(this.frameName).style.height = this.height + "px";
         }
         var domElement = this.getDomElement();
-        domElement.style.width = this.width;
-        domElement.style.height = this.height;
+        domElement.style.width = this.width + "px";
+        domElement.style.height = this.height + "px";
 		
 		this.calculateExtent(this.extent);
 		this.setMapRequest();
@@ -190,10 +193,10 @@
         this.height = parseInt(height, 10);
         //apply new height
         if (this.frameName) {
-            document.getElementById(this.frameName).style.height = this.height;
+            document.getElementById(this.frameName).style.height = this.height + "px";
         }
         var domElement = this.getDomElement();
-        domElement.style.height = this.height;
+        domElement.style.height = this.height + "px";
 		
 		this.events.dimensionsChanged.trigger({
 			width: this.width,
@@ -999,6 +1002,18 @@
         }
         return false;
     };
+
+	var calculateDistanceGeographic = function (a, b) {
+		var lon_from = (a.x * Math.PI) / 180;
+		var lat_from = (a.y * Math.PI) / 180;
+		var lon_to = (b.x * Math.PI) / 180;
+		var lat_to = (b.y * Math.PI) / 180;
+		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)
+		));
+	};
     
     /**
      * calculation of the mapscale
@@ -1014,21 +1029,22 @@
 			return null; 
 		} 
 		if (this.epsg == "EPSG:4326") {
-			// xl_length and yl_length refers to linear widths on horizontal and vertical axes
-			var xl_length=(parseFloat(bbox[3]) - parseFloat(bbox[1]));
-			var yl_length=(parseFloat(bbox[2]) - parseFloat(bbox[0]));
-			
-			// xa_length and ya_length refers to angular width on horizontal and vertical axes
-			var xa_length=(xl_length*360)/(2*Math.PI*6378137);
-			var ya_length=(xl_length*360)/(2*Math.PI*6378137);
-			
-			scale=((xl_length/this.getHeight())/mb_resolution);    
+			var xtenty = calculateDistanceGeographic(
+				new Mapbender.Point(
+					this.extent.center.x,
+					this.extent.min.y
+				),
+				new Mapbender.Point(
+					this.extent.center.x,
+					this.extent.max.y
+				)
+			);
+//			console.log(xtenty);
 		}
 		else {
-			xtenty = parseFloat(bbox[3]) - parseFloat(bbox[1]);
-			scale = (xtenty / this.getHeight()) * (mb_resolution * 100);
+			var xtenty = parseFloat(bbox[3]) - parseFloat(bbox[1]);
 		}       
-    
+		scale = (xtenty / this.getHeight()) * (mb_resolution * 100);
         return parseInt(Math.round(scale), 10);
     };
     
@@ -1071,18 +1087,27 @@
     
     this.repaintScale = function(x, y, scale){
         if (x === null && y === null) {
-            var arrayBBox = this.extent.toString().split(",");
-            x = parseFloat(arrayBBox[0]) +
-            ((parseFloat(arrayBBox[2]) - parseFloat(arrayBBox[0])) /
-            2);
-            y = parseFloat(arrayBBox[1]) +
-            ((parseFloat(arrayBBox[3]) - parseFloat(arrayBBox[1])) /
-            2);
+            x = this.extent.center.x;
+            y = this.extent.center.y;
         }
-        var minx = parseFloat(x) - (this.getWidth() / (mb_resolution * 100 * 2) * scale);
-        var miny = parseFloat(y) - (this.getHeight() / (mb_resolution * 100 * 2) * scale);
-        var maxx = parseFloat(x) + (this.getWidth() / (mb_resolution * 100 * 2) * scale);
-        var maxy = parseFloat(y) + (this.getHeight() / (mb_resolution * 100 * 2) * scale);
+		if (this.epsg == "EPSG:4326") {
+	        var minx = parseFloat(x);
+	        var miny = this.extent.min.y;
+	        var maxx = minx + 0.01;
+			var xtenty = scale * this.getHeight() / (mb_resolution * 100);
+	        var maxy = miny + xtenty/6371229;
+			
+//			console.log(xtenty);
+
+		}
+		else {
+	        var minx = parseFloat(x) - (this.getWidth() / (mb_resolution * 100 * 2) * scale);
+	        var miny = parseFloat(y) - (this.getHeight() / (mb_resolution * 100 * 2) * scale);
+	        var maxx = parseFloat(x) + (this.getWidth() / (mb_resolution * 100 * 2) * scale);
+	        var maxy = parseFloat(y) + (this.getHeight() / (mb_resolution * 100 * 2) * scale);
+			
+		}
+
         this.repaint(new Point(minx, miny), new Point(maxx, maxy));
     };
     
@@ -1090,6 +1115,7 @@
         if (typeof min !== "undefined" && typeof max !== "undefined") {
             this.extent = this.calculateExtent(new Extent(min, max));
         }
+//		console.log(this.extent);
         this.setMapRequest();
     };
     
@@ -1262,11 +1288,8 @@
         
     };
     
-	var deactivatePreviousMapImg = function (domNode, index) {
-		var tmpId = domNode.id;
-		var pattern = /_request_([0-9]+)_/;
-		var newId = tmpId.replace(pattern, "_request_" + (index-1) + "_");
-		$("#" + newId).css({
+	var deactivatePreviousMapImg = function (selector) {
+		$(selector).css({
 			visibility: "hidden"
 		});
 	};
@@ -1295,6 +1318,15 @@
 		} 
 	};
 	
+	var hideOutOfScaleWms = function (previousWmsIndices, currentWmsIndices, index) {
+		$(previousWmsIndices).each(function () {
+			if ($.inArray(parseInt(this, 10), currentWmsIndices) === -1) {
+				var selector = "#" + that.elementName + "_request_" + (index-1) + "_map_" + parseInt(this, 10);
+				deactivatePreviousMapImg(selector);
+			}
+		});
+	};
+	
 	var animateMaps = function (index) {
 		
 		//
@@ -1317,25 +1349,59 @@
 			if (newLeft === 0 && newTop === 0 && newHeight === that.getHeight() && newWidth === that.getWidth()) {
 				return;
 			}
+
+			//
+			// check which WMS need to be deactivated because they are out of scale
+			//
 			
+			// indices of wms in old map
+			var prevMapImg = $("#" + that.elementName + "_request_" + (index-1) + " div img");
+			var previousWmsIndices = [];
+			prevMapImg.each(function () {
+				var id = parseInt(this.id.split("_").pop(), 10);
+				previousWmsIndices.push(id);
+			});
+
+			// indices of wms in new map
+			var currentMapImg = $("#" + that.elementName + "_request_" + index + " div img");
+			var currentWmsIndices = [];
+			currentMapImg.each(function () {
+				var id = parseInt(this.id.split("_").pop(), 10);
+				currentWmsIndices.push(id);
+			});
+
+
+			
 			//
 			// show previous maps for animation
 			//
 			$("#" + that.elementName + "_request_" + (index - 1)).show();
-				
+
 			//
 			// hide new images until complete, but perform pan animation
 			//
-			$("#" + that.elementName + "_request_" + index + " div img").css({
-				visibility: "hidden"
-			}).load(function () {
-				this.style.visibility = "visible";
-				
-				$(this).data("loaded", true);
-				if ($(this).data("loaded") && (wasPanned || $(this).data("animationFinished"))) {
-					deactivatePreviousMapImg(this, index);
-				}
-			});
+			var currentMapImg = $("#" + that.elementName + "_request_" + index + " div img");
+			if (currentMapImg.size() === 0) {
+				hideOutOfScaleWms(previousWmsIndices, currentWmsIndices, index);
+			}
+			else {
+				currentMapImg.css({
+					visibility: "hidden"
+				}).load(function () {
+					this.style.visibility = "visible";
+					
+					$(this).data("loaded", true);
+					if ($(this).data("loaded") && (wasPanned || $(this).data("animationFinished"))) {
+						hideOutOfScaleWms(previousWmsIndices, currentWmsIndices, index);
+						
+						var tmpId = this.id;
+						var pattern = /_request_([0-9]+)_/;
+						var selector = "#" + tmpId.replace(pattern, "_request_" + (index-1) + "_");
+						deactivatePreviousMapImg(selector);
+					}
+				});
+			}
+		
 
 			if (wasPanned) {
 				return;
@@ -1345,7 +1411,7 @@
 			// animate new images (zoom)
 			//
 			if (newWidth !== that.getWidth() || newHeight !== that.getHeight()) {
-				var currentMapImg = $("#" + that.elementName + "_request_" + index + " div img");
+
 				currentMapImg.css({
 					width: newWidth,
 					height: newHeight				
@@ -1354,9 +1420,15 @@
 						width: that.getWidth() + "px",
 						height: that.getHeight() + "px"
 					}, "normal", "linear", function () {
+
 						$(this).data("animationFinished", true);
 						if ($(this).data("loaded") && ($(this).data("animationFinished"))) {
-							deactivatePreviousMapImg(this, index);
+							hideOutOfScaleWms(previousWmsIndices, currentWmsIndices, index);
+
+							var tmpId = this.id;
+							var pattern = /_request_([0-9]+)_/;
+							var selector = "#" + tmpId.replace(pattern, "_request_" + (index-1) + "_");
+							deactivatePreviousMapImg(selector);
 						}
 					}
 				);
@@ -1377,7 +1449,12 @@
 					$(this).children().children().each(function () {
 						$(this).data("animationFinished", true);
 						if ($(this).data("loaded") && $(this).data("animationFinished")) {
-							deactivatePreviousMapImg(this, index);
+							hideOutOfScaleWms(previousWmsIndices, currentWmsIndices, index);
+
+							var tmpId = this.id;
+							var pattern = /_request_([0-9]+)_/;
+							var selector = "#" + tmpId.replace(pattern, "_request_" + (index-1) + "_");
+							deactivatePreviousMapImg(selector);
 						}
 					});
 				}
@@ -1662,7 +1739,7 @@
 		this.width = this.getWidth();
 	}
 	if (this.height) {
-		domElement.style.height = this.height;
+		domElement.style.height = this.height + "px";
 	}
 	else {
 		this.height = this.getHeight();



More information about the Mapbender_commits mailing list