引言

Snake8859 2/3/2023

# 介绍

Leaflet (opens new window)是一个针对移动端交互地图的开源JavaScript库，它仅有42kb大小，具备了大多数地图应用所需的基本功能实现。

Leaflet秉承简单性、性能和实用性的设计理念。在许多桌面和移动平台上都能高效工作，同时具备横向拓展的能力，能够自定义插件 (opens new window)来增强功能需求。

Leaflet提供详细的API文档 (opens new window)和可阅读的源码 (opens new window)供开发者使用和调试。

# 快速入门（Hello World）

# CDN引入

首先我们需要在HTML文件内引入Leaflet的CSS和JS。

CSS

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
     integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
     crossorigin=""/>

1
2
3

 <!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
     integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
     crossorigin=""></script>

1
2
3
4

然后再创建一个id为map的div，并设置其样式。

 <div id="map"></div>

#map { height: 180px; }

完成以上准备工作后，就可以初始化我们的地图应用，并将其视图设置为我们选择的地理坐标和缩放级别。。

var map = L.map('map').setView([51.505, -0.09], 13);

默认情况下（因为我们在创建地图实例时没有传递任何选项），地图上所有的鼠标和触摸互动都是启用的，而且它有缩放和归属控制。

接下来我们创建一个底图图层，这里我们使用OSM提供的图层，使用Leaflet提供的API进行加载。

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);

1
2
3
4

这样，我们就成功的加载了一个地图。

完整代码如下

<!DOCTYPE html>
<html>
    <head>
         <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
            integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
            crossorigin=""/>
         <!-- Make sure you put this AFTER Leaflet's CSS -->
        <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
            integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
            crossorigin=""></script>
        <style>
            body{
                margin: 0;
                padding: 0;
                height: 100vh;
                width: 100%;
            }
            #map{
                height: 100vh;
                width: 100%;
                /* background-color: red; */
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
    </body>
    <script>
        // init map
        var map = L.map('map').setView([51.505, -0.09], 13);
        // add base map
        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);
    </script>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

# npm引入

参考：https://www.cnblogs.com/jiujiubashiyi/p/16618370.html