Question

我制作了一张传单，用Popups显示CircleMarkers。他们根据他们所代表的房屋的建造时间而着色。（对不起，我的英语太可怕了）。这是指向我的jsfiddle的链接：https://jsfiddle.net/marielouisejournocode/p2pL3r49/2/ 如您所见，我将颜色设置如下

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

所以js不是我的＆＃34;本地人＆＃34;编程语言。在R中我可以为一系列数字指定一种颜色，如c(1950, 1960)，它将是1950年至1960年的所有数字，并且任务仍然有效。我不知道如何在js中获得这个范围而且我不知道我是否可以为其中的一系列数字指定颜色。我想要想象所有可用的建筑年份（我想从第二次世界大战的结束开始导致多特蒙德被摧毁了）如果我不必每年一个一个地分配到6个左右就会很棒不同的颜色。

Answer 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

Answer 2

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

在这种情况下，您可以通过多种方式检查年份并确定合适的颜色。一个例子是Leaflet Chloropleth map tutorial（参见＆＃34;添加一些颜色＆＃34;部分）

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/

将Leaflet CircleMarker的颜色指定为值范围

2 个答案: