ovmap.js

WebGis基本功能展示

//Map Overview
OvMap = Class.create();
OvMap.prototype = Object.extend(new Abstract.Control(), {
    initialize: function(container){
         this.container = container;
         this.drawOvContainer(container);
    },
    
    paint: function(model){
		alert("paint");
        this.model = model;
        this.model.setOvContainer(this.ovMapDiv, this.id);
        this.ovModel = this.model.getOvModel();
        var curZoom = this.ovModel.getZoom();
        var viewBound = curZoom.getViewBound(this.ovMapDiv).clone(model.getViewCenterCoord());
        var mapBound = curZoom.realMapBound;
        var deltaX = (mapBound.getMinX() - viewBound.getMinX()) * (curZoom.getTileCols() * TileSize / mapBound.getWidth());		
        var deltaY = (viewBound.getMaxY() - mapBound.getMaxY()) * (curZoom.getTileRows() * TileSize / mapBound.getHeight());
        this.ovDiv.style.left = deltaX + "px";
        this.ovDiv.style.top = deltaY + "px";
        this.ovDiv.style.width = (curZoom.getTileCols() * TileSize) + "px"
        this.ovDiv.style.height = (curZoom.getTileRows() * TileSize) + "px"     
        
        this.loadTiles(this.ovModel, this.ovMapDiv, this.ovDiv, false);
        this.container.appendChild(this.ovMapDiv);
    },
    
    drawOvContainer: function(container){
		alert("drawOvContainer");
		//大图宽度，高度
        var containerWidth = Util.getValueOfNoPX(container.style.width);
        var containerHeight = Util.getValueOfNoPX(container.style.height);
		//鹰眼宽度，高度
        var width = Util.getValueOfNoPX(container.style.width)/5;
        var height = Util.getValueOfNoPX(container.style.height)/5;
		
		//鹰眼中矩形框像素坐标
        var x = width/2-width/4/2;
        var y = height/2-height/4/2;

        var left = containerWidth-width+1;
        var top = containerHeight-height+1;
        
        this.id = Util.createUniqueID('Ov_');
        this.ovMapDiv = Util.createDiv(this.id,left,top,width,height,null,'absolute','3px ridge blue');//?????
        this.ovMapDiv.style.overflow = 'hidden'
        this.ovMapDiv.style.backgroundImage = 'url(' + ImageBaseDir + 'iaspec_bottom.png)';
        
        this.ovDiv = Util.createDiv(Util.createUniqueID('Ov_Map_'));
        this.ovDiv.style.position = "relative";
        this.ovDiv.style.zIndex = 0; 
        this.ovMapDiv.appendChild(this.ovDiv);
        this.registerEvent(this.ovDiv, 'ov_', 'mousedown,mousemove,mouseup,click');
        
        
        this.rectDiv = Util.createDiv(Util.createUniqueID('rect_'),x,y,width/4,height/4,null,"absolute","2px solid blue");
        this.rectDiv.style.backgroundColor = "white";
        this.rectDiv.style.filter = "alpha(opacity=40)"; 
        this.rectDiv.style.opacity = "0.40";
        this.rectDiv.style.fontSize = "1px"
        this.rectDiv.style.zIndex = 10000; 
        this.rectDiv.style.cursor = "move";       
        this.ovMapDiv.appendChild(this.rectDiv);
        this.registerEvent(this.rectDiv, 'rect_', 'mousedown,mousemove,mouseup');
        
        
        this.panDiv = Util.createDiv(Util.createUniqueID('Ov_Pan_'), null,null,null,null,ImageBaseDir + '1.GIF','absolute');
        this.panDiv.style.zIndex = 100000; 
        this.panDiv.style.left = containerWidth - 21;
        this.panDiv.style.top = containerHeight - 21;
        this.panDiv.style.cursor = "hand";
        this.container.appendChild(this.panDiv);
        this.registerEvent(this.panDiv, 'pan_', 'click');
    },
    
    registerEvent: function(source, prefix, param){
		alert("registerEvent");
        var params = param.split(',');
        if(params){
            for(var i=0; i<params.length; i++){
                Event.observe(source, params[i], eval('this.'+prefix+params[i]).bindAsEventListener(this));
            }
        }
    },
    
    pan_click: function(e){
		alert("pan_click");
        setCurPos(Util.getValueOfNoPX(this.ovMapDiv.style.left), Util.getValueOfNoPX(this.ovMapDiv.style.top))
        slide(this.ovMapDiv.id, Util.getValueOfNoPX(this.ovMapDiv.style.width)-1, Util.getValueOfNoPX(this.ovMapDiv.style.height)-1, this.panDiv.childNodes[0])        
        Event.stop(e);
    },
    
    rect_mousedown: function(e){  
		alert("rect_mousedown");
        if(!this.isDragging)
            this.isDragging = true;            
        
        this.elm = Event.element(e);
        this.orgLeft = Util.getValueOfNoPX(this.elm.style.left);
	    this.orgTop = Util.getValueOfNoPX(this.elm.style.top);
	    this.orgMousePixel = Util.getMousePixel(e);
	    var t_left=this.orgLeft;
	    var t_top=this.orgTop;
	    var t_width=this.elm.style.width;
	    var t_height=this.elm.style.height;
	    if(this.elm.setCapture){
		    this.elm.setCapture();
	    } 
	    else if(window.captureEvents) {
		    window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
	    }
	    
	    //create a new rect by lfcui on 23Mar2007
	    //this.rectDiv = Util.createDiv(Util.createUniqueID('rect_temp_'),x,y,width/4,height/4,null,"absolute","2px solid green");
	    this.rectTempDiv = Util.createDiv('rect_temp',t_left,t_top,t_width,t_height,null,"absolute","2px solid green");
        this.rectTempDiv.style.backgroundColor = "lightyellow";
        this.rectTempDiv.style.filter = "alpha(opacity=40)"; 
        this.rectTempDiv.style.opacity = "0.40";
        this.rectTempDiv.style.fontSize = "1px"
        this.rectTempDiv.style.zIndex = 10000; 
        this.rectTempDiv.style.cursor = "move";    
		var symble_focus=document.createTextNode("+");
    	this.rectTempDiv.appendChild(symble_focus);  
        this.elm.parentNode.appendChild(this.rectTempDiv);
         
         this.ini_x=this.orgLeft;
         this.ini_y=this.orgTop;
        //this.registerEvent(this.rectDiv, 'rect_temp_', 'mousedown,mousemove,mouseup');
        //end create	    
        Event.stop(e);
    },
    rect_mousemove: function(e){
		alert("rect_mousemove");
        if(!this.isDragging || !this.orgMousePixel)
            return;
        this.newMousePixel = Util.getMousePixel(e);	
        var deltaX = this.newMousePixel.x - this.orgMousePixel.x;
	    var deltaY = this.newMousePixel.y - this.orgMousePixel.y;
	    this.elm.style.left = (this.orgLeft + deltaX) + "px";
		this.elm.style.top = (this.orgTop + deltaY) + "px";
            
        Event.stop(e);
    },
    rect_mouseup: function(e){
		alert("rect_mouseup");
        if(this.elm.releaseCapture) 
			this.elm.releaseCapture();
		else if(window.captureEvents) 
			window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);       
        
        //adjust thumbnail to proper position                    
		var lastMousePixel = Util.getMousePixel(e);
		var deltaX = lastMousePixel.x - this.orgMousePixel.x;
		var deltaY = lastMousePixel.y - this.orgMousePixel.y;
		
		//move temp rect to the current rect
		var scale_use = Util.zoomScale(this.model.getOvModel().getZoom().getLevel())/Util.zoomScale(this.model.getZoom().getLevel());	

		this.call_glide(this.rectDiv.id,Number(deltaX),Number(deltaY),scale_use);
             
        document.onmousemove = null
		document.onmouseup = null
        this.isDragging = false;
        Event.stop(e);
    },
    ov_mousedown: function(e){
		alert("ov_mousedown");
        if(!this.isDragging)
            this.isDragging = true;            
        this.orgLeft = Util.getValueOfNoPX(this.ovDiv.style.left);
	    this.orgTop = Util.getValueOfNoPX(this.ovDiv.style.top);
	    this.orgMousePixel = Util.getMousePixel(e);
	    if(this.ovDiv.setCapture)
		    this.ovDiv.setCapture();
	    else if (window.captureEvents) 
		    window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
        Event.stop(e);
    },
    ov_mousemove: function(e){
		alert("ov_mousemove");
        if(!this.isDragging || !this.orgMousePixel)
            return;
        this.newMousePixel = Util.getMousePixel(e);