【可视化】地质油藏可视化之四-面元渐进涂色

1、颜色渐进处理（来自互联网）

function gradientColor(startColor, endColor, step) {

    var startRGB = colorRgb(startColor); //转换为rgb数组模式
    var startR = startRGB[0];
    var startG = startRGB[1];
    var startB = startRGB[2];
    var endRGB = colorRgb(endColor);
    var endR = endRGB[0];
    var endG = endRGB[1];
    var endB = endRGB[2];
    var sR = (endR - startR) / step; //总差值
    var sG = (endG - startG) / step;
    var sB = (endB - startB) / step;
    var colorArr = [];
    for (var i = 0; i < step; i++) {
        // var rgb = 'rgb(' + parseInt((sR * i + startR)) + ',' + parseInt((sG * i + startG)) + ',' + parseInt((sB * i + startB)) + ')'
        var rgb = {
            r: parseInt((sR * i + startR)),
            g: parseInt((sG * i + startG)),
            b: parseInt((sB * i + startB))
        }
        colorArr.push(rgb);
    }
    return colorArr;
}

function colorRgb(sColor) {
    var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
    var sColor = sColor.toLowerCase();
    if (sColor && reg.test(sColor)) {
        if (sColor.length === 4) {
            var sColorNew = "#";
            for (var i = 1; i < 4; i += 1) {
                sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
            }
            sColor = sColorNew;
        }
        //处理六位的颜色值
        var sColorChange = [];
        for (var i = 1; i < 7; i += 2) {
            sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
        }
        return sColorChange;
    } else {
        return sColor;
    }
};

var colorIndex = [];
//根据深度值进行颜色填充
ZMapJsonLoader.prototype._depthColorPicker = function (depth) {
    // var arr = getItemColorsJson(this.colorNum, 'red');
    var arr = this.colors;
    var altiColor = {
        r: 255,
        g: 0,
        b: 0
    }
    var that = this;

    for (let index = 0; index < arr.length; index++) {
        const item = arr[index];
        colorIndex.push(index);
        if ((that.colorStep * index + that.min) <= depth && depth < (that.colorStep * (index + 1) + that.min)) {
            return item;
        }

    }


    return altiColor;
}

2、面元赋色填充效果展示