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、面元赋色填充效果展示