指定顏色（的Leaflet CircleMarker）的值範圍

我做了一張傳單地圖，顯示CircleMarkers與彈出窗口。它們的顏色取決於它們代表的房屋什麼時候建成。（我很抱歉，我的英文很糟糕）。這裏是鏈接到我的jsfiddle：https://jsfiddle.net/marielouisejournocode/p2pL3r49/2/ 正如你所看到的，我設置顏色如下指定顏色（的Leaflet CircleMarker）的值範圍

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

所以JS不是我的「原生」的編程語言。在R中，我可以爲一系列數字指定一個顏色，如c(1950, 1960)這將是1950年到1960年的所有數字，並且分配仍然有效。我不知道如何在js中獲得這個範圍，而且我不知道是否可以爲其中的一系列數字指定顏色。我想要把所有可用的建設年代想象成可視化的（我想從第二次世界大戰結束開始，因爲多特蒙得到了相當的破壞），如果我不必每年一個一個地分配6個左右不同的顏色。

來源

2016-05-21 Marie-Louise Timcke

如果我理解正確，您的預期結果是根據您的功能（房屋）的年份屬性爲您的圓形標記賦予給定的顏色，但一定年限的範圍可能會獲得相同的顏色爲簡單起見（所以你只需要幾個顏色而不是每年一個）。

在這種情況下，您有很多方法檢查年份並確定合適的顏色。一個例子是在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/

來源

2016-05-21 03:05:19 ghybs

您可以編寫一個函數來做到這一點：

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

來源

2016-05-21 00:59:47

指定顏色（的Leaflet CircleMarker）的值範圍

回答

相關問題