Question

在Leaflet choropleth中指定颜色，您可以使用此功能。 http://leafletjs.com/examples/choropleth.html

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';
 }

有没有一种方法可以提供最小值和最大值，让颜色定义自己？

我有几个尺度，并且不可能为每个尺度定义离散尺度。

有关使用Chroma.JS https://github.com/gka/chroma.js的任何建议吗？

Answer 1

有关使用Chroma.JS https://github.com/gka/chroma.js的建议吗？

是的，你会使用chroma.js。 usage documentation for chroma包含定义和使用色标的示例。

示例是：

chroma.scale(['lightyellow', 'navy']).domain([1, 100000], 7, 'log');

您的代码是

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';
 }

所以你的思维过程是“比例范围从1到100000并且将颜色从浅黄色变为海军。我的代码做了什么？你看看你的代码，看到它的范围从0到0到FFEDA0到800026 1000（或1000以上）。

所以你要替换数字和颜色：

chroma.scale(['#FFEDA0', '#800026']).domain([0, 1000]);

然后使用它：添加var getColor =，以便将此比例保存为比例功能。

Answer 2

我有同样的问题，虽然其他答案也给出了一些提示，但我仍然需要做一些挖掘才能使它起作用。

具有相同的Leaflet 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';
 }

使用Chroma.js变为：

function getColor(d) {
    var mapScale = chroma.scale(['#FFEDA0', '#800026'])
      .classes([0,10,20,50,100,200,500,1000]);
    return mapScale(d)
}

使用此getColor函数的传单图例也会填充与地图相同的颜色。请注意，对于5个classes值，这将仅返回4种颜色。参见docn Andrew Halpern

Answer 3

这是我的工作解决方案：

function getColor(d, min = 0, max = 100, startColor = '#ffeda0', endColor = '#800026') {
    const scale = chroma.scale([startColor, endColor]).domain([min, max]);
    return scale(d).hex();
}

console.log(getColor(0));
console.log(getColor(50));
console.log(getColor(100));

<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.1.0/chroma.min.js"></script>

变量名称非常相关：min 和 max 是刻度的末端，而 startColor 和 endColor 是相应的颜色。

传单中的等值线连续颜色

3 个答案: