javascript - 将颜色(Leaflet CircleMarker)分配给值范围

Question

我制作了一张传单 map ，显示带有弹出窗口的 CircleMarkers。它们的颜色取决于它们所代表的房屋的 build 时间。 (对不起，我的英语很糟糕)。这是我的 jsfiddle 的链接:https://jsfiddle.net/marielouisejournocode/p2pL3r49/2/ 可以看到，我设置的颜色如下

var colors = {
        1966: 'green',
        1960: 'yellow',
        1952: 'orange',
        1951: 'red'
    };  

所以 js 不是我的“ native ”编程语言。在 R 中，我可以为一系列数字分配颜色，例如 c(1950, 1960) 这将是从 1950 年到 1960 年的所有数字，并且分配仍然有效。我不知道如何在 js 中获得这个范围，我不知道我是否可以为其中的一系列数字分配颜色。我想可视化所有可用的建筑年份(我想从第二次世界大战结束开始，因为多特蒙德被摧毁了)，如果我不必每年都分配 6 种不同的颜色，那就太好了.

Answer 1

如果我理解正确，你想要的结果是根据你的特征(房屋)的年份属性为你的圆形标记分配给定的颜色，但是为了简单起见，一系列年份可能会收到相同的颜色(所以你只需要几种颜色，而不是每年一种)。

在这种情况下，您可以通过多种方式检查年份并确定合适的颜色。一个例子在 Leaflet Chloropleth map tutorial 中。 (参见“添加一些颜色”部分)

function getColor(d) {
  return d >= 1966 ? 'green' : // Means: if (d >= 1966) return 'green' else…
    d >= 1960 ? 'black' : // if (d >= 1960) return 'black' else etc…
    d >= 1952 ? 'red' :
    d >= 1940 ? 'orange' : // Note that numbers must be in descending order
    'grey';
}

// […]

L.circleMarker([place.lon, place.lat], {
  color: getColor(place.constructdate), // you can call the getColor function
  fillColor: getColor(place.constructdate),
  fillOpacity: 0.5
})

更新的 JSFiddle:https://jsfiddle.net/p2pL3r49/3/