MapEasy开发体会(三)――多地图类型

        实现多地图类型功能很简单,因为大部分工作MAPEASY都做完了,我们只需要针对它留的接口开发就行了.

       先简单说下多地图类型的实现思路.

1.通过MapBuilder类的实例mapBuilder的addTool方法,根据参数类型判断是否需要创建MapTypeWidget类,并执行其paint()方法.

代码:

var mapbuilder = new MapBuilder($( "map"));
mapbuilder.outputMap( new Point(0, 0), 2);
// 滑块工具
mapbuilder.addTool(MapBuilder.TOOL_SLIDERBAR);
// 地图类型工具
mapbuilder.addTool(MapBuilder.TOOL_MAPTYPE);
// 得到地图对象

 

     this.addTool = function(para) {
   if (para == MapBuilder.TOOL_SLIDERBAR) {
       new SliderWidget( this.mapModel).paint();
  }
   if (para == MapBuilder.TOOL_MAPTYPE) {
       new MapTypeWidget( this.mapModel).paint();
  }
    }

 

2.当实例化MapTypeWidget对象后,也就是执行 new MapTypeWidget( this.mapModel).paint(); 这句时,将地图对象model传进来.这里有一个继承关系: MapTypeWidget继承于BaseWidget,BaseWidget继承于Listener,Listener定义propertyChange监听属性变化. 然后在MapTypeWidget的构造函数中注册监听this.model.addListener("maptype", this);最后响应paint();方法绘制工具.

代码:

/**
* 扩展工具 -- 多地图类型
*
* @author Tim.Wu Michael.Young
*/
function MapTypeWidget(model) {
  
     // Inherit from BaseWidget
    BaseWidget.apply( this, new Array(model));

     //~ Method
    {
   this.model.addListener( "maptype", this);
    }

     this.propertyChange = function(param, newValue) {
   if (param == "maptype") {
       this.paint();
  }
    }

     this.paint = function() {
   var HTMLCode = '';
   for ( var i = 0;i < MapModel.mapTypes.length;i++) {
       var mapType = MapModel.mapTypes[i];
       if ( this.model.currentMapType == i) {
    HTMLCode += '<img src= "' + mapType.getEnablePic() + '" style= "cursor:pointer;"> ';
      } else {
    HTMLCode += '<img src= "' + mapType.getDisablePic() + '" style= "cursor:pointer;" onclick= "command.exec(\'maptype\', new Array(' + this.model.getId() + ', ' + i + '))"> ';
      }
  }
   var maptypeBar = $( "maptypebar_" + this.model.getId());
  maptypeBar.innerHTML = HTMLCode;
    }
}

 

3.当执行切换地图事件时,也就是执行 command.exec(\'maptype\', new Array(' + this.model.getId() + ', ' + i + '))" 这句代码时.监听器被激活,从而响应到地图切换命令,并再次重绘.

代码:

     this.propertyChange = function(param, newValue) {  
   if (param == "maptype") {  
       this.paint();  
  }  
    }

 

基本过程就是这样了,下面是添加多地图类型切换的方法:

找到首页,绿色背景为改动部分

function IMSMapType() {

    MapType.apply( this);

     this.getSrc = function(level, row, column) {
   return "arcims.asp?z="+level+ "&x="+column+ "&y="+row
    }
}
function IMSMapTypeSatellite() {
    MapType.apply(this);
    this.getSrc = function(level, row, column) {
  return "mappic/picsatellite/ch_"+column+"_"+row+"_"+level+".gif";
    }
}
MapModel.mapTypes = new Array( new IMSMapType(), new IMSMapTypeSatellite());
MapModel.maxZoomLevel=10

var mapbuilder = new MapBuilder($( "map"));
mapbuilder.outputMap( new Point(0, 0), 2);
// 滑块工具
mapbuilder.addTool(MapBuilder.TOOL_SLIDERBAR);
// 地图类型工具
// mapbuilder.addTool(MapBuilder.TOOL_MAPTYPE);
// 得到地图对象
var map = mapbuilder.getMap();

 

 

 

附件是测试用的例子