OpenLayers 3根據特徵參數值改變點填充顏色？

我正在用geojson填充我的地圖，並且我所有的點都有一個具有特定數值的特徵參數。這是一張溫度值的地圖。OpenLayers 3根據特徵參數值改變點填充顏色？

根據這些值，每個這些點都需要不同的填充顏色。

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

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度）。

來源

2015-12-08 Nicolas T

想要特定顏色還是隨機顏色？ –

特定顏色。理想情況下，我可以使這個數組更加靈活，以便在使用自定義顏色的情況下實現新的地圖圖層過濾器（rainffall rate points）時，可以更改這些值。 –

我想創建一個對象，如：

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

要訪問：

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

來源

2015-12-08 11:34:18

我如何訪問它？我不檢索任何數據 –

var color = colors [tempVal];'！我正在使用你的問題的'功能'參考。 –

'return'從什麼？你沒有顯示足夠的代碼。嘗試安慰一些信息：'console.log（tempVal）'; '的console.log（顏色[tempVal]）'; –

你可以使用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

來源

2015-12-08 11:37:09 iH8

謝謝！我會看看這個 –

OpenLayers 3根據特徵參數值改變點填充顏色？

回答

相關問題