OpenLayers 3是否根據要素參數值更改點填充顏色？

Question

我正在用geojson填充地圖，所有點都有一個具有特定數值的特征參數。 這是帶有溫度值的地圖。

每個點都需要根據值使用不同的填充顏色。

我在這里尋找改善代碼的方法。 返回值將創建每個點的填充顏色：

 var tempVal = feature.get('tempertaure_value');
 var tempNum = Number(tempVal.toFixed());

switch (true) {
    case tempNum == -30:
        return '#0e0e15';
        break;
    case tempNum == -29:
        return '#0d131f';
        break;
    case tempNum == -28:
        return '#0e1226';
        break;
     ... etc ...
    }

是否可以創建一個多維數組，該多維數組為鍵值循環並返回顏色值？

我希望能為我目前提供的更好的解決方案提供幫助，因為我的switch語句變得龐大，可以達到81個溫度值（從-30到50度）。

Answer 1

我會創建一個像這樣的對象：

var colors = {
  '-30': '#0e0e15',
  '-29': '...',
  '-28': '...'
};

要訪問：

// just supposing here
var tempVal = feature.get('tempertaure_value');
var color = colors[tempVal];

Answer 2

您可以使用Chroma.js 。 您將所需的顏色傳遞給range方法，並將它們各自的值傳遞給domain方法：

var scale = chroma.scale(['blue', 'yellow', 'red']).domain([-30, 10 , 50]);

它返回一種方法，您可以使用該方法根據您作為參數傳遞的值來返回顏色：

scale(-30).hex(); // returns hex code for blue
scale(10).hex();  // returns hex code for yellow
scale(30).hex();  // returns hex code for orange
scale(50).hex();  // returns hex code for red

這是關於Plunker的示例： http ://plnkr.co/edit/k5HPfi?p=preview