上面的渲染结果是不是缺点什么，没错它没有图例，渲染的结果很酷炫但是人们并不知道颜色到数据属性值到底是如何映射的，我们必须给它加一个渐变色带的图例来方便用户更好的理解数据，这也是数据可视化的意义所在

上面这个图例就是我以海表面水汽含量（百分比）为例绘制出的图例，在一些前端可视化框架（如D3.js）中定义了一些绘制图例的类，这里我们使用html5 canvas结合原生的JS实现图例的绘制

          R   G    B  
        (255, 0 , 150)
        (255, 0 , 255)
        ( 0 , 0 , 255)
        ( 0 ,200, 255)
上面就是该渐变颜色带的以rgb表示颜色的变化情况,观察变化规律就可以开始绘制了
 步骤如下
 Step1 :引入一个canvas标签，设置其大小、位置
 Step2: 首先绘制一个小矩形，并在其上绘制图例的说明，比如数值表示的单位
 Step3: 开始颜色的绘制，rgb颜色值经过几次过渡就将canvas标签剩余面积分成几部分进行绘制
 
    var canvas = document.getElementById("你的canvas标签id");
    var ctx = canvas.getContext("2d");
    var w = canvas.attributes.width.value;
    var h = canvas.attributes.height.value;
    var imgdata = ctx.getImageData(0, 0, w, h);
    var pixels = imgdata.data;
    var i = 0;
    for (var y = 20; y < h; y++) {
        for (var x = 0; x < w; x++) {
            if (Math.floor((y - 20) / 40) == 0) {
                pixels[i++] = 255;
                pixels[i++] = 0;
                pixels[i++] = 150 + (y - 20) / 40 * 105;
                pixels[i++] = 255;
            else if (Math.floor((y - 20) / 40) == 1) {
                pixels[i++] = 255 - ((y - 20) - 40) / 40 * 255;
                pixels[i++] = 0;
                pixels[i++] = 255;
                pixels[i++] = 255;
            } else {
                pixels[i++] = 0;
                pixels[i++] = 200 * ((y - 20) - 80) / 40;
                pixels[i++] = 255;
                pixels[i++] = 255;
    ctx.putImageData(imgdata, 0, 0);
    ctx.fillStyle = "#ffffff";
    ctx.fillRect(0, 0, 20, 20);
    ctx.font = "12px bold 黑体";    // 设置字体、颜色
    // 设置水平对齐方式
    ctx.textAlign = "center";
    // 设置垂直对齐方式
    ctx.textBaseline = "middle";
    // 绘制文字（参数：要写的字，x坐标，y坐标）
    ctx.fillStyle = "#000000";
    ctx.fillText("%", 10, 10);
    ctx.fillText("20", 10, 40);
    ctx.fillText("35", 10, 60);
    ctx.fillText("50", 10, 80);
    ctx.fillText("65", 10, 100);
说明：文中代码仅供参考，不要生搬硬套，按照自己的需求改造。最近比较忙博客写的比较粗糙见谅
                    在栅格数据渲染制图过程中，免不了将你渲染的颜色取出来作为一个图例对你渲染结果的属性值进行说明，以便于用户对更好的理解你的数据两种色带离散色带渐变色带ESRI ArcGIS Pro帮助中对于配色方案的总结JS生成颜色数组如果你想要对数据插值后生成得栅格进行渲染，可以直接使用在线颜色选择工具选择几个颜色进行分级渲染即可在线颜色选择器随便几个颜色对其进行分级结果如下var colorb...
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html{
HTML 和 CSS 颜色规范中定义了 147 种颜色名（17 种标准颜色加 130 种其他颜色）
写法：red、green、blue…
取值范围：这里所有浏览器都支持的颜色名
16 进制表示法
组合了红绿蓝颜色值（RGB）的十六进制（hex）表示法，使用三个双位数表示一种颜色
写法：＃RRGGBB。相同的值可以缩写，例如：color：#fc0
取值范围：所有值 00 - FF
rgb()
使用 CSS 提供的 rgb() 函数表示颜色
    function ColorBelt() {
        this.canvas =  document.createElement('canvas');
        this.context = this.canvas.getContext('2d');//指向2d渲染环境的引用
        var colorArr = Array....
				
.html中的方法调用
	//训练使用高斯过程与贝叶斯先验
    let variogram=kriging.train(positions.map(pos=>pos[2]),positions.map(pos=>pos[0]),positions.map(pos=>pos[1]),params.krigingModel,params.krigingSigma2,params.krigingAlpha);
    //网格矩阵或轮廓路径
	let grid=kriging.grid(po