LeafLet实战-扩展工具栏指南

        熟悉LeafLet的都知道，LeafLet自带的工具条只有两个按钮，一个放大和缩小。日常业务中，会用到许多的实用工具，比如测距，量测，如何扩展默认的工具条呢？

 

        解决方案如下两种:

        第一、自己基于dom创建页面元素，并挂载在其默认的工具栏中。

        第二、基于Leaflet.EasyButton进行扩展。

        其实，围绕着LeafLet，有许多实用的插件，比如工具栏扩展组件，大家可以针对自己的业务进行选取使用。本文将介绍如何基于Leaflet.EasyButton进行扩展。

        第一步：在github上下载相关资源，插件地址：https://github.com/CliffCloud/Leaflet.EasyButton。

        第二步、引入easyButton相关资源

<link rel="stylesheet" href="/2d/css/font-awesome.min.css" />
<script src="/2d/Leaflet.EasyButton/src/easy-button.css"></script>
<script src="/2d/leaflet/leaflet.js?v=1.0.0"></script>
<script src="/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的工具条，希望可以帮到你。