Leaflet 入门教程（三）：底图加载（18种）

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；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中加载底图是创建地图应用的第一步，底图可以是在线的瓦片服务、本地的瓦片集或者是其他地图服务提供的图层。以下是加载底图的几种常见方法.

一、加载图片作为底图

将经度和纬度直接映射到 x 和 y 的简单 CRS。 可用于平面地图（例如游戏地图）。 请注意，y 轴仍应反转（从下到上）。
示例参考：https://blog.csdn.net/cuclife/article/details/127900987

二、在线地图加载示例

1. vue+leaflet：加载OpenStreetMap地图
2. vue+leaflet：加载天地图，多种形式自由切换
3. vue+leaflet：加载google地图（多种形式）
4. vue+leaflet：加载高德地图（多种形式）
5. vue+leaflet：加载腾讯地图，3种形式
6. vue+leaflet：加载百度地图，2种形式切换
7. vue+leaflet：加载Geoq智图，4种形式切换
8. vue+leaflet：加载Jawg地图（6种形式）
9. vue+leaflet：加载Esri地图（多种形式）
10. vue+leaflet：加载here地图（v2软件多种形式）
11. vue+leaflet：加载here地图（v3软件多种形式）
12. vue+leaflet：加载tomtom地图（多种形式）
13. vue+leaflet：加载MapTilesAPI地图（多种版本形式）
14. vue+leaflet：加载Thunderforest地图（多种形式）
15. vue+leaflet：加载OpenTopoMap地图
16. vue+leaflet：加载Stadia地图（多种形式）
17. vue+leaflet：自定义添加地图网格线

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

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