用地基遥感反演生成的像元阵列绘制卫星图
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个颜色。
1 function buildAerosolGradientColor(){ 2 const basecolors = ['#0021FF', '#00FCFE','#07FD00','#FFF40B','#FF000E']; 3 let colorNode2 = []; 4 let gradientColors = []; 5 for(let i=1; i<basecolors.length;i++){ 6 let colors = []; 7 let threshold = [0, 100]; 8 let linear = d3.scaleLinear().domain(threshold).range([0, 1]); 9 let interpolater = d3.interpolateRgb(basecolors[i-1], basecolors[i]); 10 for(let j=threshold[0]; j <threshold[1]; j++) { 11 let rgb = interpolater(linear(j)); 12 colors.push(rgb); 13 } 14 gradientColors.push(colors); 15 colorNode2 = colorNode2.concat(colors.map(e=>`<li style="background-color: ${e};"></li>`)); 16 } 17 let legendNode2 = document.querySelector('#legend2'); 18 legendNode2.innerHTML = colorNode2.join(''); 19 return gradientColors; 20 }
4、绘制卫星云图和气溶胶真彩图:
1 //初始化高德地图和参数配置 2 var map = new AMap.Map('map', { 3 center: [105, 35], 4 zoom: 4 5 }); 6 7 var canvas; 8 var southwest = new AMap.LngLat(80, 17.95); 9 var northeast = new AMap.LngLat(135.05, 55) 10 11 //气溶胶配置 12 const aerosolConfig = { 13 colors: null, 14 maxVal: null, 15 minVal: null 16 }; 17 18 function addCanvasLayer(){ 19 canvas = document.createElement('canvas'); 20 canvas.id = 'sensor'; 21 var southWestPixel = map.lngLatToContainer(southwest); 22 var northEastPixel = map.lngLatToContainer(northeast); 23 canvas.width = Math.abs(northEastPixel.x - southWestPixel.x); 24 canvas.height = Math.abs(northEastPixel.y - southWestPixel.y); 25 26 let canvasLayer = new AMap.CanvasLayer({ 27 canvas: canvas, 28 bounds: new AMap.Bounds(southwest, northeast), 29 zoom: 4 30 // opacity: 1 31 }); 32 canvasLayer.setMap(map); 33 } 34 35 36 //读取csv文件绘图 37 function testDrawAerosol(){ 38 axios.get('../assets/data/satelite/aerosol.csv', {}).then(res=>{ 39 let data = d3.csvParse(res.data); 40 console.log(data); 41 addCanvasLayer(); 42 let data1 = data.slice().filter(e=>Number(e.VALUE)>=0); 43 let distinctValues = Array.from(new Set(data1.map(e=>Number(e.VALUE)))); 44 aerosolConfig.minVal = Math.min.apply(null, distinctValues); 45 aerosolConfig.maxVal = Math.max.apply(null, distinctValues); 46 let colors = buildAerosolGradientColor(); 47 console.log(colors); 48 aerosolConfig.colors = colors; 49 drawAerosolPicture(data, colors); 50 }); 51 } 52 53 //绘制 54 function drawAerosolPicture(data, colors){ 55 const ctx = canvas.getContext('2d'); 56 let originLat = Number(data[0].LAT); 57 let originLon = Number(data[0].LON); 58 let origin = map.lngLatToContainer(new AMap.LngLat(originLon, originLat)); 59 60 for(let i=0, len = data.length; i<len; i++){ 61 let d = data[i]; 62 let topLeftLon = Number(d.LON); 63 let topLeftLat = Number(d.LAT); 64 let bottomRightLon = Number(d.LON)+0.05; 65 let bottomRightLat = Number(d.LAT)-0.05; 66 67 const topLeftPixel = map.lngLatToContainer(new AMap.LngLat(topLeftLon, topLeftLat)); 68 const bottomRightPixel = map.lngLatToContainer(new AMap.LngLat(bottomRightLon, bottomRightLat)); 69 const width = bottomRightPixel.x - topLeftPixel.x; 70 const height = bottomRightPixel.y - topLeftPixel.y; 71 const topLeft = topLeftPixel.subtract(origin); 72 73 //draw satelite cloud 74 ctx.beginPath(); 75 ctx.fillStyle = `rgb(${d.R},${d.G},${d.B})`; 76 ctx.fillRect(topLeft.x, topLeft.y, width, height); 77 ctx.closePath(); 78 79 //draw aerosol 80 let val = Number(d.VALUE); 81 if(val>0) { 82 ctx.beginPath(); 83 ctx.fillStyle = getAeroCellColor(val); 84 ctx.fillRect(topLeft.x, topLeft.y, width, height); 85 ctx.closePath(); 86 } 87 } 88 } 89 90 //获取气溶胶像元颜色 91 function getAeroCellColor(value){ 92 const colors = aerosolConfig.colors.reduce((prev, next)=>{return prev.concat(next)}); 93 const max = aerosolConfig.maxVal; 94 const index = Math.floor(value/max*colors.length); 95 return colors[index]; 96 }
效果图: