概述

在Leaflet中，Rectangle类通过继承Polygon实现矩形绘制，将LatLngBounds转换为多边形顶点即四个顶点。

源码分析

源码实现

Rectangle类的源码实现如下：

export var Rectangle = Polygon.extend({
  initialize: function (latLngBounds, options) {
    // 将边界转换为多边形顶点，再调用Polygon类的初始化方法
    Polygon.prototype.initialize.call(
      this,
      this._boundsToLatLng(latLng),
      options
    );
  },
  // 动态更新矩形范围
  setBounds: function (latLngBounds) {
    return this.setLatLngs(this._boundsToLatLngs(latLngBounds));
  },
  _boundsToLatLngs: function (latLngBounds) {
    latLngBounds = toLatLngBounds(latLngBounds);
    return [
      latLngBounds.getSouthWest(), //西南角
      latLngBounds.getNorthWest(), // 西北角
      latLngBounds.getNorthEast(), // 东北角
      latLngBounds.getSouthEast(), // 东南角
    ];
  },
});

// 工厂函数
export function rectangle(latLngBounds, options) {
  return new Rectangle(latLngBounds, options);
}

源码解析

1. 继承关系：Rectangle类继承自Polygon类，因此具有Polygon类的所有方法和属性。

2. 构造函数：initialize方法将LatLngBounds转换为多边形顶点，再调用Polygon类的初始化方法。

3. 动态更新矩形范围：setBounds方法用于动态更新矩形范围，将边界转换为多边形顶点，再调用setLatLngs方法更新多边形的顶点。

4. 工厂函数：rectangle函数用于创建Rectangle类的实例。

关键设计点

1.​​地理范围转多边形​​：将矩形视为特殊多边形，通过四顶点表达，复用多边形渲染逻辑。 ​2.​顶点顺序正确性​​：按 SW → NW → NE → SE 顺序生成坐标，确保投影后闭合路径形成矩形。 ​​3.动态更新优化​​：通过 setBounds 直接更新边界，无需手动操作坐标数组。 ​​4.继承与扩展​​：基于 Polygon 快速实现功能，减少冗余代码。

总结

Rectangle 类通过巧妙继承和坐标转换，高效实现了矩形绘制功能。其核心是将地理范围（LatLngBounds）转换为多边形顶点，复用 Polygon 的渲染与交互逻辑，同时提供简洁的 API（如 setBounds）提升易用性