頁面動作規劃 - 地理視覺化技術應用於展示臺北市居住環境品質資料之研究

除了圖層操作動作，頁面其他動作藉由CSS 與 JavaScript 來達成簡易的互動性，本節將聚焦於網頁表層的互動動作，建構網站頁面的動作設計。圖 21 為使用者介面個區塊使用的動作效果示意圖。

圖 21 頁面動作規劃，本研究繪製。

使用者介面與使用者體驗介面動作

作為最直接接觸使用者的系統介面，版面規劃以及其操作往往最直接影響使用者的體驗感覺。本研究採用卷軸式的設計，在加強卷軸特性的推拉效果方面，

引用jquery 的 mousewheel 函式來實現。mousewheel 函式庫凸顯了區塊（section）

與區塊間的操作延遲性，一方面可以防止使用者手誤移到其他頁面，另一方面可以達到暫時固定區塊的效果。

除此之外，藉由區塊間的變換，mousewheel 函式提供了一個頁面驅動改變的動作，在這個轉換的動作中，我們可以定義許多轉場操作，像是清除頁面圖層、

關閉所有開關物件或是顯示隱藏物件等操作。表 20 將實作相關之程式碼以表格的方式作呈現，其中較為複雜的部分先行省略，可後續參考附錄。

$(document).on("keyup", function (e) {

if ($("#set_control_map").is(":checked")) {

……以下省略

$(window).mousewheel(function (e) { $("html, body").stop();

$('.layer-btn:checkbox').prop('checked', false).change();

$('.setting-btn:checkbox').prop('checked', false).change();

$('.nav,.collapse').collapse('hide');

對應導航列標籤 scrollspy

本研究製作。

for (var i = 0; i <= num_section; i++) { $("#linkbar li:eq(" + i + ")").click({

id: i

}, function (e) {

var page = e.data.id;

$("html,body").animate({

"scrollTop": $("#section" + page).offset().top })

n = e.data.id })

}

除了mousewheel 函式外，swipe 函式是負責封面與導航列互動的函式。為了使地圖容器能維持在版面上，本研究將swipe 函式用作切換不同 tile 圖層的效果應用到轉場簾幕的效果呈現，另一方面也實踐了 vector tile 的實作方法，將 GeoJSON 透過 Leaflet .VectorGrid 與 geojson-vt 函式轉換為 vector tile，除了達到視覺化效果，也配合導航列affix，將封面空間進行縮減，以呈現更大面積資訊區域。表 21 為 swipe 函式實作程式碼。

表 21 swipe 函式程式碼與功能整理

資料來源：本研究製作。

var uplay = L.vectorGrid.slicer(salary.json, vtstyle).addTo(bannermap);

var downlay = L.vectorGrid.slicer(population.JSON, vtstyle2).addTo(bannermap);

……中間省略

function bannerScroll() {

var range = ((bannerbar.offsetTop - $(window).scrollTop() + 40) /

$(window).height());

function clip() {

var nw = bannermap.containerPointToLayerPoint([0, 0]), se =

bannermap.containerPointToLayerPoint(bannermap.getSize()), clipX = nw.y + (se.y - nw.y) * range;

banner.getContainer().style.clip = 'rect(' + [nw.y, se.x, clipX, nw.x].join('px,') + 'px)';

uplay.getContainer().style.clip = 'rect(' + [nw.y, se.x, clipX, nw.x].join('px,') + 'px)';

downlay.getContainer().style.clip = 'rect(' + [clipX, se.x, se.y, nw.x].join('px,') + 'px)';

}

bannermap.on('move', clip);

clip();

};

控制功能（navigation bar）動作

導航列使用bootstrap 中 scrollspy 與 affix 套件實現向上掀起封面與標籤互動的視覺效果，實際上使導航列在後續頁面能持續至於頂端，並收起封面空間，使頁面有更多空間呈現地圖元素。操作方法藉由HTML 屬性與 CSS 的 position 屬性來完成，圖 22 示意相關的 HTML 語法。

圖 22 scrollspy 與 affix 程式碼示意，本研究製作。

透過 mousewheel 套件回傳的區塊變化，導航列上的特定功能可以在指定區塊作顯示，利用CSS 與 jquery 完成顯示 HTML 元素的動作。先規劃 HTML 元素並設定其CSS display 或 visibility 屬性，藉由 jquery 或 JavaScript 轉換其 CSS 屬性。Display 與 visibility 屬性差異在於未顯示時後者會保留其區塊空間。表 22 使用表格示意實作成果。

<body data-spy="scroll" data-target=".navbar" data-offset="50"

onload="location.href='#banner'">

</div>

</header>

</body>

> <input> </li>

style="

visibility:

hidden"

$('#set_base_map').attr('styl e', 'visibility: hidden');

<li

id="set_base_map"

> <input> </li>

style="

visibility:

visible"

$('#set_base_map').attr('styl e', 'visibility: visible');

資料來源：本研究製作。

表 23 導航列右側功能動作實作整理

物件 HTML script

房價資訊

<a><input id="set_house_map" class="setting-btn"

type="checkbox" data-toggle="toggle" data-size="mini"

onchange="switchDomLayer(leafmap,estate)">房價資訊</a>

</li>

function switchDomLayer(map, data) {

if ($("#set_house_map").is(":checked")) { initialize(37, map, data, 'estate');

} else {

removeDataLayer(map, data);

};

操作地圖

底圖

導航列用HTML 屬性實現 dropdown 效果，底圖詳細切換函式於本節後段詳細說明。

資料來源：本研究製作。

<li>

<a><input id="set_control_map" class="setting-btn"

type="checkbox" data-toggle="toggle" data-onstyle="danger"

data-size="mini" onchange="switchMapControl()"> 操控地圖

</a>

</li>

function switchMapControl() {

var num_section = $("#firstlayer .mywrapper").length;

if ($("#set_control_map").is(":checked")) { for (var i = 0; i < num_section; i++) { var temp = i + 2;

……中間省略 };

} else {

for (var i = 0; i < num_section; i++) { var temp = i + 2;

……中間省略 };

};

<li id="set_base_map" style="visibility: hidden"

class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-wrench"></span>底圖</a>

</li>

資訊呈現與地圖區域動作

此區域的動作較簡單，資訊區塊主要為靜態呈現文字與圖片。相較於資訊區域，地圖區域在整體版面結構上是屬於第二層與第三層，地圖區域本身是藉由 Leaflet.js 函式庫提供的地圖容器實現。地圖容器本身通常具有平移與縮放的功能，

在本研究系統頁面架構中，地圖為在底層，必須利用CSS 或者是 JavaScript HTML DOM EventListener 來操作不同階層的物件。本研究實作了兩種方式後發現原生地圖容器提供的效果較佳，因此使用 CSS 的 point-event 屬性實作跨層操作。當 HTML 元素 point-event 屬性被設為 none 時，滑鼠等頁面操作工具將無法控制該元素，操作工具所傳遞的參數會被下層point-event 屬性為 auto（預設為 auto）的元素接收。利用此一特性的操作，可以完成跨層操作的視覺效果，本系統將此設計成開關（checkbox）的方式，使用者可藉由開關決定是否要操作地圖容器中的物件。

Leaflet.js 地圖容器中本身的縮放（scrollWheelZoom）與點擊平移（dragging）

為預設開啟（true），在上層 HTML 的 point-event 屬性被設為 none 時，就可以使用。地圖容器中除了原本預設的動作可以使用外，圖層相關的事件監聽器

（eventlistener）也可以被觸發，像是 popup 與 info window 等功能。

傳統電子地圖受限於互動區域限制，資訊區塊需考慮整體比例空間，而分層式的結構能產生整頁式的資訊呈現，也可較彈性的調整區域比例，達到互動性之提升效果。配合CSS3 能夠產生許多視覺效果，譬如漸層（gradient）、變形（3D、

2D Transforms）、轉場效果（Transitions）、動畫（Animation）等，減少 JavaScript 的使用，間接提升效能。在頁面區塊「環境居住概述」中使用到漸層、變形與轉場效果實作翻轉的視覺效果，而資訊類型的視覺效果藉由版面比例的自由性，可於電子地圖上作較多的發揮。圖 23 為本研究實作之成果之一。

底圖與輔助圖層動作

底圖區域利用 dropdown 屬性將各種 WMTS 圖資放入。主要資訊來源使用 mapbox 所提供的圖資作為底圖，包含衛星影像、街道、黑白底圖等。配合底圖單一的特性，input 類型選用多選一的 radio 作為參數控制，JavaScript 函式的設計有別於一般圖層控制的操作模式，適性於Leaflet WMS 語法與 mapbox API 的規範做為基礎，依據回傳參數進行動態變更底圖的操作。表 25 示意不同底圖切換呈現與程式碼實作示意。

表 25 底圖與輔助圖層功能動作實作整理主要切換函式

底圖圖層

底圖樣式 Input value 圖片

衛星影像

value="mapbox.satellite"

街道地圖

value="mapbox.streets"

街道衛星

value="mapbox.streets-satellite"

$("input[name=baseOption]").click(function () { removeLayer(leafmap, mainlayer);

mainlayer = L.tileLayer(URL, { maxZoom: 18,

attribution: 'demo' +

}).addTo(leafmap);

});

綠地景觀

value="mapbox.run-bike-hike"

黑底底圖

value="mapbox.dark"

白底底圖

value="mapbox.light"

輔助圖資

圖資類型控制函式圖片

區界圖

onchange="AuxiliaryMapControl ('set_ad_map_district',leafmap, district)"

里界圖

onchange="AuxiliaryMapControl ('set_ad_map_town',leafmap, town)"

資料來源：本研究繪製。

在文檔中地理視覺化技術應用於展示臺北市居住環境品質資料之研究 (頁 67-78)