网站伪静态是什么意思,一键建站网站,网页设计用什么软件做,如何建立免费的个人企业网站概述
Openlayers 中默认的三类控件是Zoom、Rotate和Attribution
源码分析
defaults方法
Openlayers 默认控件的集成封装在defaults方法中#xff0c;该方法会返回一个Collection的实例#xff0c;Collection是一个基于数组封装了一些方法#xff0c;主要涉及到数组项的添…概述
Openlayers 中默认的三类控件是Zoom、Rotate和Attribution
源码分析
defaults方法
Openlayers 默认控件的集成封装在defaults方法中该方法会返回一个Collection的实例Collection是一个基于数组封装了一些方法主要涉及到数组项的添加会注册触发一些事件。关于Collection类可以参考源码分析之 Openlayers 中的 Collection 类
defaults方法实现如下
export function defaults(options) {options options ? options : {};const controls new Collection();const zoomControl options.zoom ! undefined ? options.zoom : true;if (zoomControl) {controls.push(new Zoom(options.zoomOptions));}const rotateControl options.rotate ! undefined ? options.rotate : true;if (rotateControl) {controls.push(new Rotate(options.rotateOptions));}const attributionControl options.attribution ! undefined ? options.attribution : true;if (attributionControl) {controls.push(new Attribution(options.attributionOptions));}return controls;
}默认控件的渲染
Openlayers 中的默认控件机制和默认键盘事件机制大同小异关于 Openlayers 中的默认键盘事件可以参考源码分析之 Openlayers 中默认键盘事件触发机制
赋值
在Map.js中方法中有如下代码
class Map extends BaseObject {constructor(options) {const optionsInternal createOptionsInternal(options);this.controls optionsInternal.controls || defaultControls();}
}function createOptionsInternal(options) {let controls;if (options.controls ! undefined) {if (Array.isArray(options.controls)) {controls new Collection(options.controls.slice());} else {assert(typeof (/** type {?} */ (options.controls).getArray) function,Expected controls to be an array or an ol/Collection.js);controls options.controls;}}return {controls: controls,};
}同Interactions一样在createOptionsInternal方法中会判断参数options中是否配置了控件若配置了控件则判断其类型是否是一个数组若是数组则将其转为Collection实例否则判断其是否存在getArray方法默认情况下createOptionsInternal方法的返回值中controls为undefined因此在Map类中this.controls的值为defaultControls()方法的返回值即包含Zoom、Rotate和Attribution控件的Collection实例。
注册监听、初始化
默认控件的注册、监听、移除 、添加方法都是在Map类中实现的首先看下代码
class Map extends BaseObject {constructor(options) {this.controls.addEventListener(CollectionEventType.ADD, (event) {event.element.setMap(this);});this.controls.addEventListener(CollectionEventType.REMOVE, (event) {event.element.setMap(null);});}this.controls.forEach((control) {control.setMap(this);},);//获取this.controlsgetControls() {return this.controls;}//添加controlsaddControl(control) {this.getControls().push(control);}//移除controlsremoveControl(control) {return this.getControls().remove(control);}
}监听和触发
在Map类的构造函数中注册了this.controls的添加和移除的监听事件。通过前面我们知道this.controls是一个Collection类的实例而Collection类是继承于BaseObject类因此this.controls可以通过addEventListener注册监听事件而调用Collection实例的remove方法会dispatchEvent(new CollectionEvent(remove))派发remove类型的监听事件调用Collection实例的push方法会dispatchEvent(new CollectionEvent(add))派发add类型的监听事件。也就是说addControls方法会执行(event) {event.element.setMap(this);};,removeControls方法会执行(event) {event.element.setMap(null);}
初始化渲染
在Map类的构造函数中会调用this.controls.forEach方法该方法会遍历默认控件的实例此时就会进行控件的实例化将控件元素添加到DOM中然后调用执行控件的setMap在Collection类的介绍中提过因为 Openlayers 中控件都是基于Control类实现而Control类中的setMap就是设置this.map_,如此控件的交互对象也就有了。
总结
本文介绍了 Openlayers 中默认控件的原理可以加深对 Openlayers 中注册监听和派发事件核心机制的理解。
