传单 - 添加图例标题

Posted 2023-02-16

【中文标题】传单 - 添加图例标题

【英文标题】：leaflet - Adding a legend title

【发布时间】：2014-02-13 23:16:48

【问题描述】：

我是 Leaflet 的新手，目前正在努力学习教程。到目前为止，我设法创建了一个交互式 clorophet 地图，例如 http://leafletjs.com/examples/choropleth.html 示例。

我有一个问题：是否可以在页面右下角的 legged 中添加标题（简单文本，非动态）？谁能告诉我如何，仅参考链接的示例？

非常感谢， G.

【问题讨论】：

愚蠢的问题...我马上就发现...

绝对不是一个愚蠢的问题......如果你能回答你自己的问题，你应该！只需在下面回答您的问题，我们其他人就可以从您的经验中受益。

【参考方案1】：

您只需在“TH​​E TITLE”下添加您的标题...

var legend = L.control(position: 'topleft');  
    legend.onAdd = function (map) 

    var div = L.DomUtil.create('div', 'info legend'),
        grades = [50, 100, 150, 200, 250, 300],
        labels = ['<strong> THE TITLE </strong>'],
        from, to;

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

    labels.push(
        '<i style="background:' + getColor(from + 1) + '"></i> ' +
        from + (to ? '&ndash;' + to : '+'));
        
        div.innerHTML = labels.join('<br>');
        return div;


        ;

【讨论】：

getColor 来自哪里

【参考方案2】：

Francisco Vargas：getColor 是一个定义密度的函数：

function getColor(d) 
        return d > 1000 ? '#800026' :
               d > 500  ? '#BD0026' :
               d > 200  ? '#E31A1C' :
               d > 100  ? '#FC4E2A' :
               d > 50   ? '#FD8D3C' :
               d > 20   ? '#FEB24C' :
               d > 10   ? '#FED976' :
                          '#FFEDA0';