tool.js

WebGis基本功能展示

Abstract.Tool = function(){}
Abstract.Tool.prototype = {
    initialize: function(id, img1, img2, img3, pos, left, top, width, height){
        this.toolType = "Tool";        
        this.id = id;
        this.img_normal = ImageBaseDir + 'mapTools/' + img1;
        this.img_over = ImageBaseDir + 'mapTools/' + img2;
        this.img_down = ImageBaseDir + 'mapTools/' + img3;
        this.position = pos;
        this.left = parseInt(left)
        this.top = parseInt(top)
        this.width = parseInt(width)
        this.height = parseInt(height)        
        this.div = Util.createDiv(this.id, this.left, this.top, this.width, this.height, this.img_normal, this.position, '0px solid #ccc');
        this.div.style.cursor = "pointer";
    },
    
    
    barClickHandler: function(e){
        var elm = Event.element(e)
        if(elm.childNodes.length>0)  return; 
        this.clearCurrentToolStatus();
        var tool = this.tools[Event.element(e).parentNode.id];        
        tool.div.childNodes[0].src = tool.img_down;
        if(!tool.selected){
            tool.selected = true;            
            this.currentTool = tool;
            this.mapDiv.style.cursor = tool.cursorStyle;            
        }  
        
        Event.stop(e);
    },
    
    barMouseOverHandler: function(e){
        var elm = Event.element(e)
        if(elm.childNodes.length>0)  
            return;        
        if(this.tools[elm.parentNode.id].selected == true) 
            return;
        elm.src = this.tools[elm.parentNode.id].img_over;
        elm.alt = this.tools[elm.parentNode.id].alt;
        
        Event.stop(e);
    },
    
    barMouseOutHandler: function(e){
        var elm = Event.element(e)
        if(elm.childNodes.length>0)  
            return;        
        if(this.tools[elm.parentNode.id].selected == true) 
            return;
        elm.src = this.tools[elm.parentNode.id].img_normal;
        Event.stop(e);
    },
    
    zoomToExtent: function(model, extent, container, direction){
        if(extent){
            var zoom = model.getZoom();
            
            var w1 = zoom.getViewBound(container).getPixelWidth(zoom);
            var h1 = zoom.getViewBound(container).getPixelHeight(zoom);
            var w2 = extent.getPixelWidth(zoom);
            var h2 = extent.getPixelHeight(zoom);
            var r1 = Math.sqrt(w1*w1 + h1*h1);
            var r2 = Math.sqrt(w2*w2 + h2*h2);
            var deltalLevel = Math.floor(r1/r2);
            if(w2<1 || h2<1)
                return;
            var orgLevel = zoom.getLevel();
            if(deltalLevel > 3) deltalLevel = 3;            
            switch(direction){
                case 'zoomin':
                    orgLevel += deltalLevel;
                    if(orgLevel >MaxZoomLevel) orgLevel = MaxZoomLevel;  
                    break;
                case 'zoomout':
                    orgLevel -= deltalLevel;
                    if(orgLevel < 1) orgLevel = 1;
                    break;
            }            
			model.setZoom(new Zoom(orgLevel));
			model.setViewCenterCoord(extent.getCenter());
			model.controls[container.childNodes[0].id].paint(model, true);
			model.controls[model.ovId].paint(model);            
			$('sliderbar_'+model.getId()).parentNode.style.top=((MaxZoomLevel-orgLevel)*12+6)+"px"
        }
    }
};

//移屏
PanTool = Class.create(); 
PanTool.prototype = Object.extend(new Abstract.Tool(), {
      cursorStyle: 'move',
      selected: false,
      alt: '移屏',      
      mouseDownHandler: function(e, toolbar) {
        this.mapDiv = toolbar.mapDiv;
        if(!this.mapDiv)
            return;
        if(!this.isDrag)
            this.isDrag = true;
        this.orgPixelX = Util.getValueOfNoPX(this.mapDiv.style.left);
	    this.orgPixelY = Util.getValueOfNoPX(this.mapDiv.style.top);
	    this.orgMousePixel = Util.getMousePixel(e);
	    if(this.mapDiv.setCapture)
		    this.mapDiv.setCapture();
	    else if (window.captureEvents) 
		    window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
	    document.onselectstart = function(){return false};  
	    Event.stop(e);
      },
      
      mouseMoveHandler: function(e, toolbar){
        if(this.orgMousePixel == null || this.isDrag == false || !this.mapDiv)
            return;
        this.newMousePixel = Util.getMousePixel(e);	    
	    var deltaX = this.newMousePixel.x - this.orgMousePixel.x;
	    var deltaY = this.newMousePixel.y - this.orgMousePixel.y;
		this.mapDiv.style.left = (this.orgPixelX + deltaX) + "px";
		this.mapDiv.style.top = (this.orgPixelY + deltaY) + "px";	
		Event.stop(e);
      },
      
      mouseUpHandler: function(e, toolbar){        
        if(!this.isDrag) return;
        if(!this.mapDiv)
            return;
        if(this.mapDiv.releaseCapture) 
			this.mapDiv.releaseCapture();
		else if(window.captureEvents) 
			window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
		var lastMousePixel = Util.getMousePixel(e);
		var deltaX = lastMousePixel.x - this.orgMousePixel.x;
		var deltaY = lastMousePixel.y - this.orgMousePixel.y;		
		this.reLoadTiles(toolbar.model, deltaX, deltaY, this.mapDiv);		
		document.onmousemove = null;
		document.onmouseup = null;
		this.isDrag = false;
		Event.stop(e);
      },
      
      reLoadTiles: function(model, deltaX, deltaY, mapDiv){
        var orgCenterCoord = model.getViewCenterCoord();
        var curZoom = model.getZoom();
        var x = orgCenterCoord.x - deltaX*curZoom.realMapBound.getWidth()/(curZoom.getTileCols()*TileSize);
        var y = orgCenterCoord.y + deltaY*curZoom.realMapBound.getHeight()/(curZoom.getTileRows()*TileSize);
        var newCenterCoord = new Coordinate(x, y)
        if(!newCenterCoord.isSame(orgCenterCoord))
            model.setViewCenterCoord(newCenterCoord);
        var control = new Abstract.Control()
        control.loadTiles(model, mapDiv.parentNode, mapDiv, true);
        model.controls[model.ovId].paint(model);
      },
      
      clickHandler: function(e, toolbar){
        Event.stop(e);
      },
      
      dblClickHandler: function(e, toolbar){
        //Event.stop(e);
        var point = Util.getCoordinateByPixel(Util.getMousePixel(e),toolbar.model.zoom).getPoint();
        alert(point);
      }
});

//拉框放大
ZoominTool = Class.create();
ZoominTool.prototype = Object.extend(new Abstract.Tool(), {
    cursorStyle:'url("images/zoomin.cur")',
    selected: false,
    alt: '拉框放大',
    mouseDownHandler: function(e, toolbar) {        
        this.mapDiv = toolbar.mapDiv;
        this.mouseDownPixel = Util.getMouseRelativePixel(e, this.mapDiv);
        
        this.zoomBox = Util.createDiv('zoomBox',this.mouseDownPixel.x,this.mouseDownPixel.y, null,null,null,"absolute","1px solid red");
        this.zoomBox.style.backgroundColor = "white";
        this.zoomBox.style.filter = "alpha(opacity=50)"; 
        this.zoomBox.style.opacity = "0.50";
        this.zoomBox.style.fontSize = "1px";
        this.mapDiv.appendChild(this.zoomBox);        
        Event.stop(e);
    },
    
    mouseMoveHandler: function(e, toolbar){
        this.mapDiv = toolbar.mapDiv;
        this.mouseMovePixel = Util.getMouseRelativePixel(e, this.mapDiv);
        
        if (this.mouseDownPixel) {
            var deltaX = Math.abs(this.mouseDownPixel.x - this.mouseMovePixel.x);
            var deltaY = Math.abs(this.mouseDownPixel.y - this.mouseMovePixel.y);
            this.zoomBox.style.width = Math.max(1, deltaX) + "px";
            this.zoomBox.style.height = Math.max(1, deltaY) + "px";
            if (this.mouseMovePixel.x < this.mouseDownPixel.x)
                this.zoomBox.style.left = this.mouseMovePixel.x+"px";
            if (this.mouseMovePixel.y < this.mouseDownPixel.y)
                this.zoomBox.style.top = this.mouseMovePixel.y+"px";
        }        
        Event.stop(e);   
    },
    
    mouseUpHandler: function(e, toolbar){
        if (this.mouseDownPixel && this.mouseMovePixel) {              
            var top = Math.min(this.mouseDownPixel.y, this.mouseMovePixel.y);
            var bottom = Math.max(this.mouseDownPixel.y, this.mouseMovePixel.y);
            var left = Math.min(this.mouseDownPixel.x, this.mouseMovePixel.x);
            var right = Math.max(this.mouseDownPixel.x, this.mouseMovePixel.x);
            
            var leftTop = Util.getCoordinateByPixel({x:left,y:top}, toolbar.model.getZoom())
            var rightbottom = Util.getCoordinateByPixel({x:right,y:bottom}, toolbar.model.getZoom())