Leaflet 具有两个极端的RGBA颜色渐变

这既是一个编程问题，也是一个艺术和哲学问题。我正在使用传单创建一个热图层。通常，热图描绘的是一个量的强度

gradient: {
                0.00 :'rgba(0,0,238,1)',
                0.05 :'rgba(255,0,0,0.5)',
                0.10 :'rgba(255,0,0,0.5)',
                0.15: 'rgba(255,0,0,0.2)',
                0.20: 'rgba(255,0,0,0.2)',
                0.25: 'rgba(238,18,137,0.2)',
                0.30: 'rgba(205,0,205,0.2)',
                0.35: 'rgba(178,58,238,0.1)',
                0.40: 'rgba(154,50,205,0.1)',
                0.45: 'rgba(240,255,255,0.1)',
                0.50: 'rgba(240,255,255,0.1)',
                0.55: 'rgba(240,255,255,0.1)',
                0.60: 'rgba(0,255,0,0.1)',
                0.65: 'rgba(0,255,0,0.1)',
                0.70: 'rgba(0,255,0,0.2)',
                0.75: 'rgba(255,255,0,0.2)',
                0.85: 'rgba(255,255,0,0.2)',
                0.90: 'rgba(255,255,0,0.5)',
                0.95: 'rgba(255,0,0,0.5)',
                1.00: 'rgba(255,0,0,1)'
            }
        }

问题是，在这个热图中，我是在[0,1]范围内的颜色映射值，我希望接近0的值和接近1的值都显示为“热”，0.5左右的值为中性或“冷”。此外，我希望能够从视觉上区分“热”0和“热”1，即，从[0,0.5]和[0.5,1]的不同但互补的颜色渐变

gradient: {
                0.00 :'rgba(0,0,238,1)',
                0.05 :'rgba(255,0,0,0.5)',
                0.10 :'rgba(255,0,0,0.5)',
                0.15: 'rgba(255,0,0,0.2)',
                0.20: 'rgba(255,0,0,0.2)',
                0.25: 'rgba(238,18,137,0.2)',
                0.30: 'rgba(205,0,205,0.2)',
                0.35: 'rgba(178,58,238,0.1)',
                0.40: 'rgba(154,50,205,0.1)',
                0.45: 'rgba(240,255,255,0.1)',
                0.50: 'rgba(240,255,255,0.1)',
                0.55: 'rgba(240,255,255,0.1)',
                0.60: 'rgba(0,255,0,0.1)',
                0.65: 'rgba(0,255,0,0.1)',
                0.70: 'rgba(0,255,0,0.2)',
                0.75: 'rgba(255,255,0,0.2)',
                0.85: 'rgba(255,255,0,0.2)',
                0.90: 'rgba(255,255,0,0.5)',
                0.95: 'rgba(255,0,0,0.5)',
                1.00: 'rgba(255,0,0,1)'
            }
        }

我怎样才能正确地做到这一点

gradient: {
                0.00 :'rgba(0,0,238,1)',
                0.05 :'rgba(255,0,0,0.5)',
                0.10 :'rgba(255,0,0,0.5)',
                0.15: 'rgba(255,0,0,0.2)',
                0.20: 'rgba(255,0,0,0.2)',
                0.25: 'rgba(238,18,137,0.2)',
                0.30: 'rgba(205,0,205,0.2)',
                0.35: 'rgba(178,58,238,0.1)',
                0.40: 'rgba(154,50,205,0.1)',
                0.45: 'rgba(240,255,255,0.1)',
                0.50: 'rgba(240,255,255,0.1)',
                0.55: 'rgba(240,255,255,0.1)',
                0.60: 'rgba(0,255,0,0.1)',
                0.65: 'rgba(0,255,0,0.1)',
                0.70: 'rgba(0,255,0,0.2)',
                0.75: 'rgba(255,255,0,0.2)',
                0.85: 'rgba(255,255,0,0.2)',
                0.90: 'rgba(255,255,0,0.5)',
                0.95: 'rgba(255,0,0,0.5)',
                1.00: 'rgba(255,0,0,1)'
            }
        }

下面是一个梯度的例子，它提供了一个我的意思，但它是从理想的想法。奇怪的是，如果我将不透明度设置为0，我会得到一种深灰色-最好在0.5区域周围有几乎透明的颜色。有什么想法吗

gradient: {
                0.00 :'rgba(0,0,238,1)',
                0.05 :'rgba(255,0,0,0.5)',
                0.10 :'rgba(255,0,0,0.5)',
                0.15: 'rgba(255,0,0,0.2)',
                0.20: 'rgba(255,0,0,0.2)',
                0.25: 'rgba(238,18,137,0.2)',
                0.30: 'rgba(205,0,205,0.2)',
                0.35: 'rgba(178,58,238,0.1)',
                0.40: 'rgba(154,50,205,0.1)',
                0.45: 'rgba(240,255,255,0.1)',
                0.50: 'rgba(240,255,255,0.1)',
                0.55: 'rgba(240,255,255,0.1)',
                0.60: 'rgba(0,255,0,0.1)',
                0.65: 'rgba(0,255,0,0.1)',
                0.70: 'rgba(0,255,0,0.2)',
                0.75: 'rgba(255,255,0,0.2)',
                0.85: 'rgba(255,255,0,0.2)',
                0.90: 'rgba(255,255,0,0.5)',
                0.95: 'rgba(255,0,0,0.5)',
                1.00: 'rgba(255,0,0,1)'
            }
        }

您正在寻找一种发散的配色方案。转到，选择“发散”数据，然后选择颜色方案

gradient: {
                0.00 :'rgba(0,0,238,1)',
                0.05 :'rgba(255,0,0,0.5)',
                0.10 :'rgba(255,0,0,0.5)',
                0.15: 'rgba(255,0,0,0.2)',
                0.20: 'rgba(255,0,0,0.2)',
                0.25: 'rgba(238,18,137,0.2)',
                0.30: 'rgba(205,0,205,0.2)',
                0.35: 'rgba(178,58,238,0.1)',
                0.40: 'rgba(154,50,205,0.1)',
                0.45: 'rgba(240,255,255,0.1)',
                0.50: 'rgba(240,255,255,0.1)',
                0.55: 'rgba(240,255,255,0.1)',
                0.60: 'rgba(0,255,0,0.1)',
                0.65: 'rgba(0,255,0,0.1)',
                0.70: 'rgba(0,255,0,0.2)',
                0.75: 'rgba(255,255,0,0.2)',
                0.85: 'rgba(255,255,0,0.2)',
                0.90: 'rgba(255,255,0,0.5)',
                0.95: 'rgba(255,0,0,0.5)',
                1.00: 'rgba(255,0,0,1)'
            }
        }