栅格瓦片属性值读取实践

需求及使用场景

鼠标点击栅格瓦片，读取瓦片属性信息。

分析
栅格瓦片本身并不存储属性信息，就是一张简单的png图片。如图：

要读取瓦片信息，传统解决方案即获取点击经纬度，去数据库查询。拿到经纬度后怎么查到想要的信息，也是个问题。
受到mapbox根据栅格瓦片颜色值推算属性值思路的启发，我们决定使用色值去反推属性。
我们知道，arcgis等gis软件处理的栅格数据，可利用unique色值着色属性值，达到的效果就是色值与属性的一对一关系。我们就利用这种一对一的关系，用颜色值推取属性值。

详细计算过程
第1阶段： 注意mapboxgl不能监听栅格图层点击事件，而监听map对象的click事件，也获取不到点击的图层名称。但是能拿到我们需要的经纬度坐标lnglat

map.on('click', this.mapClickCb) 
mapClickCb(e){  
    let lngLat = e.lngLat;
} 

第2阶段：利用经纬度lnglat、当前级别zoom获取瓦片行列号，如下：

 let z= Math.round(map.getZoom()); 
 let x =TileUtil.longitudeToTileX(lngLat.lng,z); 
 let y =TileUtil.latitudeToTileY(lngLat.lat,z);

第3阶段：利用经纬度计算点击位置在瓦片里的像素行列号，如下

let pixelX=TileUtil._lngToPixelX(lngLat.lng,z); 
let pixelY=TileUtil._latToPixelY(lngLat.lat,z); 

第4阶段：利用获取到的瓦片和像素行列号，获取对应位置像素值

//以mapbox提供的DEM数据为例 
let srcUrl='https://api.mapbox.com/v4/mapbox.terrain-rgb/'+z+'/'+x+'/'+y+'.pngraw?access_token=pk.eyJ1IjoiZml5YXoiLCJhIjoiY2plODVuMmJ4MDdhMzJ3bXhqZGhsanphNCJ9.6RJUjc1MKjgBJJzfyQ_dUw'
map.loadImage(srcUrl, (error, image) =>{  
   if(error){    
      this.$message.error(error.status)    
      return   
   }
   let canvas= document.createElement('canvas');  
   canvas.width=image.width;  
   canvas.height=image.height;   
   let context=canvas.getContext('2d');  
   //context.drawImage(image,0,0);  
   let data=context.getImageData(pixelX,pixelY,1,1); //获取点击位置的像素值  
   let rgb=data.data.slice(0,3) //获取到RGB值   
   let height = -10000 + ((rgb[0] * 256 * 256 + rgb[1] * 256 + rgb[2]) * 0.1) //反算高程值 
});  

参考文章：
mapbox是如何通过RGB去解算高程的
相关计算函数看这篇