柵格瓦片屬性值讀取實踐

syoya 發布于2019-08-23 18:38 / 1920人閱讀

摘要：需求及使用場景鼠標點擊柵格瓦片，讀取瓦片屬性信息。分析柵格瓦片本身并不存儲屬性信息，就是一張簡單的圖片。受到根據柵格瓦片顏色值推算屬性值思路的啟發，我們決定使用色值去反推屬性。

需求及使用場景

鼠標點擊柵格瓦片，讀取瓦片屬性信息。

分析
柵格瓦片本身并不存儲屬性信息，就是一張簡單的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屬性值

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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