`
lozpeng
  • 浏览: 39505 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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  
没有注释 看不懂

相关推荐

    mappanel.zip

    MapPanel是openstreet-map(或其他类似的东西)的最小TileViewer。MapPanel使用Swing ui库制作,该库包含在任何标准Java安装中,非常适合包含在任何基于swing或SWT / RCP的应用程序中。

    Java调用在线地图浏览模块.rar

    2. **创建MapPanel**:在Java代码中,你需要创建一个MapPanel实例,配置地图服务的URL和其他参数,如地图类型、缩放级别等。 3. **设置地图事件监听器**:MapPanel支持各种交互操作,如拖动、缩放等。你可以添加...

    【Java课程设计大作业】雷电飞机射击游戏(附源代码+设计说明书)

    GamePanel类,是游戏的主要面板,有一个内部类(MapPanel)继承画布(Canvas)用于实现游戏地图的面板,内部类中包括paint方法绘制游戏飞机、子弹等,run方法用于启动线程,draw方法控制画布上的飞机、子弹等的变化...

    Extjs google maps添加标记,还支持中文

    var mapPanel = Ext.create('Ext.ux.GMapPanel', { title: '中文地图', width: 600, height: 400, center: [经度, 纬度], zoom: 10 }); ``` 2. **设置地图语言**:为了使地图显示中文,你需要设置地图的`...

    搭建简单的EXT-GWT(GXT)的开发环境(四)ext-gwt(gxt)结合google map第三版开发

    然后在相应包下创建`MyEntryPoint.java`,编写GWT应用的启动逻辑,这里可以实例化并显示`MapPanel`。 7. **编译和运行**:在Eclipse中,右键点击项目,选择“Google” -&gt; “Run As” -&gt; “Google Web Application...

    开源WebGIS

    例如,GeoExt.MapPanel类可以帮助我们创建一个包含地图的基本面板,GeoExt.data.LayerStore和GeoExt.data.LayerTree则能轻松管理和展示地图图层。此外,GeoExt.form.Panel可以用于构建包含GIS特性的表单,以便用户...

    openmap开发向导

    - **MapPanel**:提供一个可视化的面板来显示地图内容。 **4.2 LayerHandler** LayerHandler 负责管理地图上的图层,控制图层的添加、删除以及显示顺序等操作。 **4.3 鼠标事件与 MouseDelegator 和 ...

    extjs3中引入地图

    var mapPanel = new Ext.Panel({ title: '百度地图', width: 800, height: 600, html: '&lt;div id="baiduMap"&gt;&lt;/div&gt;', renderTo: Ext.getBody() }); ``` 这里我们创建了一个面板,并在其中嵌入了一个ID为...

    Java实现推箱子游戏

    1. `Gui$MapPanel.class`:这是游戏界面的地图面板类,负责显示游戏地图,包括角色、箱子、障碍物等元素。可能包含了绘制图形的方法和更新地图状态的逻辑。 2. `Gui.class`:这是游戏的主界面类,它管理着整个游戏...

    百度 地图 API

    var mapPanel = Ext.create('Ext.container.Viewport', { layout: 'fit', items: [{ xtype: 'component', autoEl: { tag: 'div', id: 'map' }, listeners: { afterrender: function() { // 在这里初始化...

    GeoDashBoard:ExtJS 6仪表板上的GeoExt 3示例

    为了显示基于GeoExt 3的面板,在添加了一个新条目: { text: 'GeoExt 3', view: 'geo.MapPanel', leaf: true, iconCls: 'x-fa fa-globe', routeId: 'map' }测试要在本地测试应用程序,可以使用以下命令运行本地...

    javamap源码-UCSDUnfoldingMaps:CourseraJava课程的源代码

    MapPanel内部使用了MapModel来管理地图数据,通过TileLoader加载地图瓦片,而UnfoldingMap类则负责地图的展开、折叠等操作。 此外,项目中还包括了各种地理数据的解析和处理,如GeoJSON、ShapeFile等,这些都需要对...

Global site tag (gtag.js) - Google Analytics