源码分析之Leaflet中的FeatureGroup

概述

Leaflet中的FeatureGroup是LayerGroup的扩展类，专为批量管理一组图层设计，支持统一的事件处理、样式设置和边界计算等。

源码分析

源码实现

FeatureGroup的源码实现如下：

export var FeatureGroup = LayerGroup.extend({
  addLayer: function (layer) {
    if (this.hasLayer(layer)) {
      return this;
    }

    layer.addEventParent(this);
    LayerGroup.prototype.addLayer.call(this, layer);
    return this.fire("layeradd", { layer: layer });
  },
  removeLayer: function (layer) {
    if (!this.hasLayer(layer)) {
      return this;
    }

    if (layer in this._layers) {
      layer = this._layers[layer];
    }
    layer.removeEventParent(this);
    LayerGroup.prototype.removeLayer.call(this, layer);

    return this.fire("layerremove", { layer: layer });
  },
  setStyle: function (style) {
    return this.invoke("setStyle", style);
  },
  bringToFront: function () {
    return this.invoke("bringToFront");
  },
  bringToBack: function () {
    return this.invoke("bringToBack");
  },
  getBounds: function () {
    var bounds = new LatLngBounds();

    for (var id in this._layers) {
      var layer = this._layers[id];
      bounds.extend(layer.getBounds ? layer.getBounds() : layer.getLatLng());
    }
    return bounds;
  },
});

export var featureGroup = function (layers, options) {
  return new FeatureGroup(layer, options);
};

源码详解

1.继承与初始化

• 继承自LayerGroup：拥有基础图层组功能（添加、删除、遍历图层等）

• 新增特性：事件冒泡、批量样式设置、自动计算边界等

2.核心方法解析

addLayer(layer)

• 事件冒泡：通过layer.addEventParent(this)，子图层的事件（如点击）会冒泡到FeatureGroup
• 触发自定义事件：添加图层后触发layeradd事件，便于外部监听

removeLayer(layer)

• 解绑事件：移除图层时，取消其与FeatureGroup的事件关联
• 触发layerremove事件：通知外部图层被移除

3.批量操作方法

setStyle(style)

• 统一修改样式：对组内所有支持setStyle方法的子图层（如Polygon、Circle）应用相同样式

bringToFront()与bringToBack()

• 调整叠放顺序：调用子图层的bringToFront或bringToBack方法，控制组内所有图层的显示层级

4.边界计算 getBounds()

• 自动计算范围：

  • 若子图层有getBounds方法（如多边形），取其边界
  • 若为点图层（如Marker），则取其坐标
  • 最终返回包含所有子图层的LatLngBounds对象

• 应用场景：调整地图视图以完整显示整个图层组，如

map.fitBounds(featureGroup.getBounds());

5.工厂函数

• 简化创建：featureGroup函数是FeatureGroup的简化工厂，直接创建并返回实例，无需手动实例化

6.核心设计思想

1.事件冒泡机制

• 子图层的事件（如click、mouseover）会冒泡到FeatureGroup，便于统一监听处理

2.批量操作

• 通过invoke方法（继承自LayerGroup）统一调用子图层的方法，简化对组内所有图层的操作

3.逻辑边界聚合

• 动态计算组内所有图层的总边界，便于地图自适应适配显示

7.对比LayerGroup

特性	LayerGroup	FeatureGroup
继承关系	LayerGroup继承自Layer	FeatureGroup继承自LayerGroup
事件冒泡	不支持	支持，子图层事件冒泡到组
统一样式设置	需手动遍历	通过setStyle批量设置
边界计算	需手动计算	自动通过getBounds()计算
叠放顺序控制	无内置方法	提供bringToFront/bringToBack

8.使用示例

// 创建包含标记和多边形的 FeatureGroup
var group = L.featureGroup([marker, polygon])
  .bindPopup('Group Popup') // 绑定统一弹窗
  .setStyle({color: 'red'}); // 所有子路径变红色

group.on('click', function () {
  alert('点击了组内元素!');
});

map.addLayer(group);
map.fitBounds(group.getBounds()); // 自动调整视图

总结

FeatureGroup是Leaflet中用于管理一组图层的重要工具，通过继承LayerGroup，实现了事件冒泡、批量操作、边界计算等功能，简化了对图层组的管理和操作，适合处理复杂地理元素的统一交互与显示需求