首页 / Leaflet / API 文档

Polygon

先看结论

闭合面要素，支持内环挖洞，样式继承自 Path，额外带填充参数。

最后验证 2026-11-03 · Leaflet 1.9.4 · 更新 2026-10-27 · 引用本文

L.polygon(latlngs, options) → Polygon

顶点结构

单环多边形传一维数组；带洞的多边形传二维数组，第一个是外环，其余是内环。 Leaflet 会自动闭合路径，首尾点不需要重复。

var square = [
  [39.90, 116.38],
  [39.90, 116.42],
  [39.93, 116.42],
  [39.93, 116.38]
];

var withHole = [
  square,
  [[39.91, 116.39], [39.91, 116.41], [39.92, 116.41], [39.92, 116.39]]
];

构造参数

参数	默认	说明
`color`	'#3388ff'	边框颜色
`weight`	3	边框宽度
`opacity`	1	边框透明度
`fill`	true	是否填充
`fillColor`	同 color	填充色
`fillOpacity`	0.2	填充透明度
`fillRule`	'evenodd'	内环挖洞依赖该规则，不要改成 nonzero
`dashArray` / `dashOffset`	null	虚线样式
`smoothFactor`	1.0	顶点简化强度
`noClip`	false	关闭视野裁剪
`interactive`	true	是否响应鼠标
`renderer`	SVG	指定渲染器
`pane`	'overlayPane'	渲染 pane
`className`	''	附加类名

方法

方法	说明
`setLatLngs(latlngs)`	替换顶点，支持嵌套环
`getLatLngs()`	单环返回一维数组，带洞返回二维数组
`getCenter()`	外接矩形中心
`getBounds()`	外接矩形
`setStyle(options)`	修改边框与填充
`toGeoJSON(precision?)`	导出 Polygon，自动补闭合点
`bringToFront()` / `bringToBack()`	调整层级
`redraw()`	重新投影

var zone = L.polygon(withHole, {
  color: '#17694a',
  weight: 2,
  fillColor: '#17694a',
  fillOpacity: 0.25,
  fillRule: 'evenodd'
}).addTo(map);

zone.bindPopup('外环减去内环');

zone.on('click', function (e) {
  L.DomEvent.stopPropagation(e);
  zone.setStyle({ fillOpacity: 0.45 });
});

内环能挖洞的前提是 fillRule: 'evenodd'。 改成 nonzero 后，内环如果与外环方向相同，洞会被填实。 Leaflet 默认值就是 evenodd，自定义样式时不要误改。

面积与几何运算

L.polygon 没有面积、包含判断、相交计算。这些属于空间分析，需要球面面积公式或 Turf.js 一类库。经纬度直接按平面算面积，在高纬度会产生百分之几十的误差。

/* 球面面积，单位平方米 */
function ringArea(ring) {
  var R = 6378137, rad = Math.PI / 180, sum = 0;
  for (var i = 0, n = ring.length; i < n; i++) {
    var a = ring[i], b = ring[(i + 1) % n];
    sum += (b.lng - a.lng) * rad *
           (2 + Math.sin(a.lat * rad) + Math.sin(b.lat * rad));
  }
  return Math.abs(sum * R * R / 2);
}

自相交与渲染异常

顶点顺序混乱、路径自我交叉时，填充结果可能和预期相反，出现大块被填满的区域。这类数据在 GIS 软件里通常被标记为无效几何。前端能做的只是保证顶点按环依次排列，真正的修复应在数据生产环节完成。

大量多边形

每个 L.polygon 都是一个独立 SVG 节点。上千个面时改用 preferCanvas: true 让地图统一在一个 canvas 上绘制， DOM 节点数量会从上千降到几个。代价是单个面无法再用 CSS 做样式。

引用本文

经纬志（2026）。《Polygon》。https://www.jingweizhi.com/leaflet/api/polygon.html（访问日期 2026-11-03）。