/**地图显示面板,主要用于显示地图,以及相应与地图相关的一些操作,如放大、缩小、全屏、漫游、刷新、点击查询地图、拉框查询地图、输入坐标定位等操作
* @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();
}*/
});
有点乱,没时间整理。先放着吧。
分享到:
相关推荐
MapPanel是openstreet-map(或其他类似的东西)的最小TileViewer。MapPanel使用Swing ui库制作,该库包含在任何标准Java安装中,非常适合包含在任何基于swing或SWT / RCP的应用程序中。
2. **创建MapPanel**:在Java代码中,你需要创建一个MapPanel实例,配置地图服务的URL和其他参数,如地图类型、缩放级别等。 3. **设置地图事件监听器**:MapPanel支持各种交互操作,如拖动、缩放等。你可以添加...
GamePanel类,是游戏的主要面板,有一个内部类(MapPanel)继承画布(Canvas)用于实现游戏地图的面板,内部类中包括paint方法绘制游戏飞机、子弹等,run方法用于启动线程,draw方法控制画布上的飞机、子弹等的变化...
var mapPanel = Ext.create('Ext.ux.GMapPanel', { title: '中文地图', width: 600, height: 400, center: [经度, 纬度], zoom: 10 }); ``` 2. **设置地图语言**:为了使地图显示中文,你需要设置地图的`...
然后在相应包下创建`MyEntryPoint.java`,编写GWT应用的启动逻辑,这里可以实例化并显示`MapPanel`。 7. **编译和运行**:在Eclipse中,右键点击项目,选择“Google” -> “Run As” -> “Google Web Application...
例如,GeoExt.MapPanel类可以帮助我们创建一个包含地图的基本面板,GeoExt.data.LayerStore和GeoExt.data.LayerTree则能轻松管理和展示地图图层。此外,GeoExt.form.Panel可以用于构建包含GIS特性的表单,以便用户...
- **MapPanel**:提供一个可视化的面板来显示地图内容。 **4.2 LayerHandler** LayerHandler 负责管理地图上的图层,控制图层的添加、删除以及显示顺序等操作。 **4.3 鼠标事件与 MouseDelegator 和 ...
var mapPanel = new Ext.Panel({ title: '百度地图', width: 800, height: 600, html: '<div id="baiduMap"></div>', renderTo: Ext.getBody() }); ``` 这里我们创建了一个面板,并在其中嵌入了一个ID为...
1. `Gui$MapPanel.class`:这是游戏界面的地图面板类,负责显示游戏地图,包括角色、箱子、障碍物等元素。可能包含了绘制图形的方法和更新地图状态的逻辑。 2. `Gui.class`:这是游戏的主界面类,它管理着整个游戏...
var mapPanel = Ext.create('Ext.container.Viewport', { layout: 'fit', items: [{ xtype: 'component', autoEl: { tag: 'div', id: 'map' }, listeners: { afterrender: function() { // 在这里初始化...
为了显示基于GeoExt 3的面板,在添加了一个新条目: { text: 'GeoExt 3', view: 'geo.MapPanel', leaf: true, iconCls: 'x-fa fa-globe', routeId: 'map' }测试要在本地测试应用程序,可以使用以下命令运行本地...
MapPanel内部使用了MapModel来管理地图数据,通过TileLoader加载地图瓦片,而UnfoldingMap类则负责地图的展开、折叠等操作。 此外,项目中还包括了各种地理数据的解析和处理,如GeoJSON、ShapeFile等,这些都需要对...