OpenLayers中对 Map的事件 的使用和分析
http://www.cnblogs.com/lei3389/archive/2009/04/07/1430922.html
?
Map这个类提供了很多的事件可以让我们使用，本文说的就是如何使用以及对这部分源代码分析，关于openlayers的事件网上有很多的分析。
如何使用:
var map;
// define custom map event listeners
??????????????? function mapEvent(event) {
??????????????????? log(event.type);
??????????????? }
??????????????? function mapBaseLayerChanged(event) {
??????????????????? log(event.type + " " + event.layer.name);
??????????????? }
??????????????? function mapLayerChanged(event) {
??????????????????? log(event.type + " " + event.layer.name + " " + event.property);
??????????????? }
??????????????? map = new OpenLayers.Map('map', {
??????????????????? eventListeners: {
??????????????????????? "moveend": mapEvent,
??????????????????????? "zoomend": mapEvent,
??????????????????????? "changelayer": mapLayerChanged,
??????????????????????? "changebaselayer": mapBaseLayerChanged
??????????????????? }
??????????????? });
??????????????? 即，初始化的时候传入map的构造函数一个object，这个object中有个属性:
??????????????? eventListeners【其实是个哈希表】
看来我们要看map类的构造函数了。
---------------------------------------
---------------------------------------
进入map类，看构造函数
??? /**
???? * Constructor: OpenLayers.Map
???? * Constructor for a new OpenLayers.Map instance.
???? *
???? * Parameters:
???? * div - {String} Id of an element in your page that will contain the map.
???? * options - {Object} Optional object with properties to tag onto the map.
???? *
???? * Examples:
???? * (code)
???? * // create a map with default options in an element with the id "map1"
???? * var map = new OpenLayers.Map("map1");
???? *
???? * // create a map with non-default options in an element with id "map2"
???? * var options = {
???? *???? maxExtent: new OpenLayers.Bounds(-200000, -200000, 200000, 200000),
???? *???? maxResolution: 156543,
???? *???? units: 'm',
???? *???? projection: "EPSG:41001"
???? * };
???? * var map = new OpenLayers.Map("map2", options);
???? * (end)
???? */???
??? initialize: function (div, options)
??? 构造函数中进行初始化
??? 首先有一句:
??????????? // now override default options
??????? OpenLayers.Util.extend(this, options);
??????? Util.extend函数的作用可以理解为:是把第二个参数的属性方法都传给第一个参数
??????? 现在我们看刚才传入的带有eventListeners属性的object
??????? 我们传入的object给了options，则object中的eventListeners就传给了this.eventListeners
??????? 就是map类中的eventListeners属性
??? 来看这个属性的定义:
?????? /**
???? * APIProperty: eventListeners
???? * {Object} If set as an option at construction, the eventListeners
???? *???? object will be registered with <OpenLayers.Events.on>.? Object
???? *???? structure must be a listeners object as shown in the example for
???? *???? the events.on method.
???? */
??? eventListeners: null,
注释中说这个属性中的东西将通过OpenLayers.Events.on注册上,等会再说
同时指出这个对象必须是个“listeners object”的结构，其实就是我们前面传入的参数的eventListeners的结构
！！这里要注意了，listeners object是整个事件机制中的核心，所有的事件都是注册到他里面，然后触发的时候也是查找这个listeners object，找到里面注册的函数然后执行
goon..
构造函数中下面开始在map中初始化自己的events属性:
this.events = new OpenLayers.Events(this,
??????????????????????????????????????????? this.div,
??????????????????????????????????????????? this.EVENT_TYPES,
??????????????????????????????????????????? this.fallThrough,
??????????????????????????????????????????? {includeXY: true});
再往下就注册了:
if(this.eventListeners instanceof Object) {
??????????? this.events.on(this.eventListeners);
??????? }
通过map自己的Events属性(其实也是个object,就是events类的实例)中的on这个函数注册上，
我们要进入OpenLayers.Events类
---------------------------------------
---------------------------------------
看这个on方法
?? /**
???? * Method: on
???? * Convenience method for registering listeners with a common scope.
???? *
???? * Example use:
???? * (code)
???? * events.on({
???? *???? "loadstart": loadStartListener,
???? *???? "loadend": loadEndListener,
???? *???? scope: object
???? * });
???? * (end)
???? */
??? on: function(object) {
??????? for(var type in object) {
??????????? if(type != "scope") {
??????????????? this.register(type, object.scope, object[type]);
??????????? }
??????? }
??? },
on这个函数参数还是第一步中我们传入的eventListeners，就是那个哈希表
遍历，这个“scope”键值是事件的“产生源”对象，就是这个键值对应的对象触发我们注册的事件
register(type, object.scope, object[type])
type就是事件名称
object[type]就是处理事件的函数名
可以看一下第一步中传入的参数:
eventListeners: {
??????????????????????? "moveend": mapEvent,
??????????????????????? "zoomend": mapEvent,
??????????????????????? "changelayer": mapLayerChanged,
??????????????????????? "changebaselayer": mapBaseLayerChanged
??????????????????? }
再进入events类的另一个函数:this.register(type, object.scope, object[type])
?? /**
???? * APIMethod: register
???? * Register an event on the events object.
???? *
???? * When the event is triggered, the 'func' function will be called, in the
???? * context of 'obj'. Imagine we were to register an event, specifying an
???? * OpenLayers.Bounds Object as 'obj'. When the event is triggered, the
???? * context in the callback function will be our Bounds object. This means
???? * that within our callback function, we can access the properties and
???? * methods of the Bounds object through the "this" variable. So our
???? * callback could execute something like:
???? * :??? leftStr = "Left: " + this.left;
???? *??
???? *?????????????????? or
???? *?
???? * :??? centerStr = "Center: " + this.getCenterLonLat();
???? *
???? * Parameters:
???? * type - {String} Name of the event to register
???? * obj - {Object} The object to bind the context to for the callback#.
???? *???????????????????? If no object is specified, default is the Events's
???? *???????????????????? 'object' property.
???? * func - {Function} The callback function. If no callback is
???? *??????????????????????? specified, this function does nothing.
???? *
???? *
???? */
??? register: function (type, obj, func) {
??????? if ( (func != null) &&
???????????? (OpenLayers.Util.indexOf(this.eventTypes, type) != -1) ) {
??????????? if (obj == null)? {
??????????????? obj = this.object;
??????????? }
??????????? var listeners = this.listeners[type];
??????????? listeners.push( {obj: obj, func: func} );
??????? }
??? },
到这里，我们能看到我们所说的核心，那个哈希表，把自己的值都赋给了events类的一个属性:listeners
? /**
???? * Property: listeners
???? * {Object} Hashtable of Array(Function): events listener functions?
???? */
??? listeners: null,
这个事件机制的核心哈希表，键名就是事件的名称,也就是参数中的type,键值是一个对象{obj: obj, func: func}
当然这个对象中还有对象。。。。
现在事件已经注册上了，还有一个问题，register函数中提到了this.eventTypes，this.object
所以我们再回来看下events类的构造函数。
map类中实例化events属性的情景:
this.events = new OpenLayers.Events(????this, //指的是map
??????????????????????????????????????????? this.div,
??????????????????????????????????????????? this.EVENT_TYPES,
??????????????????????????????????????????? this.fallThrough,
??????????????????????????????????????????? {includeXY: true});
我们可以和events类的构造函数对比一下参数，就会明白了?
?? /**
???? * Constructor: OpenLayers.Events
???? * Construct an OpenLayers.Events object.
???? *
???? * Parameters:
???? * object - {Object} The js object to which this Events object? is being
???? * added element - {DOMElement} A dom element to respond to browser events
???? * eventTypes - {Array(String)} Array of custom application events
???? * fallThrough - {Boolean} Allow events to fall through after these have
???? *???????????????????????? been handled?
???? * options - {Object} Options for the events object.
???? */
??? initialize: function (
??? ???????????????object,
??? ???????????????element,
??? ???????????????eventTypes,
??? ???????????????fallThrough,
??? ???????????????options)
??? ??{
??????? OpenLayers.Util.extend(this, options);
??????? this.object???? = object;
??????? this.element??? = element;
??????? this.fallThrough = fallThrough;
??????? this.listeners? = {};
??????? // keep a bound copy of handleBrowserEvent() so that we can
??????? // pass the same function to both Event.observe() and .stopObserving()
??????? this.eventHandler = OpenLayers.Function.bindAsEventListener(
??????????? this.handleBrowserEvent, this
??????? );
??????? // if eventTypes is specified, create a listeners list for each
??????? // custom application event.
??????? this.eventTypes = [];
??????? if (eventTypes != null) {
??????????? for (var i=0, len=eventTypes.length; i<len; i++) {
??????????????? this.addEventType(eventTypes[i]);
??????????? }
??????? }
???????
??????? // if a dom element is specified, add a listeners list
??????? // for browser events on the element and register them
??????? if (this.element != null) {
??????????? this.attachToElement(element);
??????? }
??? },
?上面events的初始化是发生在map的初始化中，this.events.on(this.eventListeners);之前的，所以上面提到的register函数中的this.eventTypes，this.object 就明确意思了：
?this.object(this是指的events类)就是map,也就是说map是我们第一步传入参数中的注册事件的“发生源”，（比如button是onclik的“发生源”，“发生源”是本人自定义的。。不知道是否有合适的称呼，术语应该就是srcElement）
this.eventTypes(this是指的events类)就是map类中定义的一个常量:this.EVENT_TYPES(this是指的map类)
查到map类中的这个常量 EVENT_TYPES: [
??????? "preaddlayer", "addlayer", "removelayer", "changelayer", "movestart",
??????? "move", "moveend", "zoomend", "popupopen", "popupclose",
??????? "addmarker", "removemarker", "clearmarkers", "mouseover",
??????? "mouseout", "mousemove", "dragstart", "drag", "dragend",
??????? "changebaselayer"],
所以我们在初始化map的时候传入的参数中，注册的事件都是来自于这个常量中的
