【WebGIS】leaflet入门-介绍及快速开始

最新推荐文章于 2023-12-13 23:28:06 发布

一个纸人

最新推荐文章于 2023-12-13 23:28:06 发布

阅读量326

点赞数

分类专栏： WebGIS 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/paperperson/article/details/130409056

版权

WebGIS 专栏收录该内容

7 篇文章 3 订阅

订阅专栏

介绍

leaflet是一个开源的JavaScript地图库，十分的轻量级，官网介绍leaflet的包的大小不超过50kb，但是具有很好的兼容性和拓展性，拥有很多功能强大的插件，是一个非常好用的轻量级地图库
官网地址：leaflet

快速开始

这里使用一个官方的原生例子来作为快速入门的使用

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

L.tilelayer('https://tile.openstreesmap.org/{z}/{x}/{y}.png',{
	attribution:'&copy; <a href="http://www/openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.marker([51.5,-0.09]).addTo(map)
	.bindPopup('A pretty CSS3 popup .<br>  Easily customizable .')
	.openPopup();

注意哦，本文默认了你已经掌握了前端开发的基础知识，至少知道怎么引用在线的js包或者下载包到本地，并且导入到你的项目中去。
你肯定看出来了，上述的代码只是JavaScript的部分内容，那么在html结构里应该怎么写呢？其实很简单，只要创建一个div并将他的id定义为map就可以了

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

现在我们讲一下官方快速入门demo的几行代码

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

这里使用L(也就是leaflet导入的一个主要模块)的map创建了一个map对象，将其绑定到id为map的div上，然后设置map的显示的地点为[51.505,-0.09]（是在欧洲一带），定义缩放级别为13（后面会讲）


L.tilelayer('https://tile.openstreesmap.org/{z}/{x}/{y}.png',{
	attribution:'&copy; <a href="http://www/openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

这里定义了一个tileLayer，也就是切片地图。向其中传入了两个参数，分别是切片地图的地址，以及options（选项），在本例中options包含了一个attribution，这是定义了一个logo信息，会显示openstreet的logo和链接，不想要可以去掉。最后使用addTo(map)将该切片图层添加到上面创建好的map对象中。

L.marker([51.5,-0.09]).addTo(map)
	.bindPopup('A pretty CSS3 popup .<br>  Easily customizable .')
	.openPopup();

这里主要是创建了一个Marker（也就是标记），位置是在[51.5,-0.09]，并且为该marker绑定了一个popup（弹出框）

效果展示

最后贴出一段完整代码和效果截图

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
        integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
        integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
    <title>quickStart</title>
</head>

<body>
    <div id="map" style="height: 600px;"></div>
    <script>
        var map = L.map('map').setView([51.505, -0.09], 13)

        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attrubution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map)

        L.marker([51.5, -0.09]).addTo(map)
            .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
            .openPopup();

    </script>
</body>

</html>

在这里插入图片描述