空间数据前端动态插值渲染系列--分级渲染渐变颜色带的生成及图例绘制

在标量数据渲染制图过程中，免不了将你渲染的颜色取出来作为一个图例对你渲染结果的属性值进行说明，以便于用户对更好的理解你的数据。本文主要介绍如何在Web前端生成颜色带对于标量数据插值结果进行渲染以及图例的绘制。

两种色带

目前最常使用的主要有以下以下两种颜色带
离散色带

渐变色带

ESRI ArcGIS Pro帮助中对于配色方案的总结

JS生成颜色数组

离散颜色渲染

如果你想要对数据插值后生成得栅格进行渲染，可以直接使用在线颜色选择工具选择几个颜色进行分级渲染即可
在线颜色选择器
随便几个颜色对其进行分级结果如下

var colorband = ["#99ffff", "#99ccff", "#9999ff", "#9966ff", "#9933ff", "#9900ff"];

此时分级的粒度较大，其实就是生成了一个离散的颜色带，上图就是其渲染结果。

渐变颜色渲染

var colorBandSST = ["#00A600", "#01A600", "#03A700", "#04A700", "#05A800", "#07A800", "#08A900", "#09A900", "#0BAA00", "#0CAA00", "#0DAB00", "#0FAB00", "#10AC00", "#12AC00", "#13AD00", "#14AD00", "#16AE00", "#17AE00", "#19AF00", "#1AAF00", "#1CB000", "#1DB000", "#1FB100", "#20B100", "#22B200", "#23B200", "#25B300", "#26B300", "#28B400", "#29B400", "#2BB500", "#2CB500", "#2EB600", "#2FB600", "#31B700", "#33B700", "#34B800", "#36B800", "#37B900", "#39B900", "#3BBA00", "#3CBA00", "#3EBB00", "#3FBB00", "#41BC00", "#43BC00", "#44BD00", "#46BD00", "#48BE00", "#49BE00&#