源码分析之Openlayers中的Collection类

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

概述

在Map类中，有一种高频出现的类Collection（即集合）,比如Map类中interaction、controls和overlay的定义初始化和一些操作调用都和Collection有关。本文主要介绍 Openlayers 中Collection类的实现以及Collection类的事件机制。

源码剖析

Collection类

Collection类本质上就是对标准Javascript数组进行了一层封装，添加了一些方法。当对集合进行添加或者移除数组项时，会触发一个事件，比如上面示例中的CollectionEventType.ADD和CollectionEventType.REMOVE操作被监听触发后，就会执行后面的回调函数。

其实现如下：

class Collection extends BaseObject {
   
  constructor(array, options) {
   
    options = options || {
   };
    this.unique_ = !!options.unique;
    this.array_ = array ? array : [];
  }
  clear() {
   
    while (this.getLength() > 0) {
   
      this.pop();
    }
  }
  extend(arr) {
   
    for (let i = 0, ii = arr.length; i < ii; ++i) {
   
      this.push(arr[i]);
    }
    return this;
  }
  forEach(f) {
   
    const array = this.array_;
    for (let i = 0, ii = array.length; i < ii; ++i) {
   
      f(array[i], i, array);
    }
  }
  getArray() {
   
    return this.array_;
  }
  item(index) {
   
    return this.array_[index];
  }
  getLength() {
   
    return this.get(Property.LENGTH);
  }
  insertAt(index, elem) {