Leaflet 初始化地图

cover

前言

🤔🤔 Leaflet系列搁置了好久，趁着deadline来临之际，我会在两周内将这个专栏的内容基本更新完毕，并随着项目的精进将更多优质的文章内容提供给本专栏的订阅者；说正事，在本文中，我们将学习如何初始化 Leaflet 地图并在网页中展示它。

一、介绍

在这篇文章中，我们将学习如何使用 Leaflet 初始化地图，主要内容包括：

引入 Leaflet 库
创建地图容器
初始化地图对象
添加地图层

二、内容

1.引入 Leaflet 库

首先，我们需要在网页中引入 Leaflet 库。Leaflet 提供了 CDN 链接，我们可以直接在 HTML 文件中使用。

<!-- 引入 Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>

<!-- 引入 Leaflet JavaScript -->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

如果网络不稳定可以切换下面这个CDN镜像：

<script src="https://lib.baomitu.com/leaflet/1.9.2/leaflet.js"></script>
<link rel="stylesheet" href="https://lib.baomitu.com/leaflet/1.9.2/leaflet.css">

2.创建地图容器

接下来，我们需要在 HTML 中创建一个用于展示地图的容器。这个容器可以是一个普通的 div 元素，需要设置一个唯一的 id 属性以便后续操作。

<div id="map" style="width: 600px; height: 400px;"></div>

如果这样书写不够规范，我们可以在style中补充配置：

<style>
    body{
        margin: 0; 
        padding: 0;
        box-sizing: border-box;
    }
    #map{
        width: 100vw;
        height: 100vh;
        cursor: pointer; /* 避免看不到鼠标 */
    }
</style>

注意：请确保读者容器设置了宽度和高度，否则地图可能无法正常显示。

3. 初始化地图对象

一旦我们有了地图容器，就可以使用 Leaflet 提供的 L.map() 函数初始化地图对象了。我们需要将地图容器的 id 作为参数传入该函数,这里地图容器元素的id就是map。

// 初始化地图对象
var map = L.map('map');

在初始化地图对象时，我们还可以设置地图的中心位置和缩放级别。中心位置使用纬度和经度来表示([纬度,经度])，缩放级别为一个数字，数字越大表示地图越详细。

// 设置地图的中心位置和缩放级别
map.setView([39.9042, 116.4074], 12);

4.添加地图层

地图图层是构成地图的基本元素之一。在 Leaflet 中，我们可以使用 L.tileLayer() 函数来添加地图层。这里我们使用 OpenStreetMap 提供的地图图层。

// 定义OSM图层
osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
})
// 将osm图层添加到地图对象中
osmLayer.addTo(map);

参数中的 {s}、{z}、{x} 和 {y} 将被替换为实际的服务器名称(IP或域名)、缩放级别和瓦片坐标。

5.完整代码

以下是完整的 HTML 和 JavaScript 代码：

<!DOCTYPE html>
<html>

<head>
    <title>Leaflet 初始化地图</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>
    <style>
        body{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        #map{
            width: 100vw;
            height: 100vh;
            cursor: pointer; /* 避免看不到鼠标 */
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        // 基于地图容器初始化地图对象
        var map = L.map('map');
        // 设定地图视点中心和放缩级别
        map.setView([39.9042, 116.4074], 12);
        // 定义OSM图层
        osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
        })
        // 将osm图层添加到地图对象中
        osmLayer.addTo(map);

    </script>
</body>

</html>