Leaflet学习笔记（一）

 

一.简介

Leaflet是一个主要适用于移动端交互地图的领先的开源javascript库。虽然js库只有38KB左右，但是却能满足大部分开发者的所有功能需求。

Leaflet拥有着简单，高效和实用的设计思想。它可以在所有主要的桌面和移动端平台上高效的运转，可以扩展插件，它有一个漂亮的、易用的和文档清晰的API，还有一个简单、易读的源代码。

 

二.入门实例展示

 

该图展示了我们选择的地图图层（tiles），以及初始化了基本的标记和弹窗。

 

三.快速开始

1.准备一个空白的html界面。

在head引入css样式文件。

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>

引入js文件，确保js文件在css文件之后引入。

<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>

 

2.创建一个div元素并声明id，此时必须有一个明确的宽度，否则默认为0.

<div id="mapid" style="width:600px;height:400px;"></div>

 

3.设置地图

一个用漂亮的Mapbox Streets的地图图块创建的伦敦中心的地图，首先需要初始化地图，并且设置视图用选择的地理坐标和缩放级别。

var mymap = L.map('mapid').setView([51.505, -0.09], 13); //（地理坐标，缩放等级）

 

默认情况下，地图上所有的鼠标和触摸的交互控件都是激活的。

注意：setView方法可以一个地图对象，并且大部分的Leaflet方法在不返回明确的数值是都是返回一个对象。

在地图上添加一个图层，此时是一个Mapbox Streets的图层。创建一个图层通常需要涉及到为图层设置URL模板，图层的属性文本和缩放的最大级别。在当前例子下，运用Mapbox中的经典地图的 mapbox.streets 图块（为了从Mapbox中运用图块，必须请求token）。

//titleLayer是指基础图层的元素
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        maxZoom: 18, //最大放大倍数
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
            '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        id: 'mapbox.streets', //地图类型，不强制选择图层的提供方，可替换mapbox.satellite等
    }).addTo(mymap);

 

4.添加其他元素（标记marker、圆圈circle和多边形polygon等）

除了添加图层之外，例子上还有标记、圆圈和多边形。

例如，创建一个标记：

var marker = L.marker([51.5, -0.09]).addTo(mymap); //初始化添加一个标记

 

或者添加一个圆圈：

var circle = L.circle([51.5, -0.05], { 
　　color: 'red', 
　　fillColor: '#f03', 
　　fillOpacity: 0.5, 
　　radius: 500 
}).addTo(mymap); //初始化一个边框red，内部背景颜色#f03，透明度0.5，半径为500的圆圈范围

 

或者添加一个多边形：

var polygon = L.polygon([ [51.509, -0.08], [51.503, -0.06], [51.51, -0.047]]).addTo(mymap);  //初始化一个多边形,自定义样式如circle

 

也可以显示一些弹窗提示：

marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup(); //openPopup()初始化界面时触发
circle.bindPopup("I am a circle."); //点击触发
polygon.bindPopup("I am a polygon.");

或者初始化显示弹窗是可以这么写：

//这里我们使用openOn而不是addTo是因为当开启一个新的气泡点时将自动关闭上一个打开的气泡点,这样提高了使用性
var popup = L.popup() .setLatLng([51.5, -0.09]) .setContent("I am a standalone popup.") .openOn(mymap);

 

5.简单的触发事件

该方法展示了点击可触发一个弹窗，并显示该点的坐标。

var popup = L.popup(); //声明（初始化）一个弹窗
    function onMapClick(e) { 
        console.log(e.latlng) 
        popup .setLatLng(e.latlng) .setContent("You clicked the map at " + e.latlng.toString()) .openOn(mymap); //点击时通过e.latlng显示该点坐标
    } 
    mymap.on('click', onMapClick); //点击时触发onMapClick事件

 

以上就是简单的Leaflet地图显示案例的基本属性使用以及说明。