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();

 

 

 

附件是测试用的例子
多地图类型