leaflets地图插件

leaflets官方文档里面虽然也有插件的说明，但是客户的需求总是变化无常的，对于一些官方文档上面没有的插件，必须我们自己进行开发。我先前写过leaflets全屏和leaflets的一些说明。
1.输入框查询，悬浮在地图上，进行查询定位地图上的点

第一步：引入

第二步：在页面上进行引用

var searchboxControl=createSearchboxControl();
    var control = new searchboxControl({
        sidebarTitleText: 'Header',  
    });
    control._searchfunctionCallBack = function (searchkeywords)
    { //searchkeywords是用户输入的数据
        if (!searchkeywords) {searchkeywords = "The search call back is clicked !!"}
        //这里进行接口的连接，查询设备
        _this.axios.get(``,{
          params:{}
        })
        .then(function (response) {
         //返回设备的经纬度，设置定位图标
         const myIcon = L.icon({
          iconUrl: '../components/zhizhen.png',
          iconSize: [32, 32]
       });
       //根据接口返回的经纬度定位到具体的某个设备
      map.setView([response.data.list[0].lat, response.data.list[0].lng], 15);//这里是地图跳转
      L.marker([response.data.list[0].lat, response.data.list[0].lng],{icon: myIcon}).addTo(map)//这里是设置定位的图标
        })
        .catch(function (error) {
            layer.msg('查询不到!');
        });
        return false;
    }
    map.addControl(control);//把控件添加到地图中

git文件地址：

https://github.com/vivty/leaflets_search.git

2. 跑马灯，悬浮在地图上，进行数据的展示

第一步如上面一样：引入：

 <script src="../components/horseRaceLamp.js"></script>
 <link rel="stylesheet" href="../components/raceLamp.css">

第二步：
//地图搜索框和实现的功能

var raceLampControl = createRaceLampControl();
var RaceLampControl = new raceLampControl({
    raceItems: itemsData//itemsData为跑马灯上面显示的数据
});

第三步：
map.addControl(RaceLampControl);//把控件添加到地图中

github地址：

https://github.com/vivty/leaflets_horseRaceLamp.git