OpenLayers 3 根据特征参数值改变点填充颜色？

Question

我正在用 geojson 填充我的地图，我所有的点都有一个具有特定数值的特征参数。这是一张带有温度值的地图。

每个点都需要不同的填充颜色，具体取决于值。

我正在寻找改进我的代码的方法。 return 值将创建每个点的填充颜色：

 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 ...
    }

我可以创建一个多维数组来循环获取键值和 return 颜色值吗？

如果我能得到比我目前拥有的更好的解决方案，我将不胜感激，因为我的 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]);

它 return 是一种方法，您可以使用它 return 基于您作为参数传递的值的颜色：

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

OpenLayers 3 根据特征参数值改变点填充颜色？

OpenLayers 3 change point fill color depending on feature parameter value?

javascript

arrays

multidimensional-array

openlayers-3