[英]OpenLayers 3 change point fill color depending on feature parameter value?
I'm populating my map with geojson and all my points have a feature parameter with a specific numeric value. 我正在用geojson填充地图,所有点都有一个具有特定数值的特征参数。 It's a map with temperature values.
这是带有温度值的地图。
Each of this points will need a different fill color depending on the value. 每个点都需要根据值使用不同的填充颜色。
I'm looking for ways to improve my code here. 我在这里寻找改善代码的方法。 The return value will create the fill color of each point:
返回值将创建每个点的填充颜色:
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 ...
}
Can I create a multidimensional array that loops for a key value and returns the color value? 是否可以创建一个多维数组,该多维数组为键值循环并返回颜色值?
I would appreciate help for a better solution that what I currently have because my switch statement has become massive, up to 81 temperature values (from -30 to 50 degrees). 我希望能为我目前提供的更好的解决方案提供帮助,因为我的switch语句变得庞大,可以达到81个温度值(从-30到50度)。
I would create an object like: 我会创建一个像这样的对象:
var colors = {
'-30': '#0e0e15',
'-29': '...',
'-28': '...'
};
To access: 要访问:
// just supposing here
var tempVal = feature.get('tempertaure_value');
var color = colors[tempVal];
You could use Chroma.js . 您可以使用Chroma.js 。 You pass the needed colors into the
range
method and their respective values to the domain
method: 您将所需的颜色传递给
range
方法,并将它们各自的值传递给domain
方法:
var scale = chroma.scale(['blue', 'yellow', 'red']).domain([-30, 10 , 50]);
It returns a method you can use to return a color based on the value you pass as the parameter: 它返回一种方法,您可以使用该方法根据您作为参数传递的值来返回颜色:
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
Here's an example on Plunker: http://plnkr.co/edit/k5HPfi?p=preview 这是关于Plunker的示例: http ://plnkr.co/edit/k5HPfi?p=preview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.