MapPanel

/**地图显示面板，主要用于显示地图，以及相应与地图相关的一些操作，如放大、缩小、全屏、漫游、刷新、点击查询地图、拉框查询地图、输入坐标定位等操作
* @version .1
* @author lozpeng
* @copyRight CAF.GIS.Dep
* @date 2008/05/27
*/
var MapPanel=function()
{
this.jg=null; //网页画图的类
var mapPanelID="regionMap";
this.drawShapeAction=null;
this.drawShape={x:0,y:0,width:0,height:0};
this.orginPt=null; //鼠标落下时的位置
this.gisActions={
zoomIn:"drawZoomInRectangle", //放大操作
zoomOut:"drawZoomOutRectangle", //缩小操作
identify:"identify", //点击查询图形信息
rectSearch:"drawSearchRectangle",//拉框查询图形信息
mapPan :"mapPan" //地图移动
}

//----工具栏定义开始
var zoomIn = new Ext.Toolbar.Button({
text :'放大',
enableToggle:true
,iconCls :"gis-zoomin"
,toggleHandler:toggleEventHandler.createDelegate(this)
,handler:function(){this.drawShapeAction=this.gisActions.zoomIn;}.createDelegate(this)
,toggleGroup:'gisTools'
});
var zoomOut = new Ext.Toolbar.Button({
text :'缩小'
,enableToggle:true
,toggleHandler:toggleEventHandler.createDelegate(this)
,handler:function(){this.drawShapeAction=this.gisActions.zoomOut;}.createDelegate(this)
,iconCls :"gis-zoomout"
,toggleGroup:'gisTools'
});
var fullExt = new Ext.Toolbar.Button({
text: '全屏'
,enableToggle:false
,iconCls :"gis-fullext"
,handler:fullExtentMapHandler.createDelegate(this)
});
var mapPan = new Ext.Toolbar.Button({
text: '漫游'
,enableToggle:true
,toggleHandler:toggleEventHandler.createDelegate(this)
,iconCls :"gis-pan"
,handler:function(){this.drawShapeAction=this.gisActions.mapPan;}.createDelegate(this)
,toggleGroup:'gisTools'
});
var refresh = new Ext.Toolbar.Button({
text: '刷新'
,enableToggle:false
,iconCls :"gis-refresh"
,handler:function(){alert(this);}.createDelegate(this)
});

var identy =new Ext.Toolbar.Button({
text: '点击查询'
,enableToggle:true
,iconCls :"gis-indentify"
,toggleHandler:toggleEventHandler.createDelegate(this)
,handler:function(){this.drawShapeAction =this.gisActions.identify}.createDelegate(this)
,toggleGroup:'gisTools'
});
var extSearch = new Ext.Toolbar.Button({
text: '拉框查询'
,enableToggle:true
,iconCls :"gis-extsearch"
,toggleHandler:toggleEventHandler.createDelegate(this)
,handler:function(){this.drawShapeAction =this.gisActions.rectSearch}.createDelegate(this)
,toggleGroup:'gisTools'
});
var condiSearch = new Ext.Toolbar.Button({
text: '条件查询'
,enableToggle:false
,handler:function()
{
var wind = Ext.WindowMgr.get(ConditionSearchWindow.prototype.windID);
if(wind)
Ext.WindowMgr.bringToFront(wind);
else
new ConditionSearchWindow().show();
wind = null;
}
});
var coordLocate = new Ext.Toolbar.Button({
text: '输入坐标定位'
,enableToggle:false
,handler:function()
{
regionApp.loadPModal("test","统计图","data/test.jsp",{param1: "foo", param2: "bar"});
}
});
var upLoadData = new Ext.Toolbar.Button({
text: '数据上传'
,enableToggle:false
,handler:function()
{
new ExtSwfFileupload().show();
}
});
var logOff=new Ext.Toolbar.Button({
text:"用户注销"
,handler:function()
{
Ext.Ajax.request({
url:'userManager/logOff.jsp',
method: 'POST',
callback: function(request, success, response) {
var obj = Ext.decode(response.responseText);
if (obj.msg) {
Ext.Msg.show({title:"退出登录失败",msg:obj.msg,buttons: Ext.Msg.OK,icon: Ext.MessageBox.INFO});
return;
}
if (!success) {
Ext.Msg.show({title:"退出登录失败",msg:"对不起，与服务器交互时失败<br>请重试.",buttons: Ext.Msg.OK,icon: Ext.MessageBox.INFO});
return;
}
if(success)
{
Ext.Msg.show({title:"注销成功",msg:"请关闭本页面",buttons: Ext.Msg.OK,icon: Ext.MessageBox.INFO,fn: function(btn,text){
if (btn == 'ok'){
//window.open('index.jsp', 'newwindow', 'height=768, width=1024, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no');
window.close();
}
}});
}
}
});
}
});

//响应按钮的toggle事件
function toggleEventHandler(button,state)
{
if(!state)
{
alert(button.text);
this.drawShapeAction=null;
}
}
function fullExtentMapHandler()
{
alert("全屏地图！");
}
//-----工具栏定义完

//地图显示界面的状态信息
var clock = new Ext.Toolbar.TextItem('');//状态条上的时间信息
this.mapInfo= new Ext.Toolbar.TextItem({id:'mapInfo',text:"坐标信息："});

var statusBar = new Ext.StatusBar({
            id: 'region.statusbar'
            ,statusAlign:'right'
            ,busyText :'加载中...'
        ,items: [this.mapInfo,'->','-'
        ,{
        text : '刷新坐标信息'
        ,handler:refreshCoordHandler.createDelegate(this)
        }, '-', '当前时间: ', clock]
       });
      
    //刷新坐标信息
function refreshCoordHandler()
{
//alert("请响应刷新坐标事件!");
statusBar.showBusy();
Ext.fly(this.mapInfo.getEl()).update("获取坐标信息:",true);
statusBar.clearStatus();
};

/**响应鼠标点击事件
*
*/
this.mouseDown=function mouseDownhandler(e)
{
e.preventDefault();
if(!this.jg)
this.jg = new jsGraphics(this.body);
if(this.drawShapeAction==null)return;//如果鼠标点击时未定义画图操作时跳出点击事件
var position = this.getPosition(false);
var headerHeight = this.getTopToolbar().getSize().height;

var x = e.xy[0]-position[0];
var y = e.xy[1]-position[1]-headerHeight;
this.orginPt={x:x,y:y};
//清除客户端通过js画的图
this.jg.setStroke(1);
this.jg.clear();
};
/**响应鼠标点击事件
*
*/
this.mouseMove=function mouseMoveHandler(e)
{
e.preventDefault();
var position = this.getPosition(false);
var headerHeight = this.getTopToolbar().getSize().height;
var info = "BUTTON"+e.button+"X:"+(e.xy[0]-position[0])+"Y:"+(e.xy[1]-position[1]-headerHeight);
if(this.orginPt==null)return;
var width = (e.xy[0]-position[0])-this.orginPt.x;
var height=(e.xy[1]-position[1]-headerHeight)-this.orginPt.y;
this.updateStatus1(info);
this.drawShape.x=this.orginPt.x;
this.drawShape.y=this.orginPt.y;
this.drawShape.width = width;
this.drawShape.height = height;
mapActionHandler(this);
};
/**鼠标弹起事件监听
*
*/
this.mouseUp=function mouseUpHandler(e)
{
e.preventDefault();
if(this.drawShapeAction==null)return;
var position = this.getPosition(false);
var headerHeight = this.getTopToolbar().getSize().height;
var endPtX = e.xy[0]-position[0];
var endPtY = e.xy[1]-position[1]-headerHeight;

var width = endPtX-this.orginPt.x;
var height = endPtY -this.orginPt.y;
var button =e.button;

if(this.jg)
{
this.jg=null;
}
if(!this.jg)
this.jg = new jsGraphics(this.body);

if(Ext.isIE&&button==0)//如果是IE浏览器且鼠标左键按下
{
if(this.drawShapeAction===this.gisActions.zoomIn)//如果为地图放大操作
{

}
else
{
alert(this.drawShapeAction);
}
}
else if(Ext.isGecko&&button==0)//Gecko是指Mozilla FireFox系列
{

if(this.drawShapeAction===this.gisActions.zoomIn)//如果为地图放大操作
{
this.jg.clear();
this.jg.setColor("#0000ff"); // blue
this.jg.fillRect(this.orginPt.x, this.orginPt.y, width, height);
this.jg.paint();
}
else
{
alert(this.drawShapeAction);
}
}
this.jg.clear();
this.jg=null;
this.orginPt=null;//画图完成之后清除保留的原始坐标点
};
/**更新任务栏的坐标信息
*
*/
    this.updateStatus1 = function(info)
{
Ext.fly(this.mapInfo.getEl()).update("坐标信息:"+info,true);
};
this.initJSGraphic=function()
{
if(!this.jg&&this.body)
this.jg = new jsGraphics(this.body);
// this.jg.setColor("#ff0000"); // red
// this.jg.drawLine(2, 2, 220, 55); // co-ordinates related to "myCanvas"
// this.jg.setColor("#0000ff"); // blue
// this.jg.fillRect(110, 120, 30, 60);
// this.jg.paint();
}
/**画一个没有填充颜色的多边形，并响应一个地图操作，如放大，缩小，点击等地图操作事件
*
*/
function mapActionHandler(eventSource)
{
if(eventSource.jg)
{
switch(eventSource.drawShapeAction)
{
case eventSource.gisActions.zoomIn:

case eventSource.gisActions.zoomOut:
case eventSource.gisActions.identify:

}
eventSource.jg.clear();
eventSource.jg.setColor("#0000ff"); // blue
eventSource.jg.drawRect(eventSource.drawShape.x, eventSource.drawShape.y, eventSource.drawShape.width, eventSource.drawShape.height);
eventSource.jg.paint();
}
}

var params = 'optId=init&timeStamp=' + new Date().getTime() + '&width=' + 300 + '&height=' + 400
    //地图显示界面的构造函数。
MapPanel.superclass.constructor.call(this,{
title :'全国林发展区划图'
,id :mapPanelID
,bodyStyle :'padding:0px'
,autoScroll : false
//,width :'auto'
//,height :'auto'
,tbar :[zoomIn,zoomOut,mapPan,identy,extSearch,fullExt,refresh,condiSearch,coordLocate,upLoadData,{xtype: 'tbfill'},logOff]
,bbar : statusBar
        ,listeners : {
          'render': {
             fn : function(){
             this.body.on({'mousemove':this.mouseMove.createDelegate(this)});
             this.body.on({'mousedown':this.mouseDown.createDelegate(this)});
             this.body.on({'mouseup':this.mouseUp.createDelegate(this)});
             //this.initJSGraphic();
                Ext.fly(clock.getEl().parentNode).addClass('x-status-text-panel');
Ext.TaskMgr.start({
       run: function(){        
           Ext.fly(clock.getEl()).update(new Date().format('g:i:s A'));
       },
       interval: 1000
   });
               },
          scope:this
            }
        }
        ,autoLoad:{
        url: "dispMap.jsp",
    params: params,
    callback: function(){
    alert("file");
    },
    scope: this, 
    discardUrl: true,
    nocache: true,
    text: "地图加载中....",
    timeout: 60,
    scripts: true
        }
});
}
Ext.extend(MapPanel,Ext.Panel,{
updateStatus:function(info)
{
Ext.fly(this.mapInfo.getEl()).update("坐标信息:"+info,true);
},
getID:function()
{
return mapPanelID;
}
/*
,initMap:function()
{
var lon = 5;
        var lat = 40;
        var zoom = 5;
        var map, layer;       
            map = new OpenLayers.Map( 'regionMap', { controls: [] } );
      //map = new OpenLayers.Map(mapPanel,{controls:[]});
            layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                    "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
            map.addLayer(layer);

           var  vlayer = new OpenLayers.Layer.Vector( "Editable" );
            map.addLayer(vlayer);
           
           
           var zb = new OpenLayers.Control.ZoomBox(
                {title:"Zoom box: Selecting it you can zoom on an area by clicking and dragging."});
            var panel = new OpenLayers.Control.Panel({defaultControl: zb});
            panel.addControls([
                new OpenLayers.Control.MouseDefaults(
                    {title:'You can use the default mouse configuration'}),
                zb,
                new OpenLayers.Control.DrawFeature(vlayer, OpenLayers.Handler.Path,
                    {title:'Draw a feature'}),
                new OpenLayers.Control.ZoomToMaxExtent({title:"Zoom to the max extent"})
            ]);
            map.addControl(panel);
            map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
           
            map.events.register("mousemove", map, function(e) {
                var position = this.events.getMousePosition(e);
              //Ext.fly(mapInfo.getEl()).update("坐标信息:"+position,true);
              //this.updateStatus1(position);
                var mapPanel = Ext.getCmp("regionMap");
                if(mapPanel)
                mapPanel.updateStatus(position);
                else
                this.updateStatus(position);
            });
            this.doLayout();           
}*/
});
有点乱，没时间整理。先放着吧。

评论

1 楼 liaobinxu 2009-01-07  

没有注释 看不懂