[Mapbender-commits] r3868 - branches/pseudoSlippy/http/javascripts
svn_mapbender at osgeo.org
svn_mapbender at osgeo.org
Fri Apr 10 02:41:52 EDT 2009
Author: christoph
Date: 2009-04-10 02:41:51 -0400 (Fri, 10 Apr 2009)
New Revision: 3868
Added:
branches/pseudoSlippy/http/javascripts/map_obj.js_
Modified:
branches/pseudoSlippy/http/javascripts/map_obj.js
Log:
Modified: branches/pseudoSlippy/http/javascripts/map_obj.js
===================================================================
--- branches/pseudoSlippy/http/javascripts/map_obj.js 2009-04-08 09:27:11 UTC (rev 3867)
+++ branches/pseudoSlippy/http/javascripts/map_obj.js 2009-04-10 06:41:51 UTC (rev 3868)
@@ -7,11 +7,50 @@
function mb_mapObj_const(frameName, elementName, width, height, wms_index){
+ this.extent = null;
/**
+ * get the extent of the mapObj
+ *
+ * @member mb_mapObj_const
+ * @return extent of the mapObj as commaseparated minx,minx,maxx,maxy
+ * @type string
+ */
+ this.getExtent = function(){
+ return this.extent;
+ };
+
+ /**
+ * get the extent as minx, maxx, miny, maxy
+ *
+ * @return extent and additional informations of the mapObj
+ * @type Object
+ */
+ this.getExtentInfos = function(){
+ var ext = null;
+ var c = this.getExtent()
+ if (c !== null) {
+ c = c.split(",");
+ ext = new Extent(c[0], c[1], c[2], c[3]);
+ }
+ return ext;
+ };
+ /**
* set the extent of the wms
*/
this.setExtent = function(minx, miny, maxx, maxy){
+ var ext = this.getExtentInfos();
+ if (ext !== null) {
+ // old extent
+ this.oldExtent = new Extent(ext.minx, ext.miny, ext.maxx, ext.maxy);
+
+ // pixel coordinates of new extent in old extent
+ var oldpixll = this.convertRealToPixel(new Point(parseFloat(minx), parseFloat(miny)));
+ var oldpixur = this.convertRealToPixel(new Point(parseFloat(maxx), parseFloat(maxy)));
+ this.oldExtentPix = new Extent(oldpixll.x, oldpixll.y, oldpixur.x, oldpixur.y);
+ }
+
this.extent = String(minx) + "," + String(miny) + "," + String(maxx) + "," + String(maxy);
+
};
/**
@@ -222,31 +261,8 @@
domElement.style.width = this.width;
domElement.style.height = this.height;
-
+
/**
- * get the extent of the mapObj
- *
- * @member mb_mapObj_const
- * @return extent of the mapObj as commaseparated minx,minx,maxx,maxy
- * @type string
- */
- this.getExtent = function(){
- return this.extent;
- };
-
- /**
- * get the extent as minx, maxx, miny, maxy
- *
- * @return extent and additional informations of the mapObj
- * @type Object
- */
- this.getExtentInfos = function(){
- var c = this.getExtent().split(",");
- var ext = new Extent(c[0], c[1], c[2], c[3]);
- return ext;
- };
-
- /**
* Sets the list of layers, styles and querylayers for a specified WMS
*/
this.restateLayers = function(wms_id){
@@ -290,9 +306,6 @@
* @param {Object} direction
*/
this.pan = function (direction) {
- var extent = this.getExtentInfos();
- this.oldExtent = extent;
-
var arrayBBox = this.extent.split(",");
var minx = parseFloat(arrayBBox[0]);
var miny = parseFloat(arrayBBox[1]);
@@ -302,8 +315,6 @@
var xtenty = maxy - miny;
var factor = 0.4;
-// var oldPoint = this.convertRealToPixel(new Point(minx, miny));
-
switch (direction) {
case "NW" :
minx -= (xtentx * factor);
@@ -346,11 +357,7 @@
maxx -= (xtentx * factor);
break;
}
-// var newPoint = this.convertRealToPixel(new Point(minx, miny));
-// var diff = oldPoint.minus(newPoint);
-// this.arrangeElements(diff.y, diff.x);
-
- this.extent = minx + "," + miny + "," + maxx + "," + maxy;
+ this.setExtent(minx, miny, maxx, maxy);
this.setMapRequest();
};
@@ -734,12 +741,179 @@
}
this.setMapRequest = function(){
- if (this.oldExtent) {
- this.arrangeElements();
+
+ if (typeof(this.requestArray) === "undefined") {
+ this.requestArray = [];
}
+ if (typeof(this.requestCount) === "undefined") {
+ this.requestCount = 0;
+ }
+ else {
+ this.requestCount ++;
+ }
+
+ var currentRequest = {};
+ currentRequest.nr = this.requestCount;
+ currentRequest.requestId = this.elementName + "_request_" + currentRequest.nr;
+ currentRequest.styleString = "position:absolute;";
- firstMapReady = false;
+ // this is the first request
+ if (this.requestCount === 0) {
+ // no animation for the first request
+ currentRequest.styleString += "top:0px;left:0px;";
+ }
+ else {
+ var previousRequest = {};
+ previousRequest.nr = this.requestCount - 1;
+ previousRequest.requestId = this.elementName + "_request_" + previousRequest.nr;
+
+ if (this.requestCount >= 2) {
+ var previousButOneRequest = {};
+ previousButOneRequest.nr = this.requestCount - 2;
+ previousButOneRequest.requestId = this.elementName + "_request_" + previousButOneRequest.nr;
+ }
+ // this is the start position for the animation
+ currentRequest.styleString += "top:"+this.oldExtentPix.maxy+"px;left:"+this.oldExtentPix.minx+"px;";
+ }
+ currentRequest.styleString += "z-index:" + ii + ";";
+
+ // add new request div to DOM
+ $currentRequestDiv = $("<div id='" + currentRequest.requestId + "' style=\"" + currentRequest.styleString + "\"></div>");
+ $('#' + this.elementName+"_maps").append($currentRequestDiv);
+
+ for (var ii = 0; ii < this.wms.length; ii++) {
+ var currentWms = this.wms[ii];
+
+ if (!(currentWms.gui_wms_visible > 0)) {
+ continue;
+ }
+
+ //disable Layer which are out of scale
+ var validLayers = that.checkScale(ii);
+ var layerNames = validLayers.toString();
+
+ var newMapURL = null;
+
+ if (that.layers[ii] !== "" && layerNames !== ''){
+ // get map URL
+ newMapURL = that.getMapUrl(ii);
+ }
+
+ //
+ // container for the image, has opacity
+ //
+ var myDivId = this.elementName + "_div_" + ii + "_" + this.requestCount;
+ var currentOpacity = currentWms.gui_wms_mapopacity;
+ var opacityString = "";
+ if (currentOpacity != 1) {
+ opacityString += "opacity:" + currentOpacity + "; ";
+ opacityString += "Filter: Alpha(Opacity=" + currentOpacity*100 + "); ";
+ opacityString += "-moz-opacity:" + currentOpacity + " ; ";
+ opacityString += "-khtml-opacity:" + currentOpacity;
+ }
+ var newMapRequest = "<div id='"+myDivId+"' style=\""+opacityString+"\"></div>";
+ var $div = $(newMapRequest);
+ $currentRequestDiv.append($div);
+
+ //
+ // actual image
+ //
+ var myMapId = this.elementName + "_map_" + ii + "_" + this.requestCount;
+
+ var imageString = "";
+ if (newMapURL) {
+ if (that.requestCount >= 2) {
+ $("#" + previousButOneRequest.requestId).remove();
+ }
+
+ var width, height;
+ if (this.requestCount === 0) {
+ // no animation for first map request
+ width = this.width;
+ height = this.height;
+ }
+ else {
+ // animation default settings for zoom
+ width = this.oldExtentPix.maxx - this.oldExtentPix.minx;
+ height = this.oldExtentPix.miny - this.oldExtentPix.maxy;
+ }
+ imageString = "<img id='"+myMapId+"' name='mapimage' ";
+ imageString += "width='"+width+"' ";
+ imageString += "height='"+height+"' ";
+ imageString += "style='visibility:hidden' ";
+ imageString += "border='0' />";
+
+ $(imageString).attr('src', newMapURL).appendTo($div).load(function () {
+ this.style.visibility = "visible";
+ });
+ }
+
+ that.mapURL[ii]= newMapURL;
+ currentWms.mapURL = newMapURL;
+
+ if (mb_log && currentWms.mapURL) {
+ var tmp = eval(mb_log + "('" +newMapURL + "','" + ts + "')");
+ }
+// myMapId.push(myMapId);
+
+ }
+ //
+ // animate divs and imgs
+ //
+
+ // no animation necessary if first request.
+ if (this.requestCount > 0) {
+
+ // animate previous request div and images
+ var oldLL = new Point(this.oldExtent.minx, this.oldExtent.miny);
+ var oldUR = new Point(this.oldExtent.maxx, this.oldExtent.maxy);
+
+ var oldLLPix = this.convertRealToPixel(oldLL);
+ var oldURPix = this.convertRealToPixel(oldUR);
+
+ var left = oldLLPix.x;
+ var top = oldURPix.y;
+ var width = oldURPix.x - oldLLPix.x;
+ var height = oldLLPix.y - oldURPix.y;
+
+ console.log(previousRequest.requestId);
+
+ var mapDiv = $("#" + previousRequest.requestId);
+ mapDiv.animate({
+ left: left + "px",
+ top: top + "px"
+ }, {
+ duration: "slow"
+ });
+
+ var mapImg = $("#" + previousRequest.requestId + " div img");
+ mapImg.animate({
+ width: width + "px",
+ height: height + "px"
+ }, {
+ duration: "slow"
+ });
+
+ // animate current request div and images
+ var currentMapDiv = $("#" + currentRequest.requestId);
+ currentMapDiv.animate({
+ left: "0px",
+ top: "0px"
+ }, {
+ duration: "slow"
+ });
+
+ var currentMapImg = $("#" + currentRequest.requestId + " div img");
+ currentMapImg.animate({
+ width: this.width + "px",
+ height: this.height + "px"
+ }, {
+ duration: "slow"
+ });
+
+ }
+
var ret = eventBeforeMapRequest.trigger({
map: this
}, "AND"
@@ -753,31 +927,13 @@
var newMapRequest = "";
- // once the first map is ready, the old ones will be deleted
- removeOldMaps = function () {
- for (var ii = 0; ii < that.wms.length; ii++) {
- var myDivId = that.elementName + "_div_" + ii;
- var $div = $('#' + myDivId);
- if (!firstMapRequest) {
- while ($div.children().size() > 1) {
- $div.children().eq(0).remove();
- }
- }
- }
- }
-
for (var ii = 0; ii < this.wms.length; ii++) {
var currentWms = this.wms[ii];
if (!(currentWms.gui_wms_visible > 0)) {
continue;
}
- myMapId.push(this.elementName + "_map_" + ii);
-
- newMapRequest += getLayerHtmlCode(ii);
-
}
-// writeTag(this.frameName, this.elementName+"_maps", newMapRequest);
eventAfterMapRequest.trigger({
@@ -788,112 +944,13 @@
var that = this;
- var firstMapReady = false;
- var firstMapRequest = true;
-
- var removeOldMaps = function () {
- // is written in setMapRequest
- return null;
- };
-
this.arrangeElements = function () {
- var oldLL = new Point(this.oldExtent.minx, this.oldExtent.miny);
- var oldUR = new Point(this.oldExtent.maxx, this.oldExtent.maxy);
-
- var oldLLPix = this.convertRealToPixel(oldLL);
- var oldURPix = this.convertRealToPixel(oldUR);
-
- var left = oldLLPix.x;
- var top = oldURPix.y;
- var width = oldURPix.x - oldLLPix.x;
- var height = oldLLPix.y - oldURPix.y;
-
- var mapDiv = $("#" + this.elementName + "_maps div");
- mapDiv.animate({
- left: left + "px",
- top: top + "px"
- },
- {
- duration: "slow"
- });
-
- var mapImg = $("#" + this.elementName + "_maps div img");
- mapImg.animate({
- width: width + "px",
- height: height + "px"
- },
- {
- duration: "slow"
- });
};
var getLayerHtmlCode = function (ii) {
var currentWms = that.wms[ii];
-
- var myDivId = that.elementName + "_div_" + ii;
- var myMapId = that.elementName + "_map_" + ii;
- //disable Layer which are out of scale
- var validLayers = that.checkScale(ii);
- var layerNames = validLayers.toString();
- var newMapURL = false;
- var opacityString = "";
-
- if (that.layers[ii] !== "" && layerNames !== ''){
- // get map URL
- newMapURL = that.getMapUrl(ii);
-
- var currentOpacity = currentWms.gui_wms_mapopacity;
- if (currentOpacity != 1) {
- opacityString += "opacity:" + currentOpacity + "; ";
- opacityString += "Filter: Alpha(Opacity=" + currentOpacity*100 + "); ";
- opacityString += "-moz-opacity:" + currentOpacity + " ; ";
- opacityString += "-khtml-opacity:" + currentOpacity;
- }
- }
-
-
- var imageString = "";
- if (newMapURL) {
- imageString = "<img id='"+myMapId+"' name='mapimage' ";
- imageString += "width='"+that.width+"' ";
- imageString += "height='"+that.height+"' ";
- imageString += "border='0' />";
- }
-
- var newMapRequest = "<div id='"+myDivId+"' ";
- newMapRequest += "style=\"position:absolute; top:0px; left:0px; ";
- newMapRequest += "z-index:" + ii + ";" + opacityString + "\">";
- newMapRequest += "</div>";
-
- if ($('#' + myDivId).size() === 0) {
- $('#' + that.elementName+"_maps").append($(newMapRequest));
- }
- var $div = $('#' + myDivId);
- $(imageString).attr('src', newMapURL).load(function () {
- $div.css({
- left: "0px", top: "0px"
- }).append( $(this) );
- if (!firstMapReady) {
- mb_arrangeElement(that.frameName, that.elementName+"_maps", 0, 0);
- for(var i=0; i<mb_PanSubElements.length; i++){
- mb_arrangeElement(that.frameName, mb_PanSubElements[i], 0, 0);
- }
-
- firstMapReady = true;
- removeOldMaps();
- firstMapRequest = false;
- }
- });
-
- that.mapURL[ii]= newMapURL;
- currentWms.mapURL = newMapURL;
-
- if (mb_log && currentWms.mapURL) {
- var tmp = eval(mb_log + "('" +newMapURL + "','" + ts + "')");
- }
-
return newMapRequest;
}
Added: branches/pseudoSlippy/http/javascripts/map_obj.js_
===================================================================
--- branches/pseudoSlippy/http/javascripts/map_obj.js_ (rev 0)
+++ branches/pseudoSlippy/http/javascripts/map_obj.js_ 2009-04-10 06:41:51 UTC (rev 3868)
@@ -0,0 +1,1042 @@
+/*
+* $Id: map_obj.js 2517 2008-06-19 16:40:00Z christoph $
+* COPYRIGHT: (C) 2001 by ccgis. This program is free software under the GNU General Public
+* License (>=v2). Read the file gpl.txt that comes with Mapbender for details.
+*/
+var mb_mapObj = [];
+
+function mb_mapObj_const(frameName, elementName, width, height, wms_index){
+
+ /**
+ * set the extent of the wms
+ */
+ this.setExtent = function(minx, miny, maxx, maxy){
+ this.extent = String(minx) + "," + String(miny) + "," + String(maxx) + "," + String(maxy);
+ };
+
+ /**
+ * get the width of the mapObj
+ *
+ * @member mb_mapObj_const
+ * @return width of the mapObj
+ * @type integer
+ */
+ this.getWidth = function(){
+ return parseInt(this.width, 10);
+ };
+
+ /**
+ * set the width of the mapObj
+ *
+ * @param {integer} widht the width of the mapObj
+ */
+ this.setWidth = function(width){
+ this.width = parseInt(width, 10);
+
+ //apply new width
+ if(this.frameName){
+ document.getElementById(this.frameName).style.width = this.width;
+ }
+ var domElement = this.getDomElement();
+ domElement.style.width = this.width;
+ };
+
+ /**
+ * get the height of the mapObj
+ *
+ * @member mb_mapObj_const
+ * @return width of the mapObj
+ * @type integer
+ */
+ this.getHeight = function(){
+ return parseInt(this.height, 10);
+ };
+
+ this.getDomElement = function(){
+ if(this.frameName){
+ return window.frames[this.frameName].document.getElementById(this.elementName);
+ }
+ return document.getElementById(this.elementName);
+ }
+
+ /**
+ * set the height of the mapObj
+ *
+ * @param {integer} height the height of the mapObj
+ */
+ this.setHeight = function(height){
+ this.height = parseInt(height, 10);
+ //apply new height
+ if(this.frameName){
+ document.getElementById(this.frameName).style.height = this.height;
+ }
+ var domElement = this.getDomElement();
+ domElement.style.height = this.height;
+ };
+
+ this.getMousePosition = function (e) {
+ var clickX, clickY;
+
+ if ($.browser.msie) {
+ if (window.event) {
+ clickX = window.event.clientX;
+ clickY = window.event.clientY;
+ }
+ else {
+ clickX = e.clientX;
+ clickY = e.clientY;
+ }
+ }
+ else{
+ clickX = e.pageX;
+ clickY = e.pageY;
+ }
+
+ var currentPos = null;
+ if (this.type == "DIV") {
+ var mapDomElement = this.getDomElement();
+ currentPos = new Point(
+ clickX - parseInt(mapDomElement.style.left),
+ clickY - parseInt(mapDomElement.style.top)
+ );
+ // 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
+ );
+ }
+ return currentPos;
+ }
+
+ /**
+ * converts the extent of the mapobject so that the maximum extent will be displayed
+ */
+ this.calculateExtent = function(ext){
+ var relation_px_x = this.getWidth() / this.getHeight();
+ var relation_px_y = this.getHeight() / this.getWidth();
+ var relation_bbox_x = ext.extentx / ext.extenty;
+ if (relation_bbox_x <= relation_px_x) {
+ ext.minx = ext.centerx - relation_px_x * ext.extenty / 2;
+ ext.maxx = ext.centerx + relation_px_x * ext.extenty / 2;
+ }
+ if (relation_bbox_x > relation_px_x) {
+ ext.miny = ext.centery - relation_px_y * ext.extentx / 2;
+ ext.maxy = ext.centery + relation_px_y * ext.extentx / 2;
+ }
+ this.setExtent(ext.minx, ext.miny, ext.maxx, ext.maxy);
+ return ext;
+ };
+
+ this.width = width;
+ this.height = height;
+ this.frameName = frameName;
+ this.type = (frameName !== "") ? "IFRAME" : "DIV";
+ this.elementName = elementName;
+ this.layers = [];
+ this.styles = [];
+ this.querylayers = [];
+ this.geom = "";
+ this.gml = "";
+ this.wms = [];
+
+ //
+ // Add pointers to WMS objects which are in this map.
+ // If wms_index is set (=map is overview), only this
+ // WMS is being pointed to.
+ //
+ var index = 0;
+ for (var i = 0; i < wms.length; i++) {
+ var isValidWms = (wms_index === null) || (wms_index == i);
+ if (isValidWms) {
+ this.wms[index] = wms[i];
+ this.wms[index].mapURL = false;
+ index++;
+ }
+ }
+
+ //
+ // set list of visible layers, active querylayers
+ // and styles for each WMS in this map
+ //
+ var cnt_layers;
+ var cnt_querylayers;
+ var styles;
+ var layers;
+ var querylayers = "";
+ for (i = 0; i < this.wms.length; i++) {
+ cnt_layers = 0;
+ cnt_querylayers = 0;
+ styles = "";
+ layers = "";
+ querylayers = "";
+
+ for (var ii = 0; ii < this.wms[i].objLayer.length; ii++) {
+ // layer is visible and not root layer
+ if (this.wms[i].objLayer[ii].gui_layer_visible == 1 && ii > 0) {
+ if (cnt_layers > 0) {
+ layers += ",";
+ styles += ",";
+ }
+ layers += wms[i].objLayer[ii].layer_name;
+ styles += "";
+ cnt_layers++;
+ }
+ // layer is queryable and not root layer
+ if (this.wms[i].objLayer[ii].gui_layer_querylayer == 1 && ii > 0) {
+ if (cnt_querylayers > 0) {
+ querylayers += ",";
+ }
+ querylayers += wms[i].objLayer[ii].layer_name;
+ cnt_querylayers++;
+ }
+ }
+ this.layers[i] = layers;
+ this.styles[i] = styles;
+ this.querylayers[i] = querylayers;
+ }
+
+ this.epsg = wms[0].gui_wms_epsg;
+ var bbox_minx, bbox_miny, bbox_maxx, bbox_maxy;
+
+ for (var i = 0; i < wms[0].gui_epsg.length; i++) {
+ if (this.epsg == wms[0].gui_epsg[i]) {
+ bbox_minx = parseFloat(wms[0].gui_minx[i]);
+ bbox_miny = parseFloat(wms[0].gui_miny[i]);
+ bbox_maxx = parseFloat(wms[0].gui_maxx[i]);
+ bbox_maxy = parseFloat(wms[0].gui_maxy[i]);
+ }
+ }
+ var wmsExtent = new Extent(bbox_minx, bbox_miny, bbox_maxx, bbox_maxy);
+ this.oldExtent = null;
+
+ this.calculateExtent(wmsExtent);
+
+ this.mapURL = [];
+ var domElement = this.getDomElement();
+ domElement.style.width = this.width;
+ domElement.style.height = this.height;
+
+
+ /**
+ * get the extent of the mapObj
+ *
+ * @member mb_mapObj_const
+ * @return extent of the mapObj as commaseparated minx,minx,maxx,maxy
+ * @type string
+ */
+ this.getExtent = function(){
+ return this.extent;
+ };
+
+ /**
+ * get the extent as minx, maxx, miny, maxy
+ *
+ * @return extent and additional informations of the mapObj
+ * @type Object
+ */
+ this.getExtentInfos = function(){
+ var c = this.getExtent().split(",");
+ var ext = new Extent(c[0], c[1], c[2], c[3]);
+ return ext;
+ };
+
+ /**
+ * Sets the list of layers, styles and querylayers for a specified WMS
+ */
+ this.restateLayers = function(wms_id){
+ for (var i = 0; i < this.wms.length; i++) {
+ if (this.wms[i].wms_id == wms_id) {
+ var currentWms = this.wms[i];
+ var cnt_layers = 0;
+ var cnt_querylayers = 0;
+ var layers = "";
+ var styles = "";
+ var querylayers = "";
+ for (var ii = 0; ii < currentWms.objLayer.length; ii++) {
+ var currentLayer = currentWms.objLayer[ii];
+ if (currentLayer.gui_layer_visible == 1 && !currentLayer.has_childs) {
+ if (cnt_layers > 0) {
+ layers += ",";
+ styles += ",";
+ }
+ layers += currentLayer.layer_name;
+ styles += "";
+ cnt_layers++;
+ }
+ if (currentLayer.gui_layer_querylayer == 1 && !currentLayer.has_childs) {
+ if (cnt_querylayers > 0) {
+ querylayers += ",";
+ }
+ querylayers += currentLayer.layer_name;
+ cnt_querylayers++;
+ }
+ }
+ this.layers[i] = layers;
+ this.querylayers[i] = querylayers;
+ this.styles[i] = styles;
+ }
+ }
+// this.setExtent(ext.minx,ext.miny,ext.maxx,ext.maxy);
+ };
+
+ /**
+ *
+ * @param {Object} direction
+ */
+ this.pan = function (direction) {
+ var extent = this.getExtentInfos();
+ this.oldExtent = extent;
+
+ var arrayBBox = this.extent.split(",");
+ var minx = parseFloat(arrayBBox[0]);
+ var miny = parseFloat(arrayBBox[1]);
+ var maxx = parseFloat(arrayBBox[2]);
+ var maxy = parseFloat(arrayBBox[3]);
+ var xtentx = maxx - minx;
+ var xtenty = maxy - miny;
+ var factor = 0.4;
+
+// var oldPoint = this.convertRealToPixel(new Point(minx, miny));
+
+ switch (direction) {
+ case "NW" :
+ minx -= (xtentx * factor);
+ maxx -= (xtentx * factor);
+ miny += (xtenty * factor);
+ maxy += (xtenty * factor);
+ break;
+ case "N" :
+ miny += (xtenty * factor);
+ maxy += (xtenty * factor);
+ break;
+ case "NE" :
+ minx += (xtentx * factor);
+ maxx += (xtentx * factor);
+ miny += (xtenty * factor);
+ maxy += (xtenty * factor);
+ break;
+ case "E" :
+ minx += (xtentx * factor);
+ maxx += (xtentx * factor);
+ break;
+ case "SE" :
+ minx += (xtentx * factor);
+ maxx += (xtentx * factor);
+ miny -= (xtenty * factor);
+ maxy -= (xtenty * factor);
+ break;
+ case "S" :
+ miny -= (xtenty * factor);
+ maxy -= (xtenty * factor);
+ break;
+ case "SW" :
+ minx -= (xtentx * factor);
+ maxx -= (xtentx * factor);
+ miny -= (xtenty * factor);
+ maxy -= (xtenty * factor);
+ break;
+ case "W" :
+ minx -= (xtentx * factor);
+ maxx -= (xtentx * factor);
+ break;
+ }
+// var newPoint = this.convertRealToPixel(new Point(minx, miny));
+// var diff = oldPoint.minus(newPoint);
+// this.arrangeElements(diff.y, diff.x);
+
+ this.extent = minx + "," + miny + "," + maxx + "," + maxy;
+ this.setMapRequest();
+
+ };
+
+ this.zoomFull = function () {
+ var extent = this.getExtentInfos();
+ this.oldExtent = extent;
+
+ for (var i = 0; i < this.wms[0].gui_epsg.length; i++) {
+ if (this.epsg == this.wms[0].gui_epsg[i]) {
+ var bbox_minx = parseFloat(this.wms[0].gui_minx[i]);
+ var bbox_miny = parseFloat(this.wms[0].gui_miny[i]);
+ var bbox_maxx = parseFloat(this.wms[0].gui_maxx[i]);
+ var bbox_maxy = parseFloat(this.wms[0].gui_maxy[i]);
+ var wmsExtent = new Extent(bbox_minx, bbox_miny, bbox_maxx, bbox_maxy);
+ var newExtent = this.calculateExtent(wmsExtent);
+ this.repaint(new Point(newExtent.minx, newExtent.miny), new Point(newExtent.maxx, newExtent.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){
+ var factor = parseFloat(factor);
+ if (!in_) {
+ factor = 1 / factor;
+ }
+
+ var extent = this.getExtentInfos();
+ var distx = extent.maxx - extent.minx;
+ var disty = extent.maxy - extent.miny;
+
+
+
+ if (x && y) {
+ var centerx = parseFloat(x);
+ var centery = parseFloat(y);
+ }
+ else {
+ // the image is already moved if x and y are given
+ this.oldExtent = extent;
+ var centerx = extent.minx + distx / 2;
+ var centery = extent.miny + disty / 2;
+ }
+
+ var new_distx = distx / factor;
+ var new_disty = disty / factor;
+ var minx = centerx - new_distx / 2;
+ var miny = centery - new_disty / 2;
+ var maxx = centerx + new_distx / 2;
+ var maxy = centery + new_disty / 2;
+ this.setExtent(minx, miny, maxx, maxy);
+
+ this.setMapRequest();
+ };
+
+ var performUnknownCalculation = function (value) {
+ return Math.pow(10,(
+ Math.round(
+ Math.log(value)/
+ Math.log(10)
+ )
+ ));
+ };
+
+ this.convertPixelToReal = function (aPoint) {
+ var arrayBBox = this.extent.split(",");
+ var minX = parseFloat(arrayBBox[0]);
+ var minY = parseFloat(arrayBBox[1]);
+ var maxX = parseFloat(arrayBBox[2]);
+ var maxY = parseFloat(arrayBBox[3]);
+ var xtentx = maxX - minX;
+ var xtenty = maxY - minY;
+ var deltaX = xtentx/this.width;
+ var deltaY = xtenty/this.height;
+ var roundx, roundy;
+
+ if(deltaX > 0){
+ roundx = 1/performUnknownCalculation(deltaX);
+ }
+ else{
+ roundx = performUnknownCalculation(deltaX);
+ }
+ if(deltaY > 0){
+ roundy = 1/performUnknownCalculation(deltaY);
+ }
+ else{
+ roundy = performUnknownCalculation(deltaY);
+ }
+ var posX = parseFloat(minX + (aPoint.x / this.width) * xtentx);
+ var posY = parseFloat(maxY - (aPoint.y / this.height) * xtenty);
+ posX = Math.round(posX * roundx) / roundx;
+ posY = Math.round(posY * roundy) / roundy;
+ return new Point(posX, posY);
+ };
+
+ /**
+ * Convert real world coordinates to pixel coordinates
+ */
+ this.convertRealToPixel = function (aPoint) {
+ var arrayBBox = this.extent.split(",");
+ var minX = parseFloat(arrayBBox[0]);
+ var minY = parseFloat(arrayBBox[1]);
+ var maxX = parseFloat(arrayBBox[2]);
+ var maxY = parseFloat(arrayBBox[3]);
+ return new Point(
+ Math.round((aPoint.x - minX) * this.width /(maxX - minX)),
+ Math.round((maxY - aPoint.y) * this.height/(maxY - minY))
+ );
+ };
+
+ /**
+ * get the srs of the mapObj
+ *
+ * @return srs as epsg:number
+ * @type string
+ */
+ this.getSRS = function(){
+ return this.epsg;
+ };
+
+ /**
+ * get all mapRequests
+ *
+ * @return array of mapRequests of this map object
+ * @type string[]
+ */
+ this.getMapRequests = function(){
+ var allRequests = [];
+ //loop through all wms to get the mapRequests
+ for (var i = 0; i < this.wms.length; i++) {
+ var currentRequest = this.wms[i].getMapRequest(this);
+ if (currentRequest) {
+ allRequests.push(currentRequest);
+ }
+ }
+ if (allRequests.length > 0) {
+ return allRequests;
+ }
+ return false;
+ };
+
+ /**
+ * Return the map URL of the WMS at index i
+ * @param {Object} currentWmsIndex
+ */
+ this.getMapUrl = function(ii){
+ var currentWms = this.wms[ii];
+ var validLayers = currentWms.getLayers(this);
+ if(validLayers.length === 0) {
+ return false;
+ }
+ var layerNames = validLayers.join(",");
+
+ url = currentWms.wms_getmap;
+ url += mb_getConjunctionCharacter(currentWms.wms_getmap);
+
+ if (currentWms.wms_version == "1.0.0") {
+ url += "WMTVER=" + currentWms.wms_version + "&REQUEST=map&";
+ }
+ else {
+ url += "VERSION=" + currentWms.wms_version + "&REQUEST=GetMap&SERVICE=WMS&";
+ }
+
+ url += "LAYERS=" + layerNames + "&";
+ url += "STYLES=";
+ var layer = layerNames.split(",");
+ for (var j = 0; j < layer.length; j++) {
+ if (j > 0) {
+ url += ",";
+ }
+ if (currentWms.getCurrentStyleByLayerName(layer[j]) !== false) {
+ url += currentWms.getCurrentStyleByLayerName(layer[j]);
+ }
+ }
+ url += "&";
+ url += "SRS=" + this.epsg + "&";
+ url += "BBOX=" + this.extent + "&";
+ url += "WIDTH=" + this.width + "&";
+ url += "HEIGHT=" + this.height + "&";
+ url += "FORMAT=" + currentWms.gui_wms_mapformat + "&";
+ url += "BGCOLOR=0xffffff&";
+
+ if (currentWms.gui_wms_mapformat.search(/gif/i) > -1 ||
+ currentWms.gui_wms_mapformat.search(/png/i) > -1) {
+ url += "TRANSPARENT=TRUE&";
+ }
+
+ url += "EXCEPTIONS=" + currentWms.gui_wms_exceptionformat + "&";
+
+ // add vendor-specific
+ for (var v = 0; v < mb_vendorSpecific.length; v++) {
+ var vendorSpecificString = eval(mb_vendorSpecific[v]);
+ // if eval doesn't evaluate a function, the result is undefined.
+ // Sometimes it is necessary not to evaluate a function, for
+ // example if you want to change a variable from the current
+ // scope (see mod_addSLD.php)
+ if (typeof(vendorSpecificString) != "undefined") {
+ url += vendorSpecificString + "&";
+ }
+ }
+ // add Filter
+ if (currentWms.wms_filter !== "") {
+ url += "&SLD=" + currentWms.wms_filter + "?id=" + mb_styleID + "&";
+ }
+ // add sld
+ if (currentWms.gui_wms_sldurl !== "") {
+ url += "&SLD=" + escape(currentWms.gui_wms_sldurl) + "&";
+ }
+ return url;
+ }
+
+ /**
+ * get all featureInfoRequests
+ *
+ * @member mb_mapObj_const
+ * @param float x the x-value of the click position in pixel
+ * @param float y the y-value of the click position in pixel
+ * @return array of all featureInfoRequests of this map object
+ * @type string[]
+ */
+ this.getFeatureInfoRequests = function(clickPoint){
+ var allRequests = [];
+ //loop through all wms to get the FeatureInfoRequests
+ for (var i = 0; i < this.wms.length; i++) {
+ var currentRequest = this.wms[i].getFeatureInfoRequest(this, clickPoint);
+ if (currentRequest) {
+ allRequests.push(currentRequest);
+ }
+ }
+ if (allRequests.length > 0) {
+ return allRequests;
+ }
+ return false;
+ };
+
+ /**
+ * calculation of the mapscale
+ *
+ * @member mb_mapObj_const
+ * @return scale
+ * @type integer
+ */
+ this.getScale = function(){
+ var scale;
+ var bbox = this.extent.split(",");
+ var xtenty;
+ if (this.epsg == "EPSG:4326") {
+ var pxLenx = (parseFloat(bbox[2]) - parseFloat(bbox[0])) / this.width;
+ var pxLeny = (parseFloat(bbox[3]) - parseFloat(bbox[1])) / this.height;
+ var lat_from = ((parseFloat(bbox[3]) - parseFloat(bbox[1]) / 2) * Math.PI) / 180;
+ var lat_to = ((parseFloat(bbox[3]) - parseFloat(bbox[1]) / 2 + pxLeny) * Math.PI) / 180;
+ var lon_from = ((parseFloat(bbox[2]) - parseFloat(bbox[0]) / 2) * Math.PI) / 180;
+ var lon_to = ((parseFloat(bbox[2]) - parseFloat(bbox[0]) / 2 + pxLeny) * Math.PI) / 180;
+ var 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));
+ scale = (dist / Math.SQRT2) * (mb_resolution * 100);
+ }
+ else {
+ xtenty = parseFloat(bbox[3]) - parseFloat(bbox[1]);
+ scale = (xtenty / this.height) * (mb_resolution * 100);
+ }
+ return parseInt(Math.round(scale));
+ };
+
+ /**
+ *
+ */
+ this.checkScale = function(wmsIndex){
+ var thisLayer = this.layers[wmsIndex].split(",");
+ var thisScale = this.getScale();
+ var str_layer = "";
+ var cnt_layer = 0;
+ for (var i = 0; i < this.wms[wmsIndex].objLayer.length; i++) {
+ var currentLayer = this.wms[wmsIndex].objLayer[i];
+ var myLayername = currentLayer.layer_name;
+
+ var myMinscale = currentLayer.gui_layer_minscale;
+ var myMaxscale = currentLayer.gui_layer_maxscale;
+
+ for (var ii = 0; ii < thisLayer.length; ii++) {
+ if (thisLayer[ii] == myLayername && !currentLayer.has_childs) {
+ if (myMinscale !== 0 && thisScale < myMinscale) {
+ continue;
+ }
+ if (myMaxscale !== 0 && thisScale > myMaxscale) {
+ continue;
+ }
+ if (cnt_layer > 0) {
+ str_layer += ",";
+ }
+ str_layer += thisLayer[ii];
+ cnt_layer++;
+ }
+ }
+ }
+ var str_layerstyles = [];
+ str_layerstyles[0] = str_layer;
+ return str_layerstyles;
+
+ };
+
+ this.repaintScale = function(x, y, scale){
+ if (x === null && y === null) {
+ var arrayBBox = this.extent.split(",");
+ x = parseFloat(arrayBBox[0]) +
+ ((parseFloat(arrayBBox[2]) - parseFloat(arrayBBox[0])) /
+ 2);
+ y = parseFloat(arrayBBox[1]) +
+ ((parseFloat(arrayBBox[3]) - parseFloat(arrayBBox[1])) /
+ 2);
+ }
+ var minx = parseFloat(x) - (this.width / (mb_resolution * 100 * 2) * scale);
+ var miny = parseFloat(y) - (this.height / (mb_resolution * 100 * 2) * scale);
+ var maxx = parseFloat(x) + (this.width / (mb_resolution * 100 * 2) * scale);
+ var maxy = parseFloat(y) + (this.height / (mb_resolution * 100 * 2) * scale);
+ this.repaint(new Point(minx, miny), new Point(maxx, maxy));
+ };
+
+ this.repaint = function(min, max){
+ this.extent = min.x + "," + min.y + "," + max.x + "," + max.y;
+ this.setMapRequest();
+ };
+
+ 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];
+ if (currentWms.wms_id != wms_id) {
+ continue;
+ }
+ var newMapRequest = getLayerHtmlCode(ii);
+
+ if (mb_log) {
+ var tmp = eval(mb_log + "('" + newMapURL + "','" + ts + "')");
+ }
+ var myDivId = this.elementName + "_div_" + ii;
+ writeTag(this.frameName, myDivId, newMapRequest);
+ var myMapId = this.elementName + "_map_" + ii;
+ eventAfterMapRequest.trigger({"map":this, "myMapId":myMapId});
+ return true;
+ }
+ return false;
+
+ };
+
+ this.mb_setFutureObj = function(mod_back_cnt){
+ var cnt = this.mb_MapFutureObj.length;
+ this.mb_MapFutureObj[cnt] = {};
+ this.mb_MapFutureObj[cnt].reqCnt = mod_back_cnt;
+ this.mb_MapFutureObj[cnt].width = this.width;
+ this.mb_MapFutureObj[cnt].height = this.height;
+ this.mb_MapFutureObj[cnt].epsg = this.epsg;
+ this.mb_MapFutureObj[cnt].extent = this.extent;
+ this.mb_MapFutureObj[cnt].layers = [];
+
+ for(var i=0; i<this.layers.length;i++){
+ this.mb_MapFutureObj[cnt].layers[i] = this.layers[i];
+ }
+
+ this.mb_MapFutureObj[cnt].styles = [];
+
+ for(var i=0; i < this.styles.length;i++){
+ this.mb_MapFutureObj[cnt].styles[i] = this.styles[i];
+ }
+
+ this.mb_MapFutureObj[cnt].querylayers = [];
+
+ for(var i=0; i < this.querylayers.length; i++) {
+ this.mb_MapFutureObj[cnt].querylayers[i] = this.querylayers[i];
+ }
+ }
+
+ this.setMapRequest = function(){
+ if (this.oldExtent) {
+ this.arrangeElements();
+ }
+
+ firstMapReady = false;
+
+ var ret = eventBeforeMapRequest.trigger({
+ map: this
+ }, "AND"
+ );
+
+ if (ret === false) {
+ return true;
+ }
+ var ts = mb_timestamp();
+ var myMapId = [];
+
+ var newMapRequest = "";
+
+/*
+ // once the first map is ready, the old ones will be deleted
+ removeOldMaps = function () {
+ for (var ii = 0; ii < that.wms.length; ii++) {
+ var myDivId = that.elementName + "_div_" + ii;
+ var $div = $('#' + myDivId);
+ if (!firstMapRequest) {
+ while ($div.children().size() > 1) {
+ $div.children().eq(0).remove();
+ }
+ }
+ }
+ }
+*/
+ for (var ii = 0; ii < this.wms.length; ii++) {
+ var currentWms = this.wms[ii];
+
+ if (!(currentWms.gui_wms_visible > 0)) {
+ continue;
+ }
+ myMapId.push(this.elementName + "_map_" + ii);
+
+ newMapRequest += getLayerHtmlCode(ii);
+
+ }
+// writeTag(this.frameName, this.elementName+"_maps", newMapRequest);
+
+
+ eventAfterMapRequest.trigger({
+ "map": this,
+ "myMapId": myMapId.join(",")
+ });
+ };
+
+ var that = this;
+
+// var firstMapReady = false;
+// var firstMapRequest = true;
+
+// var removeOldMaps = function () {
+ // is written in setMapRequest
+// return null;
+// };
+
+ this.arrangeElements = function () {
+ var oldLL = new Point(this.oldExtent.minx, this.oldExtent.miny);
+ var oldUR = new Point(this.oldExtent.maxx, this.oldExtent.maxy);
+
+ var oldLLPix = this.convertRealToPixel(oldLL);
+ var oldURPix = this.convertRealToPixel(oldUR);
+
+ var left = oldLLPix.x;
+ var top = oldURPix.y;
+ var width = oldURPix.x - oldLLPix.x;
+ var height = oldLLPix.y - oldURPix.y;
+
+ var mapDiv = $("#" + this.elementName + "_maps div");
+ mapDiv.animate({
+ left: left + "px",
+ top: top + "px"
+ },
+ {
+ duration: "slow"
+ });
+
+ var mapImg = $("#" + this.elementName + "_maps div img");
+ mapImg.animate({
+ width: width + "px",
+ height: height + "px"
+ },
+ {
+ duration: "slow"
+ });
+ };
+
+ var getLayerHtmlCode = function (ii) {
+ var currentWms = that.wms[ii];
+ if (!currentWms.activeImg) {
+ currentWms.activeImg = [];
+ }
+ if (typeof(currentWms.requestCount) === "undefined") {
+ currentWms.requestCount = 0;
+ }
+ else {
+ currentWms.requestCount ++;
+ }
+
+ var myDivId = that.elementName + "_div_" + ii + "_" + currentWms.requestCount;
+
+ var myMapId = that.elementName + "_map_" + ii + "_" + currentWms.requestCount;
+
+ //disable Layer which are out of scale
+ var validLayers = that.checkScale(ii);
+ var layerNames = validLayers.toString();
+
+ var newMapURL = false;
+ var opacityString = "";
+
+ if (that.layers[ii] !== "" && layerNames !== ''){
+ // get map URL
+ newMapURL = that.getMapUrl(ii);
+
+ var currentOpacity = currentWms.gui_wms_mapopacity;
+ if (currentOpacity != 1) {
+ opacityString += "opacity:" + currentOpacity + "; ";
+ opacityString += "Filter: Alpha(Opacity=" + currentOpacity*100 + "); ";
+ opacityString += "-moz-opacity:" + currentOpacity + " ; ";
+ opacityString += "-khtml-opacity:" + currentOpacity;
+ }
+ }
+
+
+ var imageString = "";
+
+ if (newMapURL) {
+ imageString = "<img id='"+myMapId+"' name='mapimage' ";
+ imageString += "width='"+that.width+"' ";
+ imageString += "height='"+that.height+"' ";
+ imageString += "border='0' />";
+ }
+
+ var newMapRequest = "<div id='"+myDivId+"' ";
+ newMapRequest += "style=\"position:absolute; top:0px; left:0px; ";
+ newMapRequest += "z-index:" + ii + ";" + opacityString + "\">";
+ newMapRequest += "</div>";
+
+ $('#' + that.elementName+"_maps").append($(newMapRequest));
+
+ var $div = $('#' + myDivId);
+
+ currentWms.activeImg.push(currentWms.requestCount);
+
+ $(imageString).attr('src', newMapURL).load(function () {
+ var currentRequestNr = currentWms.requestCount;
+ $div.css({
+ left: "0px", top: "0px"
+ }).append( $(this) );
+
+ var oldDivId = that.elementName + "_div_" + ii + "_" + (currentRequestNr - 1);
+ $("#" + oldDivId).remove();
+/*
+ if (!firstMapReady) {
+ mb_arrangeElement(that.frameName, that.elementName+"_maps", 0, 0);
+ for(var i=0; i<mb_PanSubElements.length; i++){
+ mb_arrangeElement(that.frameName, mb_PanSubElements[i], 0, 0);
+ }
+
+ firstMapReady = true;
+ removeOldMaps();
+ firstMapRequest = false;
+ }
+*/
+ });
+
+ that.mapURL[ii]= newMapURL;
+ currentWms.mapURL = newMapURL;
+
+ if (mb_log && currentWms.mapURL) {
+ var tmp = eval(mb_log + "('" +newMapURL + "','" + ts + "')");
+ }
+
+ return newMapRequest;
+ }
+
+ this.getWmsIdByTitle = function (title) {
+ for (var i=0; i < this.wms.length; i++) {
+ if (this.wms[i].wms_title == title) {
+ return this.wms[i].wms_id;
+ }
+ }
+ return null;
+ };
+
+ this.getWmsIndexById = function (wms_id) {
+ for (var i=0; i< this.wms.length; i++){
+ if(this.wms[i].wms_id == wms_id){
+ return i;
+ }
+ }
+ return null;
+ };
+
+ this.removeWms = function (wmsIndex) {
+ var wms_ID = null;
+ var i;
+ var new_wmsarray = [];
+ var new_layerarray = [];
+ var new_querylayerarray = [];
+ var new_stylesarray = [];
+ var new_mapURLarray = [];
+
+ for (i = 0; i < this.wms.length; i++) {
+ if (i != wmsIndex) {
+ new_wmsarray.push(this.wms[i]);
+ new_layerarray.push(this.layers[i]);
+ new_querylayerarray.push(this.querylayers[i]);
+ new_stylesarray.push(this.styles[i]);
+ new_mapURLarray.push(this.mapURL[i]);
+ }
+ else {
+ wms_ID = this.wms[i].wms_id;
+ }
+ }
+ this.wms = new_wmsarray;
+ this.layers = new_layerarray;
+ this.querylayers = new_querylayerarray;
+ this.styles = new_stylesarray;
+ this.mapURL = new_mapURLarray;
+
+ var another_new_wmsarray = [];
+
+ for (i = 0; i < window.wms.length; i++) {
+ if (window.wms[i].wms_id != wms_ID) {
+ another_new_wmsarray.push(window.wms[i]);
+ }
+ }
+ window.wms = another_new_wmsarray;
+ };
+
+ /**
+ * move a wms or layer
+ *
+ * @param int wms_id id of wms to move
+ * @param int layer_id id of layer to move
+ * @return true of successful
+ * @type boolean
+ */
+ this.move = function(wms_id, layer_id, moveUp){
+ var i,j;
+ for(i=0;i<this.wms.length;i++){
+ if (wms_id == this.wms[i].wms_id) {
+ break;
+ }
+ }
+
+ //check if only one wms is affected?
+ if (layer_id && layer_id != this.wms[i].objLayer[0].layer_id) {
+ return this.wms[i].moveLayer(layer_id, moveUp);
+ }
+
+ //else swap wms
+ j = i + (moveUp?-1:1);
+ if (!(i != j && i >= 0 && i < this.wms.length && j >= 0 && j < this.wms.length)) {
+ return false;
+ }
+
+ upper = this.wms[i];
+ this.wms[i] = this.wms[j];
+ this.wms[j] = upper;
+ var upperLayers = this.layers[i];
+ var upperStyles = this.styles[i];
+ var upperQuerylayers = this.querylayers[i];
+ this.layers[i] = this.layers[j];
+ this.styles[i] = this.styles[j];
+ this.querylayers[i] = this.querylayers[j];
+ this.layers[j] = upperLayers;
+ this.styles[j] = upperStyles;
+ this.querylayers[j] = upperQuerylayers;
+
+ return true;
+ };
+
+ this.getMousePos = function(e){
+ if(ie){
+ if(this.frameName){
+ clickX = window.frames[fName].event.clientX;
+ clickY = window.frames[fName].event.clientY;
+ }
+ else{
+ clickX = event.clientX;
+ clickY = event.clientY;
+ }
+ }
+ else{
+ clickX = e.pageX;
+ clickY = e.pageY;
+ }
+
+ //remove divtag offset
+ clickX -= parseInt(this.getDomElement().style.left);
+ clickY -= parseInt(this.getDomElement().style.top);
+
+ return new Point(clickX, clickY);
+ }
+
+ eventAfterMapObjectConstruction.trigger();
+}
More information about the Mapbender_commits
mailing list