LeaFlet自定义控件

前言：在控件自定义上，比较简单，我们只需要按照特有的模板进行，简单的填充就行了，在模板中添加适当的方法即可。

一、基本模板

L.Control.XXX= L.Control.extend({
    //在此定义参数    
    options: {
    },
    //在此初始化
    initialize: function (options) {
        L.Util.extend(this.options, options);
    },
    onAdd: function (map) {
       //可在此添加控件内容
    }
});

例如我们可以添加一个位置参数position该参数有四个可选值

1. topleft：地图的左上角
2. topright：地图的右上角
3. bottomleft：地图的左下角
4. bottomright：地图的右下角

二、demo案例

        L.Control.Legend = L.Control.extend({
            options: {
                position: 'topright' //初始位置
               

            },
            initialize: function (options) {
                L.Util.extend(this.options, options);

            },
            onAdd: function (map) {
                //创建一个class为info legend的div
                this._container = L.DomUtil.create('div', 'info legend');
                //创建一个图片要素
               var  grades = [0, 10, 20, 50, 100, 200, 500, 1000],
                    labels = [],
                    from, to;

                for (var i = 0; i < grades.length; i++) {
                    from = grades[i];
                    to = grades[i + 1];

                    labels.push(
                        '<i style="background:' + this._getColor(from + 1) + '"></i> ' +
                        from + (to ? '&ndash;' + to : '+'));
                }

                this._container.innerHTML = labels.join('<br>');              
                return this._container;
            },
            _getColor: function(d) {
                return d > 1000 ? '#800026' :
                    d > 500 ? '#BD0026' :
                        d > 200 ? '#E31A1C' :
                            d > 100 ? '#FC4E2A' :
                                d > 50 ? '#FD8D3C' :
                                    d > 20 ? '#FEB24C' :
                                        d > 10 ? '#FED976' :
                                            '#FFEDA0';
            },
            onRemove: function (map) {
                // Nothing to do here
            }
        });
        L.control.legend = function (opts) {
            return new L.Control.Legend(opts);
        }

        var legend = L.control.legend({ position: 'bottomright' });
        //添加图例
        legend.addTo(map);

三、效果图

上图是添加一个图例，效果看下图

 

一个渐变色图例填充，主要做自定控件的测试。