iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 16
0
Modern Web

《你的地圖會說話? WebGIS與JavaScript的情感交織》系列 第 16

[6-1] 圖層套疊 - WMS & WMTS

之前介紹了一輪的點線面圖徵、展點及環域等等的向量資料後,
今天終於要來介紹網格資料啦!

今天要來介紹的有WMS以及WMTS,
是WebGIS常用於底圖、圖層套疊的資料格式。


Leaflet初始化地圖

        <div id="lmap"></div>
        var LMap = L.map(document.getElementById('lmap'), {
            center: [23.5, 121],
            zoom: 7,
            crs: L.CRS.EPSG3857,
        });
        
        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
            maxZoom: 18,
            id: 'mapbox.streets'
        }).addTo(LMap);

WMS

WMS全名Web Map Service,為OGC(開放地理空間協會)在1999年提出的資料格式標準,以XML格式做為http取得GIS Server所提供之地理圖像服務的介面,圖像格式通常為JPEG或PNG,並且有座標系統、邊界座標等參數做為WebGIS圖層套疊的依據。

↓ XML格式如下
https://ithelp.ithome.com.tw/upload/images/20201001/201306045CytUY0D9V.jpg

網址+參數範例
http://wms.nlsc.gov.tw/wms?SRS=EPSG:4326&HEIGHT=400&WIDTH=600&REQUEST=GetMap&TRANSPARENT=TRUE&VERSION=1.1.1&LAYERS=LANDSECT&STYLES=default&BBOX=120.190057,25.302059,122.200555,23.843379&FORMAT=image%2Fjpeg

↓ 段籍圖,可以直接用網址打開
https://ithelp.ithome.com.tw/upload/images/20201001/20130604gpWXlw974F.jpg

↓ 也可以用GIS軟體發佈在GIS Server,並用Leaflet圖台進行套疊

       var wmsLayer = L.tileLayer.wms('http://localhost:8080/MapServer/WMSServer?'
            , {
                layers: 'Taoyuan',
                transparent: true,
                bgcolor: '0xFFFFFF',
                format: 'image/png',
                srs: 'EPSG:3857',
                opacity: 0.5
            }).addTo(LMap);

↓ 結果
https://ithelp.ithome.com.tw/upload/images/20201001/20130604Zfyk0xCtrh.jpg

參數

  • SERVICE: (必須)WMS
  • VERSION: (必須)WMS版本
  • REQUEST: (必須)地圖服務的請求類型,常見的有GetMap、GetFeatureInfo、GetCapabilities
  • LAYERS: (必須)圖層名稱
  • STYLES: (必須)黑白或彩色影像
  • BBOX: (必須)圖層邊界範圍,Ex: BBOX=121.294779637179,24.9702518421948,121.331598927168,25.0116923344645
  • CRS: (必須)坐標系統(用於1.3.0版本以上)
  • SRS: (必須)坐標系統(用於1.1.1版本以下)
  • FORMAT: (必須)輸出地圖格式,預設為"image/png"
  • WIDTH: (必須)輸出地圖寬度
  • HEIGHT: (必須)輸出地圖高度
  • BGCOLOR: 背景顏色,預設為"FFFFFF"
  • TRANSPARENT: 透明度(當FORMAT為"image/png"、"image/tiff"時才會生效)
  • EXCEPTIONS: Exception的格式,預設為xml
  • TIME: 圖層服務時間,可以輸入單一時間或時間區間,Ex: "TIME=2016-01-01T10:05:23Z", "TIME=2016-01-01/2016-02-01",會找到單一時間或時間區間內最接近的圖層服務。

WMTS

WMTS為網際網路地圖圖磚服務(Web Map Tile Service),通常提供大範圍高品質的圖提供底圖之用,並且以圖磚的方式儲存及呈現。

↓ 圖磚的儲存格式如下,由左上做為起始,向右向下依序計算為第幾格圖磚
https://ithelp.ithome.com.tw/upload/images/20201001/20130604DRlHgUZTWa.jpg

(資料來源:內政部國土資訊系統標準制度入口網站 網際網路地圖圖磚服務共同作業準則第二版)

我們來用國土測繪中心的wmts服務,打開後的xml如下。

https://ithelp.ithome.com.tw/upload/images/20201001/20130604JjQNiItLBJ.jpg

Url填寫方式: "https://wmts.nlsc.gov.tw/wmts
/EMAP/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}",Style填default就好,至於圖層名稱及TileMatrix則要去xml中尋找。

↓ 套用 國土測繪中心 台灣通用版電子地圖

L.tileLayer('https://wmts.nlsc.gov.tw/wmts/EMAP/default/GoogleMapsCompatible/{z}/{y}/{x}', {
            maxZoom: 18,
            id: 'EMAP'
        }).addTo(LMap);

↓ 通用版電子地圖
https://ithelp.ithome.com.tw/upload/images/20201001/20130604mVJbUjY9Em.jpg

↓ 地質敏感區

L.tileLayer('https://wmts.nlsc.gov.tw/wmts/GeoSensitive/default/GoogleMapsCompatible/{z}/{y}/{x}', {
            maxZoom: 18,
            id: 'GeoSensitive'
        }).addTo(LMap);

https://ithelp.ithome.com.tw/upload/images/20201001/20130604baBy87keb1.jpg

↓ 1/5000圖幅框

L.tileLayer('https://wmts.nlsc.gov.tw/wmts/MB5000/default/GoogleMapsCompatible/{z}/{y}/{x}', {
            maxZoom: 18,
            id: 'MB5000'
        }).addTo(LMap);

https://ithelp.ithome.com.tw/upload/images/20201001/20130604i2oDMFYASr.jpg

↓ 土石流潛勢溪流

L.tileLayer('https://wmts.nlsc.gov.tw/wmts/MUDSLIDE/default/GoogleMapsCompatible/{z}/{y}/{x}', {
            maxZoom: 18,
            id: 'MUDSLIDE'
        }).addTo(LMap);

https://ithelp.ithome.com.tw/upload/images/20201001/20130604HADvFrrH95.jpg

↓ 村里邊界

L.tileLayer('https://wmts.nlsc.gov.tw/wmts/Village/default/GoogleMapsCompatible/{z}/{y}/{x}', {
            maxZoom: 18,
            id: 'Village'
        }).addTo(LMap);

https://ithelp.ithome.com.tw/upload/images/20201001/20130604jD59GoKKOG.jpg
大家中秋連假沒事可以在家自己玩看看~


今天輕鬆一下,明天要繼續重回JS的懷抱囉!
不管了,烤肉先吃起來!/images/emoticon/emoticon31.gif


上一篇
[5-4] 環域查詢 - 完結篇
下一篇
[6-2] KML & GeoJSON - 以Leaflet KML layer plugin實現
系列文
《你的地圖會說話? WebGIS與JavaScript的情感交織》30

尚未有邦友留言

立即登入留言