iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 17
0
Modern Web

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

Day 17. WebGIS 的 Popup 點選圖面屬性顯示

前言

昨天我們完成了全台即時水位與水位站基本資料介接的功能,從圖面上可以一目了然看出哪些地方的水位站有超過警戒值、哪些沒有,但由於圖面上沒有顯示測站的名稱 (若有顯示也會造成整個圖面混雜),所以目前只能達到以文查圖、而不能以圖查文

為了讓使用者也能點選地圖的Symbol也可以得到測站相關資訊,開發Popup功能應該是最為整潔與直覺的方式 (畢竟以前開發有些人跟我說過,為什麼我們的圖台不能像google map一樣直接點選icon顯示詳細資料? 阿有些架構就是不能阿,原本就有identify功能要有所取捨,跟你解釋了又不聽,兩個都要阿不然你自己來開發阿

Popup功能建置

Popup顯示的界面本次採用Bootstraptooltip樣式,根據 Bootstrap的技術文章 上說明:

Tooltips rely on the 3rd party library Popper.js for positioning. You must include popper.min.js before bootstrap.js or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper.js in order for tooltips to work!

jQuery之前我們已經載入過了,現在要連帶 popper.js 一起載入,前後順序也要注意。

<link type="text/css" href="css/Plug_in/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="js/Plug_in/jquery-3.5.1.js"></script>
<script type="text/javascript" src="js/Plug_in/popper.min.js"></script>
<script type="text/javascript" src="js/Plug_in/bootstrap.min.js"></script>

首先,先在主頁面 map.aspx 內新增一個popup用的div

<div id="popup"></div>

接著於 js/init.js 建立popup,並透過 .on 綁定 click 事件,點選圖面得到pixel坐標、callback回傳pixel選到的feature,將popup的位置設在feature上,並設定popup的參數和函式 popover 顯示。

// 建立popup
var popup = new ol.Overlay({
        element: document.getElementById('popup')
    });
map.addOverlay(popup);

// display popup on click
map.on('click', function (evt) {
    var element = popup.getElement();
    $(element).popover('dispose');
    var feature = map.forEachFeatureAtPixel(evt.pixel,
            function (feature) {
            return feature;
        });
    // 若只抓水位資料圖層顯示popup
    // if (Object.values(map.e_getLayer("weterlevelLyr").getSource().getFeatures()).indexOf(feature) >= 0) {
    if (feature) {
        popup.setPosition(evt.coordinate);
        //加了container,popup才會跟著地圖走
        $(element).popover({
            container: element,
            placement: 'top',
            animation: false,
            html: true,
            content: feature.info
        });
        $(element).popover('show');
    } else {
        $(element).popover('dispose');
    }
});

設定當滑鼠游標指到 feature 上,游標改為點選的圖示。

// change mouse cursor when over marker
map.on('pointermove', function (e) {
    var element = popup.getElement();
    if (e.dragging) {
        $(element).popover('dispose');
        return;
    }
    var pixel = map.getEventPixel(e.originalEvent);
    var hit = map.hasFeatureAtPixel(pixel);
    map.getViewport().style.cursor = hit ? 'pointer' : '';
});

設定feature的info,popup會依照info顯示資訊。

var pointfeature = helper.transOlGeometry_4326to3857(new ol.Feature({
            geometry: new ol.geom.Point([obj[i].Longitude, obj[i].Latitude])
        }));
pointfeature.info = '測站:' + obj[i].StationName + "</br>目前水位高度:" + obj[i].WaterLevel + " m";

最後,依據資料的長度設定 Popup info 框的寬度

.popover-body {
    width: 160px;
}

Popup頁面示意圖:

https://ithelp.ithome.com.tw/upload/images/20200927/201086315eArLn0zQ0.png

小結

今天學會如何顯示Popup的資訊,達到 以文查圖以圖查文 雙向查詢的目標。
整個系列經過這麼多天不同介接方式的練習,大家應該對於介接資料非常的熟悉了吧!明天又是讓大家腦袋休息放鬆的 不寫程式改來學知識 系列,讓我們來看一下現在 有哪些好用的圖台 可以提供大家開發時的參考。


上一篇
Day 16. 全台河川水位即時資料介接
下一篇
Day 18. 今天不寫程式改來學知識 #4:好用的OpenData與WebGIS網站
系列文
WebGIS入門學習 - 以Openlayers實作30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言