熟悉LeafLet的都知道，LeafLet自带的工具条只有两个按钮，一个放大和缩小。日常业务中，会用到许多的实用工具，比如测距，量测，如何扩展默认的工具条呢？
解决方案如下两种:
第一、自己基于dom创建页面元素，并挂载在其默认的工具栏中。
第二、基于Leaflet.EasyButton进行扩展。
其实，围绕着LeafLet，有许多实用的插件，比如工具栏扩展组件，大家可以针对自己的业务进行选取使用。本文将介绍如何基于Leaflet.EasyButton进行扩展。
第一步：在github上下载相关资源，插件地址：https://github.com/CliffCloud/Leaflet.EasyButton。
第二步、引入easyButton相关资源
<linkrel="stylesheet"href="/2d/css/font-awesome.min.css"/><scriptsrc="/2d/Leaflet.EasyButton/src/easy-button.css"></script><scriptsrc="/2d/leaflet/leaflet.js?v=1.0.0"></script><scriptsrc="/2d/Leaflet.EasyButton/src/easy-button.js"></script>
第三步、定义button对象
L.easyButton("<span class='fa fa-globe ' style='font-size:18px;height:30px;line-height:30px;'></span>", function(btn, map){ helloPopup.setLatLng(map.getCenter()).openOn(map); }).addTo(mymap); L.easyButton("<span class='fa fa-star ' style='font-size:18px;height:30px;line-height:30px;'></span>", function(btn, map){ //helloPopup.setLatLng(map.getCenter()).openOn(map);layer.msg("我被点击了",{icon: 1}); }).addTo(mymap);
第四步、效果演示
通过本文可以掌握如何基于easyButton来扩展LeafLet的工具条，希望可以帮到你。
