当前位置：首页 > news >正文

源码分析之Leaflet中的LayerGroup

news 来源：原创 2025/5/11 9:24:27

概述

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