html - 如何在传单中制作水平图例？

Question

我想做一个像这样的水平图例：https ://ovrdc.github.io/gis-tutorials/leaflet/06-choropleth/#7/41.418/-82.013

我不想要所有的东西，只想要传说和颜色。我不知道如何将页面上的代码集成到我的实际代码中：

function getColor(d) {
         return d > 0.7    ? '#b2182b' :
            d > 0.5    ? '#d6604d' :
            d > 0.3    ? '#f4a582' :
            d > 0.1    ? '#fddbc7' :
            d > -0.1   ? '#f7f7f7' :
            d > -0.3   ? '#d1e5f0' :
            d > -0.5   ? '#92c5de' :
            d > -0.7   ? '#4393c3' :

                        '#2166ac';
}

function style(feature) {
    return {
        weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.65,
        fillColor: getColor(feature.properties.differentiel)
    };
}

function highlightFeature(e) {
    var layer = e.target;

    layer.setStyle({
        weight: 5,
        color: '#666',
        dashArray: '',
        fillOpacity: 0.65
    });

    if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
        layer.bringToFront();
    }

    info.update(layer.feature.properties);
}

var geojson;

function resetHighlight(e) {
    geojson.resetStyle(e.target);
    info.update();
}

function zoomToFeature(e) {
    map.fitBounds(e.target.getBounds());
}

function onEachFeature(feature, layer) {
    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
        click: zoomToFeature
    });
}

geojson = L.geoJson(statesData, {
    style: style,
    onEachFeature: onEachFeature
}).addTo(map);

map.attributionControl.addAttribution('later');


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

legend.onAdd = function (map) {

    var div = L.DomUtil.create('div', 'info legend'),
        grades = [-0.7, -0.5, -0.3, -0.1, 0.1, 0.3, 0.5, 0.7],
        labels = ['test'],
        from, to;

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

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

    div.innerHTML = labels.join('<br>');
    return div;
};

legend.addTo(map);

我尝试替换大部分代码，但没有成功。我怎样才能用我的数据得到那个漂亮而干净的图例？谢谢

标签： htmlleafletchoropleth