Leaflet02各種圖層圖例

 

 

 

將你聲明的兩個變量放入baseLayers中，並加入相應名字。多個以此類推

調用L.control.layers(baseLayers).addTo(map);地圖右上角會出現這個圖標

點擊出現如下，對應剛剛自己起的名字。點擊單選按鈕地圖切換到相應地圖

 

點擊出現

 

上回的地圖初始化中屬性

 

 

以上兩個屬性如果為true，在地圖左上角和右下角會出現這兩個圖標，改為fale，可以去掉。

 

使用以下代碼對應修改：

L.control.zoom({zoomInText:'放',zoomInTitle:"放大2",zoomOutText:"縮",zoomOutTitle:"縮小2"}).addTo(map);

zoomInTitle是鼠標懸停時顯示

L.control.attribution({prefix:'<a src="https://www.baidu.com/">cbb</a>',position:'bottomright'}).addTo(map);點擊跳轉到對應網站。

prefix跟html字符串。position:設置顯示位置。

添加自定義圖例

一、基本模板

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

L.control.legend = function (opts) {
    return new L.Control.Legend(opts);
}

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

 

 源碼：

<style>
    .info.legend{
        background-color: white;
        padding: 5px;
    }
    .info.legend .color{
        display: inline-block;
        width: 10px;height: 10px;
    }
</style>

<script>
    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(
                    '<div class="color" style="font-weight:bold;">this._getColor(from + 1) + '"></div><i ></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);
</script>