Leaflet从入门到放弃（一）——地图初始化

最新推荐文章于 2025-11-08 10:29:18 发布

原创最新推荐文章于 2025-11-08 10:29:18 发布 · 3.3k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #交通物流

系列文章目录

Leaflet从入门到放弃（一）——地图初始化

前言

leaflet作为一款前端地图JS库，具备简单、易用、上手快、拓展多、轻量级等优点，一直深受广大开发者的欢迎。

作者接触webgis开发的第一个框架就是leaflet，特开此专栏，分享leaflet开发中遇到的一些问题以及解决方法~

一、leaflet是什么？

Leaflet 是一个开源并且对移动端友好的交互式地图 JavaScript 库。它大小仅仅只有 42 KB of JS, 并且拥有绝大部分开发者所需要的所有地图特性。

Leaflet 简单、高效并且易用。它可以高效的运行在桌面和移动平台, 拥有着大量的扩展插件、优秀的文档、简单易用的API 和完善的案例, 以及可读性较好的源码。

leaflet官方文档

leaflet中文文档（中文翻译版，感谢大佬NICEXAI）

二、使用步骤

1.引入leaflet

1.1通过文件方式引入

从链接中下载压缩包，并在本地全局引入即可

1.2通过npm方式引入

npm install leaflet
以vue项目为例，在index.html文件中引入leaflet的css文件

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" />

并在需要用到leaflet库的组件或js文件中，全模块引入leaflet

 import L from 'leaflet'

1.3在线引入

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

2.加载地图

HTML部分

 //定义一个id为map的div盒子，作为leaflet展示数据的容器
 <div id="map"></div>

JS部分

//获取地图容器,并定义初始地图中心及缩放大小
var map = L.map('map').setView([51.505, -0.09], 13);

//加载瓦片地图
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map); //添加至地图上

源代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>leaflet_DEMO</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
</head>

<body>
    <div id="map"></div>
    <script>
        var map = L.map('map').setView([51.505, -0.09], 13);
        L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
            maxZoom: 19,
            attribution: "&copy; <a href='https://openstreetmap.org'>OpenStreetMap contributors</a>"
        }).addTo(map);
    </script>
</body>

<style>
    html,
    body {
        height: 100%;
        width: 100%;
        margin: 0;
    }

    #map {
        height: 100%;
    }
</style>

</html>