一起幫忙解決難題，拯救IT 人的一天

向量圖磚(vector tiles). Vector tiles是這幾年webGIS發展的趨勢，它不像wmts是以影像為respond，而是使用geojson，也就是 ... 2018iT邦幫忙鐵人賽 DAY 14 1 ModernWeb 30天打造我的WebGIS系列第 14篇 [Day14]WebGIS中的網格資料 2018鐵人賽 leaflet mapbox googlemap Chimin 2018-01-0201:44:355187瀏覽 前言 網格(raster)資料是指以規則網格的方式呈現空間資料，可能是長這樣： 上面是試圖以geojson模擬網格資料，網格間隔大概是一英里(1.6km)，並且有一個solRad屬性，像這樣用geojson這種向量格式表達網格看起來沒有什麼問題，但是... 假設今天網格的間隔更密一些，範圍再大一些，其資料量可能會很可觀，這時候無論在計算或是前端展示上，GIS傾向會使用影像方式儲存。

再者，上述案例在網格式資料是單一波段的資料(也就是只有solRad這個屬性)，網格資料大多都是三個波段的資料(例如正射影像、衛星影像)，相關討論我們在[Day6]常見的GIS資料格式有探討過。

在webGIS中，我們可能比較少直接處理網格資料，通常都是使用它，今天我們試著使用Leaflet的raster圖層功能。

在地圖放影像:使用Leaflet-ImageOverlay 使用ImageOverlay之前我們先要有資料，這邊我們使用內政部20米DTM。

下載下來之後，原始檔案是*.grd，此時必須使用QGIS這套軟體稍作處理，將其轉為.tif或.jpg等。

原先內政部提供的為TWD97，我們把它轉為WGS84，透過crs設定記錄其範圍坐標（後面要用）。

把這張圖片加入地圖，使用imageOverlay，需要使用剛剛記錄的邊界 varimageUrl='/dist/DEM.tif'; varimageBounds=[[24.8737080,120.9426029],[24.847877,120.958343]]; varimglayer=L.imageOverlay(imageUrl,imageBounds).addTo(map); 成果： 另外，Leaflet也有VideoOverlay的類別，方法差不多，有需要可以自行參考。

介接圖磚服務(WMTS):使用Leaflet-TileLayer 我們在[Day3]談互操作性及WebMapService標準有提到WMS與WMTS，兩者在Leaflet中分別方法可以放入我們的地圖，以國土測繪中心的WMTS為例，我們從Capabilities的xml檔可以看到介接圖磚的資訊。

使用tileLayer實作： L.tileLayer('https://wmts.nlsc.gov.tw/wmts/EMAP/default/GoogleMapsCompatible/{z}/{y}/{x}').addTo(map); 圖磚(webtiles)跟向量圖磚(vectortiles) 觀察一下剛剛前面增加的兩個圖層： 可以觀察到： 使用imageOverlay，request部分是把整張影像存取下來 而使用tileLayer可以發現整個地圖是以細碎的方式存取，這是兩者最大差異。

對地圖做縮放，imageOverlay並不會重新request資料，tileLayer則會，表示tileLayer是有高度(深度)的。

以上兩點正好可以拿來說明tileLayer，試想，如果我們一次要存取大範圍的影像，使用imageOverlay應該不太妥當，一來影像太大，二來不能依照深度或高度展示不同細節。

圖磚(webtiles) TileLayer或是說WMTS的設計概念如下圖，簡單來講，就是將原始影像依不同深度切成不同大小的磚，並透過資料標準協定介接規格，所以client端可以根據不同坐標及深度(比例尺)request不同的資料，而不是一次request整張影像，以增加效率： (取自QGIS) 向量圖磚(vectortiles) Vectortiles是這幾年webGIS發展的趨勢，它不像wmts是以影像為respond，而是使用geojson，也就是說，過去我們使用的wmts(指通用版電子地圖這類的，不是指正射影像)，是把點線面向量資料網格化成影像製成tiles，而vectortiles是以向量的方式respond給client端。

使用vectortiles具有這些優勢(取自mapbox)： 可自行定義地圖樣式 vectortile資料小，存取更快 像是Googlemap也是採用vectortile的技術，因此可以使用snazzy這類工具產生樣式定義檔，並在地圖上使用。

其他像是cartodb、mapbox，OpenStreetMap的IDeditor也是利用vectortile技術，而Leaflet也有相關擴充。

留言 追蹤 檢舉 上一篇 [Day13]WebGIS中的向量資料-在Leaflet實作 下一篇 [Day15]wms,wmts資源彙整與OSM 系列文 30天打造我的WebGIS 共30篇 目錄 RSS系列文 訂閱系列文 73人訂閱 26 [Day26]在資料庫中操作空間資料-MongoDB 27 [Day27]WebGIS加入D3.js圖表互動 28 [Day28]WebGL與3DGIS概觀 29 [Day29]WebGIS大觀園 30 [Day30]最重要的回顧 完整目錄 尚未有邦友留言 立即登入留言 iT邦幫忙鐵人賽 參賽組數 1087組 團體組數 52組 累計文章數 20460篇 完賽人數 572人 鐵人賽最新文章 更新網格交易機器人 STM32的開發生態，Cube、HAL庫、LL庫 閒聊STM32CubeMX和STM32CubeIDE 建立第一個單元測試(golang)-1(Day20) Day38-在AWSLambda中使用YOLO推估(Inference) Day37-在AWSLambda建立OpenCVLayer Day36-使用Container建立AmazonSageMaker端點 Day35-AmazonSageMaker簡介 今天來瞄一眼龍與雀的科技：知覺共享技術Body-sharing 更新網格交易機器人 前往鐵人賽 技術推廣專區 [Day2]抓取每日收盤價 [Day1]基本工具安裝 利用python取得永豐銀行API的Nonce 永豐金融API測試員 [Day03]tinyML開發板介紹 [Day01]在享受tinyML這道美食之前 [Day3]使用ta-lib製作指標 計算API所需要的參數:HashID [Day4]函數打包與買進持有報酬率試算 計算API所需要的參數:IV 前往鐵人賽 熱門問題 請推薦台中IT委外廠商 css選擇器中的[]什麼意思,或怎麼解釋 test這是個測試 請問這個錯在哪? 請教光纖跳接線的選擇 新手程式提問 [MVC][C#]連結中央氣象局天氣，並以氣溫判別顯示對應圖片 請問是否有人有使用過VisualStudioIDE?? 請益，每一筆商品資料內的圖片，儲存在資料庫內方式 htmljavascript值存入PHP IT邦幫忙 站方公告 2021iThome鐵人賽精彩文章超過2萬篇，預計12月揭曉本屆獲勝鐵人 熱門tag 看更多 13th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 windows php python windowsserver linux c# 程式設計 資訊安全 css vue.js sql 分享 熱門回答 test這是個測試 請問這個錯在哪? 到底API設計的方向該往哪裡去？ 新手程式提問 急!傳值問題 請推薦台中IT委外廠商 [MVC][C#]連結中央氣象局天氣，並以氣溫判別顯示對應圖片 請問是否有人有使用過VisualStudioIDE?? htmljavascript值存入PHP 資料庫的數值sum加總後，數值仍然會少算?! 熱門文章 Day38-在AWSLambda中使用YOLO推估(Inference) STM32的開發生態，Cube、HAL庫、LL庫 閒聊STM32CubeMX和STM32CubeIDE 建立第一個單元測試(golang)-1(Day20) Day37-在AWSLambda建立OpenCVLayer iPhone無法正常關機？可以試試這4個方法 從PDF刪除水印的5種最佳方法 12個類似LibraryGenesis的網站可以下載免費的PDF電子書 網路是怎樣連接的(十二)IP地址怎麼看 2021年6款最佳免費SoundCloud320kbps下載器 一週點數排行 更多點數排行 海綿寶寶(antijava) raytracy(raytracy) ccenjor(ccenjor) Mao(TutelaryMao) Felix(redqi) rogeryao(rogeryao) Homura(homura0731) juck30808(juck30808) 緯大啊緯大人(mobetae47111) 一級屠豬士(hitomitanaka) × At 輸入對方的帳號或暱稱 Loading 找不到結果。

標記 {{result.label}} {{result.account}} 關閉