Leaflet 入门教程（六）：Controls篇（ 约10种控件）

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

No.	大剑师精品GIS教程推荐
0	地图渲染基础- 【WebGL 教程】 - 【Canvas 教程】 - 【SVG 教程】
1	Openlayers 【入门教程】 - 【源代码+示例 300+】
2	Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3	MapboxGL【入门教程】 - 【源代码+图文示例150+】
4	Cesium 【入门教程】 - 【源代码+综合教程 200+】
5	threejs【中文API】 - 【源代码+图文示例200+】
6	Shader 编程 【图文示例 100+】
7	Geoserver 【配置教程 100+】
8	卫星应用开发教程 【配置+应用教程 100+】
9	GIS数字孪生与大模型 【应用实战 100+】
10	报表与数字大屏 【Echarts 实战示例】 - 【D3 综合教程】 - 【其他大屏】

---

Leaflet的Controls（控件）是用户界面元素，它们提供了与地图交互的方式，比如缩放、切换图层、显示比例尺等。这些控件可以轻松地添加到地图上，增强用户体验。

一、控件分类

1. 缩放控制 (Zoom Control)

缩放控制允许用户放大或缩小地图视图。

L.map(‘map’).addControl(L.control.zoom());

具体示例：https://dajianshi.blog.csdn.net/article/details/127851588

2，比例尺控制 (Scale Control)

比例尺控件显示地图的比例尺，帮助用户理解地图上的距离。

L.control.scale().addTo(map);

具体示例：添加比例尺（ 两种方法）

3，缩放滑块 zoomslider

具体示例：https://dajianshi.blog.csdn.net/article/details/129059361

4，鹰眼图

https://dajianshi.blog.csdn.net/article/details/127974749

5， 全屏

https://dajianshi.blog.csdn.net/article/details/129337087

6，多功能集成（位置、搜索、切换地图、全屏、鹰眼等）

https://dajianshi.blog.csdn.net/article/details/129769713

五、Leaflet 入门教程 -系列文章列表

• Leaflet 入门教程（一）：应该如何学习Leaflet
• Leaflet 入门教程（二）：Map 篇
• Leaflet 入门教程（三）：底图加载
• Leaflet 入门教程（四）：文件加载
• Leaflet 入门教程（五）：文件上传导出
• Leaflet 入门教程（六）：Controls篇
• Leaflet 入门教程（七）：markers 篇
• Leaflet 入门教程（八）：交互事件篇
• Leaflet 入门教程（九）：弹窗
• Leaflet 入门教程（十）：手绘图形
• Leaflet 入门教程（十一）：显示图形
• Leaflet 入门教程（十二）：定位与轨迹
• Leaflet 入门教程（十三）：动画
• Leaflet 入门教程（十四）：数据转换