源码分析之Leaflet中的LayerGroup

概述

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

源码分析

源码实现

LayerGroup的源码实现如下：

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