leaflet热力图选择显示不同范围值的组件

可以使用 leaflet 的 colorbrewer 库来选择不同范围值的颜色。具体实现可以参考以下示例代码：

// 定义颜色范围和值范围
var colors = colorbrewer.Reds[5];
var ranges = [0, 20, 40, 60, 80, 100];

// 定义热力图数据
var heatMapData = [...];

// 定义热力图图层
var heatMapLayer = L.heatLayer(heatMapData, {
    radius: 25,
    maxZoom: 10,
    gradient: colors
}).addTo(map);

// 添加颜色范围图例
var legend = L.control({position: 'bottomleft'});
legend.onAdd = function (map) {
    var div = L.DomUtil.create('div', 'info legend');
    for (var i = 0; i < ranges.length; i++) {
        div.innerHTML +=
            '<i style="background:' + colors[i] + '"></i> ' +
            ranges[i] + (ranges[i + 1] ? '&ndash;' + ranges[i + 1] + '<br>' : '+');
    }
    return div;
};
legend.addTo(map);

以上示例代码实现了一个在 Leaflet 中显示热力图，并根据不同范围值显示不同颜色的组件。在代码中需要先定义颜色范围和值范围，然后在热力图图层上使用 gradient 属性来定义颜色范围，最后添加一个颜色范围图例。