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

作者：Cpp五条 | 2024-03-14 13:52:37

踩

leaflet中文文档

系列文章目录

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>

最终显示效果

总结

此章为leaflet学习的第一章，简单讲述了leaflet框架的概念及实现了地图初始化的功能。希望这对正在学习的你会有帮助。如果你还有在leaflet应用中相关的问题，也可以在文章底部留言或在站内私信我~谢谢你的阅读。

在第二章中，我们将进一步深入学习leaflet的标记以及弹窗功能。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/234951