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

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

文章目录

• • 一、加载图片作为底图
  • 二、在线地图加载示例
  • 五、Leaflet 入门教程 -系列文章列表

    ---

    在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 入门教程（十四）：数据转换