leaflet创建简单地图

Posted 2020-08-21 ninic

一、leaflet介绍：

1.Leaflet 是一个为建设移动设备友好的互动地图，而开发的现代的、开源的 javascript 库。它是由 Vladimir Agafonkin 带领一个专业贡献者团队开发，虽然代码仅有 33 KB，但它具有开发人员开发在线地图的大部分功能。

2.Leaflet设计坚持简便、高性能和可用性好的思想，在所有主要桌面和移动平台能高效运作，在现代浏览器上会利用html5和CSS3的优势，同时也支持旧的浏览器访问。支持插件扩展，有一个友好、易于使用的API文档和一个简单的、可读的源代码。

官网：http://leafletjs.com/

二、快速入门

1.在html页面头部加入CSS file 和JavaScript file

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

 

2.在body里面定义一个层

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

3.加入js代码来实现地图的显示

 1 <script type="text/javascript">
 2             var mymap = L.map(‘mapid‘).setView([35.5,104.6],9);
 3             L.tileLayer(‘http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png‘, {
 4                 attribution: ‘Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery ? <a href="http://mapbox.com">Mapbox</a>‘,
 5                 maxZoom: 18,
 6             }).addTo(mymap);
 7             var marker = L.marker([35.5,104.6]).addTo(mymap);
 8             var circle = L.circle([35.5,104.8], {
 9                 color: ‘red‘,
10                 fillColor: ‘#f03‘,
11                 fillOpacity: 0.5,
12                 radius: 500
13             }).addTo(mymap);
14             var polygon = L.polygon([
15                 [35.5, 104.3],
16                 [35.5, 104.4],
17                 [35.5, 104.5]
18             ]).addTo(mymap);
19</script>

下面我来一一介绍一下js代码中所用到的几个函数及其里面的参数：

map方法：实例化了<DIV>元素的DOM对象ID的地图和一个可选的对象文字与地图选项。

　　参数：他的第一个参数可以是一个id也可以是一个html元素，后面的可选参数就不在这里做一一介绍了。

setView方法：设置地图的视图（地理中心和缩放）与给定的动画选项。

　　参数：第一个参数是地理位置的纬度和经度。通过这个地理位置的经纬度将会在地图页面打开时显示在页面的中心位置。

　　　　　第二个参数是设置可缩放值。后面的可选参数就不做介绍了。

tileLayer方法：用于在地图上加载和显示瓷砖层

　　参数：第一个参数是一个url：{s}代表可选的子领域，连续的被用来帮助浏览器并行请求每个域的限制。子领域值可在后面的选项中指定。a或b或c，在默认情况下可省略。

　　　　  后面好多可选的参数就不在这里一一指定了。

后面的marker、circle、polygon方法分别是用来在地图上添加标记，圆和多边形的。