栅格瓦片属性值读取实践

syoya 发布于2019-08-23 18:38 / 1904人阅读

摘要：需求及使用场景鼠标点击栅格瓦片，读取瓦片属性信息。分析栅格瓦片本身并不存储属性信息，就是一张简单的图片。受到根据栅格瓦片颜色值推算属性值思路的启发，我们决定使用色值去反推属性。

需求及使用场景

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

分析
栅格瓦片本身并不存储属性信息，就是一张简单的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去解算高程的
相关计算函数看这篇

GPU云服务器云服务器获取属性值 orm属性值自定义属性值 html属性值

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105576.html

慕课网_《如何使用高德云图在线制作属于你的地图》学习总结

摘要：时间年月日星期日说明本文部分内容均来自慕课网。用户可以在服务器端调用云存储云检索从而构建自己的存储和检索服务，甚至可以制作自己的数据管理台。时间：2017年08月13日星期日说明：本文部分内容均来自慕课网。@慕课网：http://www.imooc.com教学源码：无学习源码：https://github.com/zccodere/s... 第一章：云图产品介绍 1-1 云图产品介绍...

k00baa 2019-08-16 10:39 评论0 收藏0
慕课网_《如何使用高德云图在线制作属于你的地图》学习总结

摘要：时间年月日星期日说明本文部分内容均来自慕课网。用户可以在服务器端调用云存储云检索从而构建自己的存储和检索服务，甚至可以制作自己的数据管理台。时间：2017年08月13日星期日说明：本文部分内容均来自慕课网。@慕课网：http://www.imooc.com教学源码：无学习源码：https://github.com/zccodere/s... 第一章：云图产品介绍 1-1 云图产品介绍...

afishhhhh 2019-08-22 10:53 评论0 收藏0
下一代的 3D Tiles 前瞻

摘要：在中，引入一些元数据方面的扩展项。不同层级的元数据像素级别样式化渲染不同层级的元数据像素级别样式化渲染配合使用和两个扩展项，下一代的可以在各个层级存储元数据。例如，水泥地和草地的摩擦系数可以作为元数据，影响车辆的行驶速度等。下一代的 3D Tiles 前瞻原文：Introducing 3D Tiles Next, Streaming Geospatial to the Metaverse原文...

魏明 2021-11-24 09:39 评论0 收藏0
python-GDAL之空间数据处理-自带工具集

摘要：自带了很多实用方便的工具，方便大家直接使用。按照切片服务规则生成切片数据元数据地图浏览网页。还可以按照投影创建的元数据文件。对影像执行平移锐化增强操作以后版本才有此工具对两幅影像进行差异检测，包括像素和元数据的检查。 ...

DataPipeline 2021-11-18 10:02 评论0 收藏0
vue下实现input实现图片上传，压缩，拼接以及旋转

摘要：背景作为一名前端工作人员，相信大家在开发系统的时候，经常有遇到需要这么一种需求，就是需要为用户保存上传的图片，很多小白遇到这个问题的时候，都会虎躯一震，以为会是一个棘手的问题，当你读完这篇文章的时候，你会发现都是你瞎操作了，真相就是这么简单背景作为一名前端工作人员，相信大家在开发系统的时候，经常有遇到需要这么一种需求，就是需要为用户保存上传的图片，很多小白遇到这个问题的时候，都会虎...

megatron 2019-08-23 13:40 评论0 收藏0