成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

柵格瓦片屬性值讀取實踐

syoya / 1933人閱讀

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

需求及使用場景

鼠標(biāo)點擊柵格瓦片，讀取瓦片屬性信息。

分析
柵格瓦片本身并不存儲屬性信息，就是一張簡單的png圖片。如圖：

要讀取瓦片信息，傳統(tǒng)解決方案即獲取點擊經(jīng)緯度，去數(shù)據(jù)庫查詢。拿到經(jīng)緯度后怎么查到想要的信息，也是個問題。
受到mapbox根據(jù)柵格瓦片顏色值推算屬性值思路的啟發(fā)，我們決定使用色值去反推屬性。
我們知道，arcgis等gis軟件處理的柵格數(shù)據(jù)，可利用unique色值著色屬性值，達(dá)到的效果就是色值與屬性的一對一關(guān)系。我們就利用這種一對一的關(guān)系，用顏色值推取屬性值。

詳細(xì)計算過程
第1階段： 注意mapboxgl不能監(jiān)聽柵格圖層點擊事件，而監(jiān)聽map對象的click事件，也獲取不到點擊的圖層名稱。但是能拿到我們需要的經(jīng)緯度坐標(biāo)lnglat

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

第2階段：利用經(jīng)緯度lnglat、當(dāng)前級別zoom獲取瓦片行列號，如下：

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

第3階段：利用經(jīng)緯度計算點擊位置在瓦片里的像素行列號，如下

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

第4階段：利用獲取到的瓦片和像素行列號，獲取對應(yīng)位置像素值

//以mapbox提供的DEM數(shù)據(jù)為例 
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去解算高程的
相關(guān)計算函數(shù)看這篇

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/105576.html

相關(guān)文章

  • 慕課網(wǎng)_《如何使用高德云圖在線制作屬于你的地圖》學(xué)習(xí)總結(jié)

    摘要：時間年月日星期日說明本文部分內(nèi)容均來自慕課網(wǎng)。用戶可以在服務(wù)器端調(diào)用云存儲云檢索從而構(gòu)建自己的存儲和檢索服務(wù)，甚至可以制作自己的數(shù)據(jù)管理臺。 時間：2017年08月13日星期日說明：本文部分內(nèi)容均來自慕課網(wǎng)。@慕課網(wǎng)：http://www.imooc.com教學(xué)源碼：無學(xué)習(xí)源碼：https://github.com/zccodere/s... 第一章：云圖產(chǎn)品介紹 1-1 云圖產(chǎn)品介紹...

    k00baa 評論0 收藏0

  • 慕課網(wǎng)_《如何使用高德云圖在線制作屬于你的地圖》學(xué)習(xí)總結(jié)

    摘要：時間年月日星期日說明本文部分內(nèi)容均來自慕課網(wǎng)。用戶可以在服務(wù)器端調(diào)用云存儲云檢索從而構(gòu)建自己的存儲和檢索服務(wù)，甚至可以制作自己的數(shù)據(jù)管理臺。 時間：2017年08月13日星期日說明：本文部分內(nèi)容均來自慕課網(wǎng)。@慕課網(wǎng)：http://www.imooc.com教學(xué)源碼：無學(xué)習(xí)源碼：https://github.com/zccodere/s... 第一章：云圖產(chǎn)品介紹 1-1 云圖產(chǎn)品介紹...

    afishhhhh 評論0 收藏0

  • 下一代的 3D Tiles 前瞻

    摘要：在中，引入一些元數(shù)據(jù)方面的擴展項。不同層級的元數(shù)據(jù)像素級別樣式化渲染不同層級的元數(shù)據(jù)像素級別樣式化渲染配合使用和兩個擴展項，下一代的可以在各個層級存儲元數(shù)據(jù)。例如，水泥地和草地的摩擦系數(shù)可以作為元數(shù)據(jù)，影響車輛的行駛速度等。下一代的 3D Tiles 前瞻原文：Introducing 3D Tiles Next, Streaming Geospatial to the Metaverse原文...

    魏明 評論0 收藏0

  • python-GDAL之空間數(shù)據(jù)處理-自帶工具集

    摘要：自帶了很多實用方便的工具，方便大家直接使用。按照切片服務(wù)規(guī)則生成切片數(shù)據(jù)元數(shù)據(jù)地圖瀏覽網(wǎng)頁。還可以按照投影創(chuàng)建的元數(shù)據(jù)文件。對影像執(zhí)行平移銳化增強操作以后版本才有此工具對兩幅影像進行差異檢測，包括像素和元數(shù)據(jù)的檢查。 ...

    DataPipeline 評論0 收藏0

  • vue下實現(xiàn)input實現(xiàn)圖片上傳，壓縮，拼接以及旋轉(zhuǎn)

    摘要：背景作為一名前端工作人員，相信大家在開發(fā)系統(tǒng)的時候，經(jīng)常有遇到需要這么一種需求，就是需要為用戶保存上傳的圖片，很多小白遇到這個問題的時候，都會虎軀一震，以為會是一個棘手的問題，當(dāng)你讀完這篇文章的時候，你會發(fā)現(xiàn)都是你瞎操作了，真相就是這么簡單 背景 作為一名前端工作人員，相信大家在開發(fā)系統(tǒng)的時候，經(jīng)常有遇到需要這么一種需求，就是需要為用戶保存上傳的圖片，很多小白遇到這個問題的時候，都會虎...

    megatron 評論0 收藏0

發(fā)表評論

0條評論

syoya

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<