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

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

本文关键字：填充 颜色 参数 3根 OpenLayers      更新时间：2023-09-26

我正在用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 ...
    }

我可以创建一个为键值循环并返回颜色值的多维数组吗？

我很感激能提供比我目前更好的解决方案，因为我的开关声明已经变得庞大，高达81个温度值（从-30度到50度）。

我会创建一个对象，比如：

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

访问：

// just supposing here
var tempVal = feature.get('tempertaure_value');
var color = colors[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

相关文章：