源码分析之Openlayers中默认Controls控件渲染原理

概述

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 中注册监听和派发事件核心机制的理解。