[英]OpenLayers 3 change point fill color depending on feature parameter value?
我正在用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度)。
我会创建一个像这样的对象:
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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.