LeafLet实战-扩展工具栏指南

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

 

        解决方案如下两种:

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

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

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

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

        第二步、引入easyButton相关资源

        第三步、定义button对象

L.easyButton("", function(btn, map){
			helloPopup.setLatLng(map.getCenter()).openOn(map);
}).addTo(mymap);
		

L.easyButton("", function(btn, map){
			//helloPopup.setLatLng(map.getCenter()).openOn(map);
			layer.msg("我被点击了",{icon: 1});
}).addTo(mymap);

        第四步、效果演示

        通过本文可以掌握如何基于easyButton来扩展LeafLet的工具条，希望可以帮到你。