栅格瓦片属性值读取实践

2019-07-12 admin

需求及使用场景 鼠标点击栅格瓦片,读取瓦片属性信息。

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

clipboard.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) //反算高程值
});    

[转载]原文链接:https://segmentfault.com/a/1190000019743840

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-69579.html

文章标题:栅格瓦片属性值读取实践

相关文章
javascript通过获取html标签属性class实现多选项卡的方法
本文实例讲述了javascript通过获取html标签属性class实现多选项卡的方法。分享给大家供大家参考。具体实现方法如下: <!DOCTYPE html> <html> <head> &...
2017-03-27
javascript原始值和对象引用实例分析
本文实例讲述了javascript原始值和对象引用的方法。分享给大家供大家参考。具体分析如下: 一句话来说:原始值是不可变的,而对象引用是可变的。 js中的原始值(undefined、null、布尔值、数字和字符串)与对象(包括数组和函数)...
2017-03-22
解析JavaScript的ES6版本中的解构赋值
什么是解构赋值? 解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性值赋给一系列变量。这个语法非常简洁,而且比传统的属性访问更加清晰。 在不使用解构赋值的情况下,访问数组的前三项: var first = someArray[0...
2017-03-27
有赞vant-ui Tabs、List、PullRefresh组件实践
功能需求是实现一个移动端的栏目列表切换,于此同时列表需要进行下拉刷新,上拉加载 如下图,大概是一个这样的东西 看起来是挺简单的,实现起来很方便。没错,我当时也是这么想的,结果满心欢喜就开始在前一个前端写好的的vantui 基本结构下开始编...
2018-08-21
javascript实时获取鼠标坐标值并显示的方法
本文实例讲述了javascript实时获取鼠标坐标值并显示的方法。分享给大家供大家参考。具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT...
2017-03-23
JavaScript操作XML文件之XML读取方法
本文实例讲述了JavaScript操作XML文件之XML读取方法。分享给大家供大家参考。具体分析如下: 假设我们现在要读取下面的 info.xml 文件 <?xml version="1.0" encoding=&...
2017-03-24
为什么糟糕的科学代码战胜了遵循“最佳实践”的代码
我刚刚读了“科学代码的低品质”,它声称科学家写的代码比有“软件工程师”参与的代码要更糟糕些。 我所处的工作环境有十多年了,那里由具有数学或物理学背景的人统治,他们经常缺少“软件工程师”的认识。 最大的麻烦总是由大多数把自己定位成程序员的人造...
2015-12-25
javascript实现随机读取数组的方法
本文实例讲述了javascript实现随机读取数组的方法。分享给大家供大家参考。具体如下: function write_quote() { var quotes = [ "no animals were harmed...
2017-03-29
javascript的变量、传值、传址、参数之间关系
先把收获晾一下: 1.javascrip变量包含两种类型的值,一种为引用类型的值,一种是基本类型的值。引用类型包括:Array,Object,Function(可以这么理解,非基本类型的都是引用类型);5种基本类型包括:undefined,...
2017-03-27
最佳的JavaScript错误处理实践
不管你的技术水平如何,错误或异常是应用程序开发者生活的一部分。Web开发的不连贯性留下了许多错误能够发生并确实已经发生的地方。解决的关键在于处理任何不可预见的(或可预见的错误),来控制用户的体验。利用JavaScript,就有多种技术和语言...
2017-03-21
回到顶部