源码分析之Openlayers中的Attribution属性控件

概述

本文主要介绍 Openlayers 中Attribution属性控件的源码实现，该控件也是 Openlayers 中三个默认控件之一。默认情况下，控件会显示在地图的右下角，可以通过控件的类名设置CSS属性控制。实际应用中该控件主要显示与图层源source相关的所有属性，一般用来显示版权说明等等。

源码分析

Attribution控件继承自Control类，关于Control类，可以参考这篇文章源码分析之Openlayers中的控件篇Control基类介绍

Attribution类控件源码实现如下

class Attribution extends Control {constructor(options) {options = options ? options : {};super({element: document.createElement("div"),render: options.render,target: options.target,});this.ulElement_ = document.createElement("ul");this.collapsed_ =options.collapsed !== undefined ? options.collapsed : true;this.userCollapsed_ = this.collapsed_;this.overrideCollapsible_ = options.collapsible !== undefined;this.collapsible_ =options.collapsible !== undefined ? options.collapsible : true;if (!this.collapsible_) {this.collapsed_ = false;}this.attributions_ = options.attributions;const className =options.className !== undefined ? options.className : "ol-attribution";const tipLabel =options.tipLabel !== undefined ? options.tipLabel : "Attributions";const expandClassName =options.expandClassName !== undefined? options.expandClassName: className + "-expand";const collapseLabel =options.collapseLabel !== undefined ? options.collapseLabel : "\u203A";const collapseClassName =options.collapseClassName !== undefined? options.collapseClassName: className + "-collapse";if (typeof collapseLabel === "string") {this.collapseLabel_ = document.createElement("span");this.collapseLabel_.textContent = collapseLabel;this.collapseLabel_.className = collapseClassName;} else {this.collapseLabel_ = collapseLabel;}const label = options.label !== undefined ? options.label : "i";if (typeof label === "string") {this.label_ = document.createElement("span");this.label_.textContent = label;this.label_.className = expandClassName;} else {this.label_ = label;}const activeLabel =this.collapsible_ && !this.collapsed_ ? this.collapseLabel_ : this.label_;this.toggleButton_ = document.createElement("button");this.toggleButton_.setAttribute("type", "button");this.toggleButton_.setAttribute("aria-expanded", String(!this.collapsed_));this.toggleButton_.title = tipLabel;this.toggleButton_.appendChild(activeLabel);this.toggleButton_.addEventListener(EventType.CLICK,this.handleClick_.bind(this),false);const cssClasses =className +" " +CLASS_UNSELECTABLE +" " +CLASS_CONTROL +(this.collapsed_ && this.collapsible_ ? " " + CLASS_COLLAPSED : "") +(this.collapsible_ ? "" : " ol-uncollapsible");const element = this.element;element.className = cssClasses;element.appendChild(this.toggleButton_);element.appendChild(this.ulElement_);this.renderedAttributions_ = [];this.renderedVisible_ = true;}collectSourceAttributions_(frameState) {const layers = this.getMap().getAllLayers();const visibleAttributions = new Set(layers.flatMap((layer) => layer.getAttributions(frameState)));if (this.attributions_ !== undefined) {Array.isArray(this.attributions_)? this.attributions_.forEach((item) => visibleAttributions.add(item)): visibleAttributions.add(this.attributions_);}if (!this.overrideCollapsible_) {const collapsible = !layers.some((layer) => layer.getSource()?.getAttributionsCollapsible() === false);this.setCollapsible(collapsible);}return Array.from(visibleAttributions);}async updateElement_(frameState) {if (!frameState) {if (this.renderedVisible_) {this.element.style.display = "none";this.renderedVisible_ = false;}return;}const attributions = await Promise.all(this.collectSourceAttributions_(frameState).map((attribution) =>toPromise(() => attribution)));const visible = attributions.length > 0;if (this.renderedVisible_ != visible) {this.element.style.display = visible ? "" : "none";this.renderedVisible_ = visible;}if (equals(attributions, this.renderedAttributions_)) {return;}removeChildren(this.ulElement_);// append the attributionsfor (let i = 0, ii = attributions.length; i < ii; ++i) {const element = document.createElement("li");element.innerHTML = attributions[i];this.ulElement_.appendChild(element);}this.renderedAttributions_ = attributions;}handleClick_(event) {event.preventDefault();this.handleToggle_();this.userCollapsed_ = this.collapsed_;}handleToggle_() {this.element.classList.toggle(CLASS_COLLAPSED);if (this.collapsed_) {replaceNode(this.collapseLabel_, this.label_);} else {replaceNode(this.label_, this.collapseLabel_);}this.collapsed_ = !this.collapsed_;this.toggleButton_.setAttribute("aria-expanded", String(!this.collapsed_));}getCollapsible() {return this.collapsible_;}setCollapsible(collapsible) {if (this.collapsible_ === collapsible) {return;}this.collapsible_ = collapsible;this.element.classList.toggle("ol-uncollapsible");if (this.userCollapsed_) {this.handleToggle_();}}setCollapsed(collapsed) {this.userCollapsed_ = collapsed;if (!this.collapsible_ || this.collapsed_ === collapsed) {return;}this.handleToggle_();}getCollapsed() {return this.collapsed_;}render(mapEvent) {this.updateElement_(mapEvent.frameState);}
}

Attribution控件的主要方法

关于Attribution控件主要介绍它的两个方法，如下

• collectSourceAttributions_方法

collectSourceAttributions_方法顾名思义就是获取图层源的属性作为一个集合；该方法内部先调用getMap().getAllLayers()方法获取所有图层，然后遍历图层获取图层源的属性信息；判断，若this.attributions_存在，则根据它的类型将其添加到visibleAttributions中；判断，若this.overrideCollapsible_为false，则获取图层源属性折叠信息，调用setCollapsible方法

• updateElement_方法

updateElement_方法在控件的render方法中调用，本质上就是获取属性信息，更新信息。

总结

本文主要介绍了 Openlayers 中的Attribution属性控件，这个控件的非核心部分就是点击元素折叠显示，详见上面源码即可；另，核心部分就是collectSourceAttributions_方法，获取图层源的信息，这是基于Layer类和Source类实现的，关于这两个 Openlayers 的核心类，可以参考后面的文章。