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();
}*/
});
有点乱，没时间整理。先放着吧。