Leaflet Legend 需要为没有数据提取值

Question

我尝试替换图例 javascript 中的许多字符串，以使第一个颜色字段的颜色与数据的 no 值相同。我假设我需要在第一条规则中添加一个例外，但我无法弄清楚。我从 choropleth 地图的传单教程开始，已经走到了这一步。这是我需要让地图完全发挥作用的最后一块真正的东西。基本上希望没有数据值，没有着色或突出显示的国家，以及图例中的第一个字段像地图显示的那样是灰色的，而不是如图所示的绿色第二个值。

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

                legend.onAdd = function (map) {

                    var div = L.DomUtil.create('div', 'info legend'),
                        grades = [0, 0.00001, 0.7300001, 2.9900001, 6.700001],
                        labels = [],
                        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 ? '&ndash;' + to : '&ndash;43.89303638'));
                    } //changed '1' to get right colors on the legend but first field is still second green, not sure why??

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

                legend.addTo(map);

这是按值填充国家颜色的部分，现在设置的功能正常。

function getColor(d) {
                 return d > 6.700001     ? '#D7191C' :
                        d > 2.9900001    ? '#FDAE61' :
                        d > 0.7300001    ? '#A6D96A' :
                        d > 0.00001      ? '#1A9641' :

                                           '#E9E9E9';
                }

                function style(feature) {
                    return {
                        weight: 2,
                        opacity: 1,
                        color: 'white',
                        dashArray: '3',
                        fillOpacity: 0.7,
                        fillColor: getColor(feature.properties.UNdata_CO2_20151106_191526521_Value)//changed value from value above in blue
                    };
                }

这是my webpage的链接！

我添加了一条关于我上次更改的注释，在此之前它显示两个灰色字段，然后是深绿色、浅绿色和橙色，最高值不显示红色...

Answer 1

legend.onAdd 函数中的for 循环自动从grades 数组生成颜色和标签，但您可以简单地在循环之前或之后添加您自己的另一个标签。假设 #E9E9E9 是您未定义的颜色，它会是这样的：

labels.push('<i style="background: #E9E9E9"></i> ' + 'undefined');

如果要在图例顶部添加未定义字段，请将其放在循环之前，或者如果要将其添加到末尾，则将其放在循环之后。这是一个示例小提琴，展示了此方法与一些随机圆形标记一起使用：

http://fiddle.jshell.net/4aqfdz1d/