OpenLayers 3根据要素参数值更改点填充颜色?

时间:2015-12-08 10:49:57

标签: javascript arrays multidimensional-array openlayers-3

我用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度)。

2 个答案:

答案 0 :(得分:1)

我会创建一个像:

这样的对象
var colors = {
  '-30': '#0e0e15',
  '-29': '...',
  '-28': '...'
};

访问:

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

答案 1 :(得分:1)

您可以使用https://cqrs.wordpress.com/documents/task-based-ui/。您将所需的颜色传递到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的示例:Chroma.js