01 · NOTES / WebGIS 开发

第 08 节 · 常用插件

2026 年 9 月 1 日

第 08 节 · 常用插件

📌 版本信息：Leaflet 1.9.4 + 插件生态（markercluster 1.5 / heat 0.2 / minimap 1.2 / fullscreen 1.0；2026-08-29 核对，CDN 版随练习分发） 📚 来源：Leaflet 插件列表（官方大目录，按需淘）｜各插件 GitHub 🎯 站在社区肩膀上：聚合、热力、鹰眼、全屏——四个"业务要了你就得有"的能力。

一、这一节的目标

掌握 markercluster：海量点聚合（Web 地图最常见性能方案）
掌握 heat 插件：热力图
掌握 minimap：鹰眼图
掌握 fullscreen：全屏切换
建立"插件评估三问"的习惯

二、markercluster：聚合（必会）

问题：1 万个 marker 全渲染 = 卡死（每个都是 DOM）。方案：按屏幕邻近度聚合——缩小时显示"数字圆圈"，放大自动展开。

<script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css" />

// 用法：把 L.layerGroup() 换成 L.markerClusterGroup()——API 几乎一样！
const cluster = L.markerClusterGroup({
  showCoverageOnHover: false,      // 悬停显示聚合范围框（默认 true，演示用）
  maxClusterRadius: 60,            // 聚合半径(px)：越大越"聚合"
  spiderfyOnMaxZoom: true,         // 最大级展开成蜘蛛线
});
quakes.forEach((q) => cluster.addLayer(L.marker([q.lat, q.lng]).bindPopup(q.place)));
cluster.addTo(map);
// 与 Layers 控件/fitBounds 完全兼容（它就是个 LayerGroup）

经验：500 点以下不必聚合；1 万点以上想更猛 → 换 canvas 渲染（preferCanvas: true 的 map 选项，circleMarker 走 canvas）或矢量瓦片（模块 08）。

三、heat：热力图

<script src="https://unpkg.com/leaflet.heat@0.2.0/dist/leaflet-heat.js"></script>

// 数据格式：[[lat, lng, 权重], ...]（权重 0~1，不给则按密度）
const heatPoints = quakes.map((q) => [q.lat, q.lng, q.mag / 7]);

L.heatLayer(heatPoints, {
  radius: 25,           // 影响半径(px)
  blur: 15,             // 模糊度（边缘柔和）
  maxZoom: 12,          // 达到此级别热力最"实"
  minOpacity: 0.3,
  gradient: { 0.2: '#1e3a8a', 0.4: '#22c55e', 0.6: '#facc15', 0.8: '#f97316', 1: '#ef4444' },  // 色带
}).addTo(map);
// setOptions/setLatLngs 可动态更新（时间过滤的热力：更新数据不重建）

语义提醒：热力图表达"密度/强度"，它不是分级统计图（choropleth）——前者点密集度渲染，后者按区域属性填色。汇报里别说混。

四、minimap 鹰眼 + fullscreen 全屏

<link rel="stylesheet" href="https://unpkg.com/leaflet-minimap@3.6.1/dist/Control.MiniMap.min.css" />
<script src="https://unpkg.com/leaflet-minimap@3.6.1/dist/Control.MiniMap.min.js"></script>
<script src="https://unpkg.com/leaflet-fullscreen@1.0.2/dist/Leaflet.fullscreen.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet-fullscreen@1.0.2/dist/leaflet.fullscreen.css" />

// 鹰眼：右下角小地图显示主图视野范围（底图一般用更简的源）
L.control.minimap(L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png'), {
  position: 'bottomright',
  toggleDisplay: true,       // 可折叠
  zoomLevelOffset: -5,       // 鹰眼比主图小 5 级
  aimingRectOptions: { color: '#ff4d4f' },
}).addTo(map);

// 全屏：控件一键，或代码 map.toggleFullscreen()
map.addControl(new L.Control.Fullscreen({ position: 'topleft' }));

五、插件评估三问（加插件的纪律）

维护状态：GitHub 最近提交？issue 堆积？（死插件 = 未来债）
体积与依赖：一个功能 200KB 值吗？与现有版本兼容？
自己写的成本：这个功能 50 行内能写吗？（如全屏用 Fullscreen API 10 行搞定——但 Leaflet 的还处理了控件状态，权衡）

💡 插件装多了构建体积与冲突风险上升——C-06 工作台规则：同一能力只留一个插件。

六、动手跟练：08 · 插件体验页

配套文件：05-leaflet/examples/08-插件体验页.html

步骤：

一个页面集成四个插件：随机生成 800 个点 → markercluster 聚合 + heatLayer 热力（开关切换两种可视化）+ minimap 鹰眼 + fullscreen 按钮
完成 6 个 TODO：maxClusterRadius 三档对比、聚合数字自定义样式（iconCreateFunction）、热力色带渐变实验、heat 与 cluster 切换（removeLayer/addLayer）、minimap 换底图源、fullscreen API 对比（浏览器原生 requestFullscreen 手写 10 行版）
性能实验：800 点开/关聚合的拖动流畅度对比（肉眼可见差异）

通关标准：

四插件全部工作
聚合自定义样式（iconCreateFunction）实现
能回答"500/1万/10万点"三档的性能方案选择

七、自测题

markercluster 替代的是哪个类？API 兼容性如何？
heat 数据格式与两个关键视觉参数？
鹰眼图 zoomLevelOffset 的意义？
热力图与分级统计图的区别？
插件评估三问？

参考答案

替代 L.layerGroup()；addLayer/清除等 API 兼容，可直接进 Layers 控件。
[[lat, lng, weight]…]；radius 影响半径与 blur 模糊度决定视觉"胖软"。
鹰眼显示比主图粗略（更小级别）的底图，offset 即级差。
热力=点密度连续渲染；分级统计=按区域属性填色（choropleth）。
维护状态/体积依赖/自写成本。

八、下一步

插件武装完毕，阶段一（01~08）收官 🎉 → 第 09 节：类体系全景（阶段二：源码与原理）。

TAGSweb leaflet