Leaflet学习文档-初识

XYL8023

已于 2025-02-26 14:36:22 修改

阅读量1k

点赞数 13

分类专栏： Leaflet 文章标签：学习 javascript

于 2025-02-26 09:30:58 首次发布

本文链接：https://blog.youkuaiyun.com/xiuyu_lj/article/details/145868557

版权

Leaflet 专栏收录该内容

7 篇文章

订阅专栏

初识Leaflet

文章目录

初识Leaflet
前言
一、Leaflet是什么？
二、使用步骤
总结

前言

Leaflet 是一个轻量级、开源的 JavaScript 库，专门用于在网页中创建交互式地图应用。它以简洁的 API 和高度可扩展性著称，适合快速构建 Web GIS（地理信息系统）应用。

一、Leaflet是什么？

1. 轻量高效

仅约 42KB 的压缩代码，加载速度快，适合移动端和性能敏感场景。
无外部依赖，直接通过 HTML script标签或 npm 安装即可使用。

2. 跨平台兼容

支持所有主流浏览器（包括移动端），适配触屏交互（如缩放、拖拽）。

3. 丰富的图层支持

集成多种地图瓦片服务（OpenStreetMap、Mapbox、Google Maps 等）

4. 插件生态

社区提供数百个插件，扩展功能如热力图、聚类标记、地图绘制、3D 效果等（插件代码质量无统一规范）

二、使用步骤

1.引入库

代码如下（示例）：

<!-- 引入 CSS 和 JS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

2. 设置地图容器

代码如下（示例）：

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

提示：地图容器用于放置地图信息的盒子，一般使用div进行设置，其中必须要有id属性，后续需要根据id来进行设置

3. 创建地图

代码如下（示例）

// 初始化地图实例，设置中心坐标和缩放级别
const map = L.map('map').setView([39.90002, 116.46], 10);

// 添加底图瓦片层（以 OpenStreetMap 为例）
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
}).addTo(map);

说明：L.map(地图容器id)初始化对应的地图容器，setView([纬度，经度], 级别)，L.tileLayer添加底图

4. 效果展示

展示地图效果（由于OpenStreetMap的服务在国外，有可能会出现无法加载的情况）
在这里插入图片描述

5. 完整代码

代码如下（示例）

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>初始Leaflet</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div id="map" style="width: 800px; height: 600px;"></div>
  <script>
    // 初始化地图实例，设置中心坐标和缩放级别
    const map = L.map('map').setView([39.90002, 116.46], 10);

    // 添加底图瓦片层（以 OpenStreetMap 为例）
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© OpenStreetMap contributors'
    }).addTo(map);
  </script>
</body>

</html>