用地基遥感反演生成的像元阵列绘制卫星图

1、卫星云图像元阵列：

himawari_AOD数据说明：
（1）txt格式按列存储
（2）存储格式： 纬度 经度 256色真彩图合成R G B 气溶胶光学厚度

文件：himawari_data_20190601_0000.txt

2、用python处理txt数据，选取特定经纬度范围数据生成csv文件：

import pandas as pd
import numpy as np;

def process_data():
    data = pd.read_csv('data/himawari_data_20190601_0000.txt',delim_whitespace=True)
    #print(data.head())
    #data.to_csv('data/himawari_data_20190601_0000.csv');
    
    df = pd.DataFrame(data)
    df1 = df[['LAT', 'LON', 'R', 'G', 'B', 'VALUE']]
    # df2 = df1[df1.LAT>=18][df1.LAT<=40][df1.LON>=80][df1.LON<=110] //注释掉选取所有的数据
    df2 = df1
    df2.reset_index(drop=True)
    print(df2);
    df2.index = np.arange(0, len(df2))
    df2.to_csv('data/test.csv', index_label='index');
   # print(df2)
    

if __name__ == "__main__":
    process_data()

csv文件：

 3、前端用d3.js计算颜色插值：

1）选取气溶胶光学厚度四个临界颜色值（自定义）

2）构建颜色梯度值，每个梯度插值100个颜色。

function buildAerosolGradientColor(){
    const basecolors = ['#0021FF', '#00FCFE','#07FD00','#FFF40B','#FF000E'];
    let colorNode2 = [];
    let gradientColors = [];
    for(let i=1; i<basecolors.length;i++){
        let colors = [];
        let threshold = [0, 100];
        let linear = d3.scaleLinear().domain(threshold).range([0, 1]);
        let interpolater = d3.interpolateRgb(basecolors[i-1], basecolors[i]);
        for(let j=threshold[0]; j <threshold[1]; j++) {
            let rgb = interpolater(linear(j));
            colors.push(rgb);
        }
        gradientColors.push(colors);
        colorNode2 = colorNode2.concat(colors.map(e=>`<li style="background-color: ${e};"></li>`));
    }
    let legendNode2 = document.querySelector('#legend2');
    legendNode2.innerHTML = colorNode2.join('');
    return gradientColors;
}

 

4、绘制卫星云图和气溶胶真彩图：

//初始化高德地图和参数配置
var map = new AMap.Map('map', {
    center: [105, 35],
    zoom: 4
});

var canvas;
var southwest = new AMap.LngLat(80, 17.95);
var northeast = new AMap.LngLat(135.05, 55)

//气溶胶配置
const aerosolConfig = {
    colors: null,
    maxVal: null,
    minVal: null
};

function addCanvasLayer(){
    canvas = document.createElement('canvas');
    canvas.id = 'sensor';
    var southWestPixel = map.lngLatToContainer(southwest);
    var northEastPixel = map.lngLatToContainer(northeast);
    canvas.width = Math.abs(northEastPixel.x - southWestPixel.x);
    canvas.height = Math.abs(northEastPixel.y - southWestPixel.y);

    let canvasLayer = new AMap.CanvasLayer({
        canvas: canvas,
        bounds: new AMap.Bounds(southwest, northeast),
        zoom: 4
        // opacity: 1
    });
    canvasLayer.setMap(map);
}


//读取csv文件绘图
function testDrawAerosol(){
    axios.get('../assets/data/satelite/aerosol.csv', {}).then(res=>{
        let data = d3.csvParse(res.data);
        console.log(data);
        addCanvasLayer();
        let data1 = data.slice().filter(e=>Number(e.VALUE)>=0);
        let distinctValues = Array.from(new Set(data1.map(e=>Number(e.VALUE))));
        aerosolConfig.minVal = Math.min.apply(null, distinctValues);
        aerosolConfig.maxVal = Math.max.apply(null, distinctValues);
        let colors = buildAerosolGradientColor();
        console.log(colors);
        aerosolConfig.colors = colors;
        drawAerosolPicture(data, colors); 
    });
}

//绘制
function drawAerosolPicture(data, colors){
    const ctx = canvas.getContext('2d');
    let originLat = Number(data[0].LAT);
    let originLon = Number(data[0].LON);
    let origin = map.lngLatToContainer(new AMap.LngLat(originLon, originLat));

    for(let i=0, len = data.length; i<len; i++){
        let d = data[i];
        let topLeftLon = Number(d.LON);
        let topLeftLat = Number(d.LAT);
        let bottomRightLon = Number(d.LON)+0.05;
        let bottomRightLat = Number(d.LAT)-0.05;

        const topLeftPixel = map.lngLatToContainer(new AMap.LngLat(topLeftLon, topLeftLat));
        const bottomRightPixel = map.lngLatToContainer(new AMap.LngLat(bottomRightLon, bottomRightLat));
        const width = bottomRightPixel.x - topLeftPixel.x;
        const height = bottomRightPixel.y - topLeftPixel.y;
        const topLeft = topLeftPixel.subtract(origin);

        //draw satelite cloud 
        ctx.beginPath();
        ctx.fillStyle = `rgb(${d.R},${d.G},${d.B})`;
        ctx.fillRect(topLeft.x, topLeft.y, width, height);
        ctx.closePath();

        //draw aerosol
        let val = Number(d.VALUE);
        if(val>0) {
            ctx.beginPath();
            ctx.fillStyle = getAeroCellColor(val);
            ctx.fillRect(topLeft.x, topLeft.y, width, height);
            ctx.closePath();
        }
    }
}

//获取气溶胶像元颜色
function getAeroCellColor(value){
   const colors = aerosolConfig.colors.reduce((prev, next)=>{return prev.concat(next)});
   const max = aerosolConfig.maxVal;
   const index = Math.floor(value/max*colors.length);
   return colors[index];
}

效果图：