源码分析之Leaflet中的LayerGroup

概述

LayerGroup是一个图层组，通过继承Layer基类，提供了一种管理多个图层（如标记、多边形等）的容器机制，比如地图的添加/移除操作等。

源码分析

源码实现

LayerGroup的源码实现如下：

js 复制代码

export var LayerGroup = Layer.extend({
  initialize:function(layers,options){
    Util.setOptions(this,options);
    this._layers={};
    var i,len;
    if(layers){
       for(i=0,len=layers.length;i<len;i++){
          this.addLayer(layers[i])
       }
    }
  },
  addLayer:function(layer){
    var id= this.getLayerId(layer);
    this._layers[id]=layer;
    if(this._map){
      this._map.addLayer(layer)
    }

    return this;
  },
  removeLayer:function(layer){
    var id = layer in this._layers ? layer :this.getLayerId(layer);

    if(this._map && this._layers[id]){
       this._map.removeLayer(this._layers[id])
    }

    delete this._layers[id];

    return this;
  },
  hasLayer:function(layer){
    var layerId = typeof layer === 'number' ? layer:this.getLayerId(layer);
    return layerId in this._layers;
  },
  clearLayers:function(){
    return this.eachLayer(this.removeLayer,this)
  },
  invoke:function(methodName){
    var args = Array.prototype.slice.call(argument,1),i,layer;
    for(i in this._layers){
      layer =this._layers[i];
      if(layer[methodName]){
        layer[methodName].apply(layer,args);
      }
    }

    return this;
  },
  onAdd:function(map){
    this.eachLayer(map.addLayer,map)
  },
  onRemove:function(map){
    this.eachLayer(map.removeLayer,map)
  },
  eachLayer:function(method,context){
    for(var i in this._layers){
       method.call(context,this._layers[i])
    }

    return this;
  },
  getLayer:function(id){
    return this._layers[id]
  }，
  getLayers:function(){
    var layers = [];
    this.eachLayer(layers.push,layers);
    return layers
  },
  setZIndex:function(zIndex){
    return this.invoke('setZIndex',zIndex)
  },
  getLayerId:function(layer){
    return Util.stamp(layer)
  },
})

export var layerGroup=function(layers,options){
    return new LayerGroup(layers,options)
}

源码解析

1.类定义与继承

继承：LayerGroup继承自Layer，意味着LayerGroup具有Layer的所有属性和方法，本身也是一个图层，但其主要职责是负责管理子图层。
工厂函数 ：LayerGroup函数提供了创建实例的快捷方式

2.初始化方法initialize

选项处理 ： Util.setOptions将options合并到实例属性中。
图层存储 ：_layers是一个对象，以键值对形式存储子图层，键是图层ID（通过Util.stamp生成）
初始图层添加 ：如果传入layers数组，则遍历并调用addLayer逐个添加

3.核心方法解析

addLayer(layer):
- 生成唯一ID ：通过getLayerId（内部调用Util.stamp）为图层生成唯一标识
- 存储图层 ：将图层存入_layers对象
- 自动添加到地图 ：如果当前LayerGroup已添加到地图，则子图层也会立即加入地图
removeLayer(layer):
- 查找图层 ：通过getLayerId查找图层
- 从地图移除 ：如果当前LayerGroup已添加到地图，则子图层也会立即从地图移除
- 删除存储 ：从_layers中删除图层
hasLayer(layer):
- 查找图层 ：通过getLayerId查找图层
- 返回存在性 ：返回true或false
clearLayers():
- 遍历移除 ：调用eachLayer遍历所有子图层，调用removeLayer逐个移除

4.批量操作

invoke(methodName, ...args):
- 批量调用 ：遍历所有子图层，调用指定方法（如setZIndex），并传递参数
- 返回this：支持链式调用
eachLayer(method,context):
- 遍历执行：遍历所有子图层，执行指定方法，可传递上下文

5.地图生命周期钩子

onAdd(map)与onRemove(map)
- 自动代理子图层 ：当LayerGroup添加到地图时，会自动调用子图层的addLayer方法，移除时调用removeLayer方法

6.辅助方法

getLayer(id)与getLayers()
- 按ID获取图层：直接通过ID查找
- 获取全部图层数组 ：利用eachLayer将对象形式的图层转换为数组
setZIndex(zIndex)
- 批量设置ZIndex ：调用invoke批量设置子图层的ZIndex

7.工具方法getLayerId

生成唯一ID ：内部调用Util.stamp，确保每个图层都有唯一的ID

设计思想

1.组合模式 ：LayerGroup本身是Layer，同时管理多个子图层，形成树形结构

2.代理机制 ：通过重写onAdd/onRemove，自动管理子图层的地图添加/移除

3.批量操作 ：提供invoke和eachLayer实现高效批量控制

4.ID管理 ：利用Util.stamp确保图层唯一标识，避免冲突

总结

LayerGroup的核心就是维护一个图层集合，并代理这些图层的方法调用，通过组合模式，可以方便批量操作多个图层，提升代码复用性和易用性。