系列文章目录
Leaflet从入门到放弃(一)——地图初始化
目录
前言
leaflet作为一款前端地图JS库,具备简单、易用、上手快、拓展多、轻量级等优点,一直深受广大开发者的欢迎。
作者接触webgis开发的第一个框架就是leaflet,特开此专栏,分享leaflet开发中遇到的一些问题以及解决方法~
一、leaflet是什么?
Leaflet 是一个开源并且对移动端友好的交互式地图 JavaScript 库。 它大小仅仅只有 42 KB of JS, 并且拥有绝大部分开发者所需要的所有地图特性 。
Leaflet 简单、高效并且易用。 它可以高效的运行在桌面和移动平台, 拥有着大量的 扩展插件、 优秀的文档、简单易用的API 和完善的案例, 以及可读性较好的 源码 。
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: '© <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: "© <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的标记以及弹窗功能。