如何使用Leaflet创建线性渐变图例

<div id="map"></div>

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
    maxZoom: 18,
}).addTo(map);

var legend = L.control({ position: 'bottomright' });

legend.onAdd = function (map) {
    var div = L.DomUtil.create('div', 'legend');
    var grades = [0, 10, 20, 30, 40, 50];
    var labels = [];

    // 循环创建渐变图例的标签和颜色
    for (var i = 0; i < grades.length; i++) {
        div.innerHTML +=
            '<i style="background:' + getColor(grades[i] + 1) + '"></i> ' +
            grades[i] + (grades[i + 1] ? '&ndash;' + grades[i + 1] + '<br>' : '+');
    }

    return div;
};

legend.addTo(map);

.legend {
    background-color: #fff;
    color: #000;
    padding: 6px 8px;
    font-size: 14px;
    line-height: 18px;
    border-radius: 4px;
}