Question

我尝试替换图例javascript中的许多字符串，使第一个颜色字段与数据的无值颜色相同。我假设我需要在第一条规则中添加一个例外但我无法弄明白。我开始使用小册子tuturial进行等值线图，并且已经走到了这一步。这是我需要让地图完全正常运行的最后一块真正的东西。基本上想要没有数据值，没有着色或突出显示的国家，以及图例中的第一个字段是灰色的，如地图所示，而不是如图所示的绿色第二个值。

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

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

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

如果要在图例的顶部添加未定义的字段，或者在循环之后添加它，如果要将其添加到结尾，请将其置于循环之前。下面是一个示例小提示，显示此方法与一些随机圆圈标记一起使用：

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

Leaflet Legend需要为无数据提取值

1 个答案: