iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 12
0
Modern Web

WebGIS入門學習 - 以Openlayers實作系列 第 12

Day 12. WebGIS加載自行發布之wms服務、圖層開關與定位

銜接昨天的圖層清單功能,今天略過前言,直接進入主題

今天的大綱

  1. 圖層資料庫建立
    • (Day 11) 1-1. 建立Database Schema
    • (Day 11) 1-2. 將欲載入的圖層建進資料庫
  2. 圖層列表WebService撰寫
  3. 地圖多元數據載入
    • (Day 11) 3-1. 資料的整理與準備
    • (Day 11) 3-2. 建立html頁面
    • (Day 11) 3-3. 撰寫相關js、介接WebService、顯示圖資資料列表
    • (Day 11) 3-4. 利用Openlayers的api將圖資載入在地圖上
    • 3-5. WebGIS加載自行發布之wms服務
    • 3-6. 撰寫開關圖層與定位功能
    • 3-7. 成果展示

3-5. WebGIS加載自行發布之wms服務

請參考之前一系列的文章來進行地圖服務的發布:

首先,先利用QGIS來變更Symbology樣式,把它弄得好看一點,避免圖層套疊時會被影響到
https://ithelp.ithome.com.tw/upload/images/20200921/20108631GBcL7cfu92.png

利用QGIS Server發布WMS服務,並測試服務是否發布成功
http://localhost/qgis/wms?map=COUNTY.qgs&SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&BBOX=-63389.91393591411178932,2355298.70520541677251458,577495.17486012959852815,2850730.74341383622959256&SRS=EPSG:3826&FORMAT=image/png&LAYERS=COUNTY_MOI&WIDTH=1400&HEIGHT=1000
https://ithelp.ithome.com.tw/upload/images/20200921/20108631l5MZ98EgM4.png

測試成功後,我們可以依據介接的URL來調整我們圖台的功能,多了map的參數、修正WMS介接。

if (json.DataType === "WMS") {
    var Layer_split = json.LayerVisibleCode.split('/');
    source = new ol.source.TileWMS({
        url: json.DataURL,
        params: {
            'map': Layer_split.length === 2 ? Layer_split[0] : '',
            'LAYERS': Layer_split[Layer_split.length - 1],
            'TILED': true,
            'FORMAT': 'image/png',
            'VERSION': '1.1.1'
        },
        serverType: 'geoserver',
        transition: 0
    });
}

介接成功!
https://ithelp.ithome.com.tw/upload/images/20200921/20108631B4zJ6oZ5RG.png

3-6. 撰寫開關圖層與定位功能

現在已經建立好頁面了、也將圖資載入地圖了,接下來就要寫開關圖層(設定透明度)功能toggleTocLayer()與圖層定位功能zoomTocLayer()

// 開關圖層功能,每次操作都要儲存在TOCArray內
function toggleTocLayer(layerid, checkbox) {
    if ($(checkbox).prop("checked")) {
        map.e_getLayer(layerid).setOpacity(1);
        console.log("open layer:" + layerid);
        TOCArray.filter(i => i.LayerID === layerid)[0].OpenOpacity = "1";
    } else {
        map.e_getLayer(layerid).setOpacity(0);
        console.log("close layer:" + layerid);
        TOCArray.filter(i => i.LayerID === layerid)[0].OpenOpacity = "0";
    }
}

// 定位圖層功能
function zoomTocLayer(layerid) {
    // 抓layer的extent
    var extent = map.e_getLayer(layerid).getSource().getExtent();
    // 利用extent去zoomin
    map.getView().fit(extent, map.getSize());
}

3-7. 成果展示

最後把我們載入的9個圖層逐一顯示如下

- 1 2 3
1 各級學校範圍圖 縣市界 段籍圖
2 土石流潛勢溪流影響範圍圖 土石流潛勢溪流基本資料 iTaiwan熱點熱區圖
3 iTaiwan熱點聚合圖 水域區域 GPX測試資料

https://ithelp.ithome.com.tw/upload/images/20200921/201086315I5fzzK9ek.png


小結

今天的功能很簡單,但這兩天的開發內容需要花時間理解吸收,不過大家有沒有發現學到了不少呢?

  1. 學會建立基本的Database Schema。
  2. 學會建立資料庫的資料。
  3. 學會如何撰寫WebService。
  4. 學會在前端介接WebService。
  5. 學會如何接WMS、WMTS、WFS等地圖服務。
  6. 學會如何處理Geojson、GPX、KML等格式的資料。
  7. 學會如何利用資料自動產製熱點圖、群聚圖。
  8. 學會如何介接自己發布的地圖服務。
  9. 學會控制圖層的套疊。
  10. 學會如何利用Layer的Extent去移動地圖範圍。

明天我們跳脫圖台又來到了不寫程式改來學知識系列,來了解坐標系統的參數意義,並利用套件實作坐標轉換~


上一篇
Day 11. WebGIS多元數據載入與圖層列表WS
下一篇
Day 13. 今天不寫程式改來學知識 #2:常用的坐標系統與坐標轉換 proj4
系列文
WebGIS入門學習 - 以Openlayers實作30

尚未有邦友留言

立即登入留言