山东大学项目实训12

栅格涂色

空气质量配置参数：
· threshold：代表空气质量指数
· color：代表空气质量对应的颜色
· gradient：空气质量对应的颜色区间
由于颜色不能直接显示在百度地图上，需要将16进制颜色代码转RGB颜色代码

var Color = {
    //16进制颜色代码转RGB颜色代码
    hexToRgb: function (hex) {
        var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
        return result ? {
            r: parseInt(result[1], 16),
            g: parseInt(result[2], 16),
            b: parseInt(result[3], 16)
        } : hex;
    }
    ,
    //RGB颜色代码
    rgb: function (r, g, b) {
        r = Math.floor(r);
        g = Math.floor(g);
        b = Math.floor(b);
        return ["rgb(", r, ",", g, ",", b, ")"].join("");
    },
    //获取区间颜色
    getColor: function (thresholds, value) {
        var filters = $.grep(thresholds, function (item) { return item.threshold >= value })
        return filters.length == 0 ? $(thresholds).last()[0].color : filters[0].color;
    },
    //获取渐变颜色
    getGradientColor: function (thresholds, value) {

        if (!thresholds || thresholds.length == 0) { return; }

        var beginColor = thresholds[0];
        var endColor = null;

        for (var i = thresholds.length - 1; i >= 0; i--) {
            if (thresholds[i].gradient <= value) {
                beginColor = thresholds[i];
                endColor = thresholds[i == 0 ? 0 : i - 1];
                break;
            }
        }

        var diffR = 1;
        var diffG = 1;
        var diffB = 1;

        var perRange = 1.0 / thresholds.length;

        var rate = 1 - (value - beginColor.gradient) / perRange;

        var end = Color.hexToRgb(endColor.color);
        var begin = Color.hexToRgb(beginColor.color);

        //三原色改变步长
        diffR = (end.r - begin.r) * rate;
        diffG = (end.g - begin.g) * rate;
        diffB = (end.b - begin.b) * rate;

        var r = begin.r + Math.ceil(diffR);
        var g = begin.g + Math.ceil(diffG);
        var b = begin.b + Math.ceil(diffB);

        return Color.rgb(r, g, b);
    },
};

同时，在每次绘制图片之前，都需要调用clear（）清除原来的图层，避免图层叠加

clear: function () {
        this.tiles = [];
        var $this = this;
        $.each(Object.keys(this.tileLayers), function (i, item) {
            if ($this.tileLayers[item] != null) {
                $this.map.removeOverlay($this.tileLayers[item]);
                $this.tileLayers[item] = null;
            }
        });
        if (this.imageLayer != null) {
            this.map.removeOverlay(this.imageLayer);
            this.imageLayer = null;
        }
    },