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

访问Openlayers网站(https://jinuss.github.io/Openlayers_map_pages/，网站是基于Vue3 + Openlayers，里面有大量的实践和案例。觉得还不错，可以 给个小星星Star，鼓励一波 https://github.com/Jinuss/OpenlayersMap哦~

概述

本文主要介绍 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.collapseCla