概述

Openlayers 中內置了9類控件，這9類控件都是基于Control類，而Control類則是繼承于BaseObject類，如下圖所示：

如上，這9類控件分別是：

• Attribution：屬性控件
• FullScreen:全屏控件
• MousePosition：鼠標位置控件
• OverviewMap:鷹眼控件
• Rotate：旋轉控件源碼分析之Openlayers中的Rotate旋轉控件
  
• ScaleLine：比例尺控件
• Zoom:縮放控件，可參考源碼分析之Openlayers中的Zoom縮放控件
• ZoomSlider：滑動縮放控件
• ZoomToExtent：縮放到指定視圖范圍控件源碼分析之Openlayers中的ZoomToExtent控件
  

本文主要介紹控件的基類Control類。

源碼剖析

Control類的實現如下：

class Control extends BaseObject {constructor(options) {super();const element = options.element;if (element && !options.target && !element.style.pointerEvents) {element.style.pointerEvents = "auto";}this.element = element ? element : null;this.target_ = null;this.map_ = null;this.listenerKeys = [];if (options.render) {this.render = options.render;}if (options.target) {this.setTarget(options.target);}}disposeInternal() {this.element?.remove();super.disposeInternal();}getMap() {return this.map_;}setMap(map) {if (this.map_) {this.element?.remove();}for (let i = 0, ii = this.listenerKeys.length; i < ii; ++i) {unlistenByKey(this.listenerKeys[i]);}this.listenerKeys.length = 0;this.map_ = map;if (map) {const target = this.target_ ?? map.getOverlayContainerStopEvent();target.appendChild(this.element);if (this.render !== VOID) {this.listenerKeys.push(listen(map, MapEventType.POSTRENDER, this.render, this));}map.render();}}render(mapEvent) {}setTarget(target) {this.target_ =typeof target === "string" ? document.getElementById(target) : target;}
}

Control類的構造函數

Control類的構造函數接受一個參數對象options,先是判斷options.element、!element.style.pointerEvents以及!options.target是否存在，若為true，則修改element元素的樣式，element對應的就是控件的HTML Element;然后初始化this.element,若options.element不存在，則this.element為null，反之為options.element;初始化this.target_和this.map_為null;初始化this.listenerKeys為[];最后判斷options.render是否存在，若存在則覆蓋this.render方法；判斷options.target是否存在，若存在，則調用this.setTarget方法。

Control類的主要方法

Control類作為控件基類，它定義的方法很少，主要有如下幾個：

• setTarget：接受一個參數target，若target是一個字符串，則調用document.getElementById獲取DOM節點，否則直接賦值，默認情況下，控件是會添加到overlay container中，這個方法會改變這個一默認行為

• getMap: 獲取this.map_

• setMap:Control類的核心方法，接受一個參數map對象，若this.map_存在該控件元素，則移除元素；并且循環遍歷this.listenerKeys移除注冊的事件監聽，并且清空this.listenerKeys，設置this.map_的值；然后判斷參數map是否存在，若存在，則重新添加控件元素到overlay container中，然后判斷this.render是否是空方法，若不為空方法，則調用listen方法注冊postrender類型的事件監聽，this.render方法即為注冊的回調函數，本質上它是子類中定義的一個方法；最后調用map.render方法。

• render方法：空函數，會被Control的子類覆蓋

• disposeInternal方法：清除方法，會移除控件元素，調用父類的disposeInternal方法移除監聽

總結

本文主要介紹了 Openlayers 中的控件類型分類以及控件基類Control類的實現。