[Mapbender-commits] r4993 - trunk/mapbender/http/javascripts
svn_mapbender at osgeo.org
svn_mapbender at osgeo.org
Mon Nov 16 08:26:10 EST 2009
Author: christoph
Date: 2009-11-16 08:26:09 -0500 (Mon, 16 Nov 2009)
New Revision: 4993
Modified:
trunk/mapbender/http/javascripts/map_obj.js
Log:
Modified: trunk/mapbender/http/javascripts/map_obj.js
===================================================================
--- trunk/mapbender/http/javascripts/map_obj.js 2009-11-16 12:25:55 UTC (rev 4992)
+++ trunk/mapbender/http/javascripts/map_obj.js 2009-11-16 13:26:09 UTC (rev 4993)
@@ -157,43 +157,73 @@
domElement.style.height = this.height;
};
- this.getMousePosition = function(e){
- var clickX, clickY;
-
- if ($.browser.msie) {
- clickX = parseInt(window.event.offsetX, 10);
- clickY = parseInt(window.event.offsetY, 10);
- }
- else {
- clickX = e.pageX;
- clickY = e.pageY;
- }
-
- var currentPos = null;
- if (this.type == "DIV" && !$.browser.msie) {
- var mapDomElement = this.getDomElement();
- currentPos = new Point(clickX - parseInt(mapDomElement.style.left, 10), clickY - parseInt(mapDomElement.style.top, 10));
- // if the mouse position is not on top of the map, return null
- if (currentPos.x < 0 || currentPos.x > this.width ||
- currentPos.y < 0 ||
- currentPos.y > this.height) {
- return null;
- }
- }
- else {
- currentPos = new Point(clickX, clickY);
-
- // sometimes there are divs within the map (like copyright)
- // then offsetX and offsetY are not valid.
- if (window.event.srcElement.tagName.toUpperCase() !== "IMG") {
- var top = parseInt(window.event.srcElement.style.top, 10);
- var left = parseInt(window.event.srcElement.style.left, 10);
- currentPos = currentPos.plus(new Point(left, top));
- }
-
- }
- return currentPos;
- };
+ this.getMousePosition = function (event) {
+ var pageX, pageY, offsetX, offsetY;
+ var e = event || window.event;
+ var target = e.target || e.srcElement;
+
+ if (!e) {
+ return null;
+ }
+
+ // FIREFOX
+ if (typeof e.layerX !== "undefined") {
+ if (target.id === this.getDomElement().id) {
+ offsetX = e.layerX;
+ offsetY = e.layerY;
+ return new Point(offsetX, offsetY);
+ }
+ }
+
+ // FIREFOX w/ other target
+ if (typeof e.pageX !== "undefined") {
+ pageX = e.pageX;
+ pageY = e.pageY;
+ }
+ // IE
+ else if (typeof e.clientX !== "undefined") {
+ pageX = e.clientX + ((
+ window.document.body &&
+ typeof window.document.body.scrollLeft !== "undefined"
+ ) ?
+ window.document.body.scrollLeft : 0);
+ pageY = e.clientY + ((
+ window.document.body &&
+ typeof window.document.body.scrollTop !== "undefined"
+ ) ?
+ window.document.body.scrollTop : 0);
+ }
+ var x = 0;
+ var t = (typeof(target)=='string') ?
+ (document.getElementById ?
+ document.getElementById(e) :
+ (document.all ? document.all[e] : null)
+ ) : target;
+ while (t) {
+ if ($(t).eq(0).attr("id") === this.getDomElement().id && typeof t.offsetLeft !== "undefined") {
+ x += t.offsetLeft;
+ }
+ t = (typeof t.offsetParent !== "undefined") ?
+ t.offsetParent : null;
+ }
+ pageX -= x;
+
+ var y = 0;
+ var t = (typeof(target)=='string') ?
+ (document.getElementById ?
+ document.getElementById(e) :
+ (document.all ? document.all[e] : null)
+ ) : target;
+ while (t) {
+ if ($(t).eq(0).attr("id") === this.getDomElement().id && typeof t.offsetTop !== "undefined") {
+ y += t.offsetTop;
+ }
+ t = (typeof t.offsetParent !== "undefined") ?
+ t.offsetParent : null;
+ }
+ pageY -= y;
+ return new Point(pageX, pageY);
+ };
/**
* converts the extent of the mapobject so that the maximum extent will be displayed
@@ -526,21 +556,13 @@
}
};
- /**
- * zoom the map with a zoomfactor and optional to x,y coords
- *
- * @param {boolean} in_ in = true, out = false
- * @param {float} factor the zoomfactor 1 equals 100%
- * @param {float} x center to x-position
- * @param {float} y center to y-position
- */
- this.zoom = function(in_, factor, x, y){
+ var calculateExtentAfterZoom = function (in_, factor, x, y) {
factor = parseFloat(factor);
if (!in_) {
factor = 1 / factor;
}
- var extent = this.getExtentInfos();
+ var extent = that.getExtentInfos();
var distx = extent.maxx - extent.minx;
var disty = extent.maxy - extent.miny;
@@ -589,7 +611,19 @@
}
}
*/
- this.setExtent(minx, miny, maxx, maxy);
+ return new Mapbender.Extent(minx, miny, maxx, maxy);
+ };
+
+ /**
+ * zoom the map with a zoomfactor and optional to x,y coords
+ *
+ * @param {boolean} in_ in = true, out = false
+ * @param {float} factor the zoomfactor 1 equals 100%
+ * @param {float} x center to x-position
+ * @param {float} y center to y-position
+ */
+ this.zoom = function(in_, factor, x, y){
+ this.setExtent(calculateExtentAfterZoom(in_, factor, x, y));
this.setMapRequest();
};
@@ -676,7 +710,7 @@
* Return the map URL of the WMS at index i
* @param {Object} currentWmsIndex
*/
- this.getMapUrl = function(ii){
+ this.getMapUrl = function(ii, extent){
var currentWms = this.wms[ii];
var validLayers = currentWms.getLayers(this);
if (validLayers.length === 0) {
@@ -712,7 +746,7 @@
}
url += "&";
url += "SRS=" + this.epsg + "&";
- url += "BBOX=" + this.getExtent() + "&";
+ url += "BBOX=" + extent.toString() + "&";
url += "WIDTH=" + this.width + "&";
url += "HEIGHT=" + this.height + "&";
url += "FORMAT=" + currentWms.gui_wms_mapformat + "&";
@@ -883,59 +917,7 @@
};
this.setSingleMapRequest = function(wms_id){
- eventBeforeMapRequest.trigger({
- map: this
- });
-
- var ts = mb_timestamp();
-
- for (var ii = 0; ii < this.wms.length; ii++) {
- var currentWms = this.wms[ii];
-
- try {
- if (this.skipWmsIfSrsNotSupported && isIgnoredWms(currentWms)) {
- continue;
- }
- }
- catch (e) {
- new Mb_warning(e.message);
- }
-
- if (currentWms.wms_id != wms_id) {
- continue;
- }
- var newMapRequest = getLayerHtmlCode(ii);
-
- if (Mapbender.log) {
- var tmp = eval(Mapbender.log + "('" +
- newMapURL +
- "','" +
- ts +
- "')");
- }
- var myDivId = this.elementName + "_div_" + ii;
- var $wmsDiv = $("#" + myDivId);
- if ($wmsDiv.size() > 0) {
- $wmsDiv.remove();
- }
- var $newDiv = $(newMapRequest);
- $("#" + this.elementName + "_maps").append($newDiv);
-
- var myMapId = this.elementName + "_map_" + ii;
- eventAfterMapRequest.trigger({
- map: this,
- myMapId: myMapId,
- url: [this.getMapUrl(ii)]
- });
- this.afterMapRequest.trigger({
- map: this,
- myMapId: myMapId,
- url: [this.getMapUrl(ii)]
- });
- return true;
- }
- return false;
-
+ this.setMapRequest([wms_id]);
};
this.mb_setFutureObj = function(mod_back_cnt){
@@ -979,13 +961,43 @@
for (var i = requestCnt + 1; i <= numRequests; i++) {
$("#" + that.elementName + "_request_" + i).hide();
}
+// console.log("#" + that.elementName + "_request_" + requestCnt);
+ $("#" + that.elementName + "_request_" + requestCnt + " div img").css({
+ visibility: "visible"
+ }).each(function () {
+// console.log(this);
+ });
}
// new history item
else {
// console.log("new");
var newMapRequest = "";
for (var i = 0; i < idArray.length; i++) {
- newMapRequest += getLayerHtmlCode(idArray[i], requestCnt);
+ var currentWms = that.wms[idArray[i]];
+ if (doAnimation && currentWms.gui_wms_visible === 2) {
+ // request larger background image
+ var bgExtent = calculateExtentAfterZoom(false, 2.0, that.extent.center.x, that.extent.center.y);
+// console.log(bgExtent);
+ var bgSwPix = that.convertRealToPixel(bgExtent.min);
+ var bgNePix = that.convertRealToPixel(bgExtent.max);
+
+ var left = bgSwPix.x;
+ var top = bgNePix.y;
+ var width = bgNePix.x - bgSwPix.x;
+ var height = bgSwPix.y - bgNePix.y;
+ var html = getLayerHtmlCode(idArray[i], bgExtent, width, height, top, left, requestCnt);
+// console.log(html);
+ }
+
+ newMapRequest += getLayerHtmlCode(
+ idArray[i],
+ that.extent,
+ that.width,
+ that.height,
+ 0,
+ 0,
+ requestCnt
+ );
}
var $currentRequest = $(
"<div id='" + that.elementName + "_request_" + (requestCnt) +
@@ -1004,9 +1016,11 @@
});
}
}
+ $("#" + that.elementName + "_request_" + index).css().show();
+
};
- var displayMaps = function(index){
+ var displayMaps = function(index, wmsArray){
var ret = eventBeforeMapRequest.trigger({
map: that
}, "AND");
@@ -1016,9 +1030,24 @@
var myMapId = [];
var mapUrlArray = [];
var visibleWms = [];
+ var restrictedWmsArray = typeof wmsArray === "object" && wmsArray.length ?
+ wmsArray : [];
for (var ii = 0; ii < that.wms.length; ii++) {
- var currentWms = that.wms[ii];
+ var currentWms = that.wms[ii];
+ if (restrictedWmsArray.length > 0) {
+ var found = true;
+ for (var j = 0; j < restrictedWmsArray.length; j++) {
+ if (restrictedWmsArray[j] === currentWms.wms_id) {
+ found = false;
+ break;
+ }
+ }
+ if (!found) {
+ continue;
+ }
+ }
+
try {
if (that.skipWmsIfSrsNotSupported && isIgnoredWms(currentWms)) {
new Mb_notice(currentWms.wms_title + " is ignored.");
@@ -1033,7 +1062,7 @@
continue;
}
myMapId.push(that.elementName + "_request_" + index + "_map_" + ii);
- mapUrlArray.push(that.getMapUrl(ii));
+ mapUrlArray.push(that.getMapUrl(ii, that.extent));
visibleWms.push(ii);
}
@@ -1052,29 +1081,58 @@
};
+ var deactivatePreviousMapImg = function (domNode, index) {
+ var tmpId = domNode.id;
+ var pattern = /_request_([0-9]+)_/;
+ var newId = tmpId.replace(pattern, "_request_" + (index-1) + "_");
+ $("#" + newId).css({
+ visibility: "hidden"
+ });
+ };
+
var doAnimation = false;
var animateMaps = function (index) {
- $("#" + that.elementName + "_request_" + index).css().show();
+ //
+ // show new map
+ //
+
if (doAnimation) {
+ var newWidth = that.oldExtentPix.max.x - that.oldExtentPix.min.x;
+ var newHeight = that.oldExtentPix.min.y - that.oldExtentPix.max.y;
+ var newTop = that.oldExtentPix.max.y;
+ var newLeft = that.oldExtentPix.min.x;
+ //
+ // abort if no animation is required
+ //
+ if (newLeft === 0 && newTop === 0 && newHeight === that.height && newWidth === that.width) {
+ return;
+ }
+
+ //
+ // show previous maps for animation
+ //
$("#" + that.elementName + "_request_" + (index - 1)).css().show();
//
// hide new images until complete, but perform pan animation
//
- $("#" + that.elementName + "_request_" + index).children().children().css({
+ $("#" + that.elementName + "_request_" + index + " div img").css({
visibility: "hidden"
}).load(function () {
this.style.visibility = "visible";
+
+ $(this).data("loaded", true);
+ if ($(this).data("loaded") && $(this).data("animationFinished")) {
+ deactivatePreviousMapImg(this, index);
+ }
});
//
// animate new images (zoom)
//
- var newWidth = that.oldExtentPix.max.x - that.oldExtentPix.min.x;
- var newHeight = that.oldExtentPix.min.y - that.oldExtentPix.max.y;
if (newWidth !== that.width || newHeight !== that.height) {
var currentMapImg = $("#" + that.elementName + "_request_" + index + " div img");
currentMapImg.css({
@@ -1085,7 +1143,10 @@
width: that.width + "px",
height: that.height + "px"
}, "normal", "linear", function () {
- // TODO: deactive corresponding old image
+ $(this).data("animationFinished", true);
+ if ($(this).data("loaded") && $(this).data("animationFinished")) {
+ deactivatePreviousMapImg(this, index);
+ }
}
);
}
@@ -1095,19 +1156,28 @@
//
$("#" + that.elementName + "_request_" + index).css({
position: "absolute",
- top: that.oldExtentPix.max.y,
- left: that.oldExtentPix.min.x
+ top: newTop,
+ left: newLeft
}).animate(
{
left: "0px",
top: "0px"
- }, "normal", "linear"
+ }, "normal", "linear", function () {
+ $(this).children().children().each(function () {
+ $(this).data("animationFinished", true);
+ if ($(this).data("loaded") && $(this).data("animationFinished")) {
+ deactivatePreviousMapImg(this, index);
+ }
+ });
+ }
);
//
// animate previous request div and images
//
+
+ // calculate old extent's pixel pos in new extent
var oldLLPix = that.convertRealToPixel(that.oldExtent.min);
var oldURPix = that.convertRealToPixel(that.oldExtent.max);
@@ -1141,20 +1211,20 @@
"normal",
"linear"
);
-
-
-
}
};
- this.setMapRequest = function(){
+ this.setMapRequest = function(wmsArray){
// initialize history
(function(){
var extent = new Extent(that.extent);
if (typeof that.oldExtent === "undefined") {
that.setExtent(extent, false);
+// displayMaps(0, wmsArray);
displayMaps(0);
- animateMaps(0);
+ if (typeof wmsArray === "undefined") {
+ animateMaps(0);
+ }
}
else {
var oldExtent = new Extent(that.oldExtent);
@@ -1165,15 +1235,21 @@
if (typeof setExtent === "undefined" || setExtent === true) {
that.setExtent(extent);
}
+// displayMaps(index + 1, wmsArray);
displayMaps(index + 1);
- animateMaps(index + 1);
+ if (typeof wmsArray === "undefined") {
+ animateMaps(index + 1);
+ }
},
back: function(){
var index = that.history.getCurrentIndex();
// console.log("BACK: " + that.history.getCurrentIndex());
that.setExtent(oldExtent);
+// displayMaps(index, wmsArray);
displayMaps(index);
- animateMaps(index);
+ if (typeof wmsArray === "undefined") {
+ animateMaps(index);
+ }
}
});
@@ -1183,7 +1259,7 @@
this.history.forward(false);
};
- var getLayerHtmlCode = function(ii, requestCnt){
+ var getLayerHtmlCode = function(ii, extent, width, height, top, left, requestCnt){
var currentWms = that.wms[ii];
var myDivId = that.elementName + "_request_" + requestCnt + "_div_" + ii;
@@ -1199,7 +1275,7 @@
if (that.layers[ii] !== "" && layerNames !== '') {
// get map URL
- newMapURL = that.getMapUrl(ii);
+ newMapURL = that.getMapUrl(ii, that.extent);
var currentOpacity = currentWms.gui_wms_mapopacity;
if (currentOpacity != 1) {
@@ -1214,13 +1290,13 @@
if (newMapURL) {
imageString = "<img id='" + myMapId + "' name='mapimage' ";
imageString += "src='" + newMapURL + "' ";
- imageString += "width='" + that.width + "' ";
- imageString += "height='" + that.height + "' ";
+ imageString += "width='" + width + "' ";
+ imageString += "height='" + height + "' ";
imageString += "border='0'>";
}
var newMapRequest = "<div id='" + myDivId + "' ";
- newMapRequest += "style=\"position:absolute; top:0px; left:0px; ";
+ newMapRequest += "style=\"position:absolute; top:" + top + "px; left:" + left + "px; ";
//newMapRequest += "style=\"";
newMapRequest += "z-index:" + (2 * ii + 20) + ";" + opacityString + "\">";
newMapRequest += imageString;
More information about the Mapbender_commits
mailing list