将颜色（Leaflet CircleMarker）分配给值范围答案

【问题标题】：Assign color (of Leaflet CircleMarker) to range of values将颜色（Leaflet CircleMarker）分配给值范围
【发布时间】：2016-09-18 08:55:58
【问题描述】：

我制作了一张传单地图，显示带有弹出窗口的 CircleMarkers。他们的颜色取决于他们所代表的房子是什么时候建造的。（对不起，我的英语很糟糕）。这是我的 jsfiddle 的链接：https://jsfiddle.net/marielouisejournocode/p2pL3r49/2/ 可以看到，我设置颜色如下

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

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

【问题讨论】：

标签： javascript leaflet

【解决方案1】：

您可以编写一个函数来执行此操作：

function getRange(start, end) {
  var range = [];

  for (var i = start; i < end; i++) {
    range.push(i);
  }

  return range;
}

var years = getRange(1950, 1961); // [1950,..., 1960]

如果您愿意使用像lodash 这样的实用程序库，您可以在一行中完成：

var years = _.range(1950, 1961); // [1950,...,1960]

对于颜色，有很多插值方法。有个好答案here

【讨论】：

【解决方案2】：

如果我理解正确，您想要的结果是根据您的要素（房屋）的年份属性为您的圆形标记分配给定的颜色，但为简单起见，一系列年份可能会收到相同的颜色（因此您只需要几种颜色，而不是每年一种）。

在这种情况下，您可以通过多种方式检查年份并确定合适的颜色。 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/

【讨论】：