Leaflet的资料及技术优势

一、简介

Leaflet是领先的开源JavaScript库，用于移动设备的友好的交互式地图。拥有大约37 KB的JS压缩代码，它提供了大多数GIS开发人员所需要的所有地图功能。

二、资源

leaflet 官网：http://leafletjs.com/index.html

leaflet 示例：http://leafletjs.com/examples.html

leaflet 类参：https://leafletjs.com/reference-1.6.0.html

leaflet 插件：https://leafletjs.com/plugins.html

leaflet 下载：https://leafletjs.com/download.html

leaflet 博客：https://leafletjs.com/blog.html

三、示例代码

var map = L.map(‘map’).setView([51.505, –0.09], 13);

L.tileLayer(‘https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png’, {

attribution: ‘&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();

四、优势劣势

  首先说的一点是leaflet定位是移动设备、为移动设备提供友好的交互式地图，这一点在官方主页就可以看到，定位于PC web端的是Openlayer和MapboxGL。当然，它还是可以开发web应用，并对老旧的浏览器有很好的支持（IE 7–11）

 
 

Leaflet优势

1、体积小，加载快，运行流畅，JS只有37 KB，相比其他地图API小很多；

2、设计简单、性能良好和可用性强，支持HTML5和CSS3，兼容老版本浏览器；；

3、易扩展性，使用extend扩展对象，能够继承属性，拥有大量的优质插件；

4、结构简单，文档清晰，开发人员容易上手，不涉及很深的专业知识；

Leaflet劣势

1、轻量型，说明JS主体功能有限，主体功能仅限于展示信息；

2、易扩展，丰富插件带来管理问题，JS封装方式多样，不易统一管理，对于拥有自己框架的业务团队来说，融合代码会带来很多麻烦；

3、文档简单和丰富的插件，初期学习容易，后面需要熟悉很多插件的文档，学习曲线会上升

4、Dom节点的设计方式会带来性能问题，并不是每个团队都能准确的选择图形的渲染方式，不合适的渲染方式会造成性能问题和显示问题（二选一）；

5、缺乏很强的GIS功能，比较适合弱GIS中小型项目的应用

五、浏览器支持

1、Desktop（桌面端）

lChrome

lFirefox

lSafari 5+

lOpera 12+

lIE 7–11

lEdge

2、Mobile（手机端）

lSafari for iOS 7+

lAndroid browser 2.2+, 3.1+, 4+

lChrome for mobile

lFirefox for mobile

lIE10+ for Win8 devices