架構概要
顏色比起文字與圖案，通常最直接帶來視覺刺激。以居住環境品質四種構面 的特色，簡易的建立相關主題色系，作為網頁系統中相關主題之套用色，方便使 用者辨別。介面色彩規範如表 16，以 RGB 作為螢幕觀看時顯色之參考，以 16 進制色碼作為設定數值（CSS3 樣式表允許多種色彩定義方式，本研究採 CSS 開 始時所規範的16 進制色碼作為使用）。
表 16 介面色彩規範
規範類別 RGB16 進制色碼
安全性 #9D343B
健康性 #73862D
寧適性 #5EA4C9
便利性 #222163
資料來源：本研究整理。
構成網頁的視覺設計要素包括頁面框架與版面配置，本研究以bootstrap.js 作 為框架實作套件。bootstrap.js 具有輕巧且完整的框架規劃（bootstrap grid system）， 網頁文件物件模型若符合 bootstrap 的類別與位置，bootstrap grid system 可以達 成內建的響應式設計，並預設對應的CSS 屬性，開發者可透過簡易的 HTML 標 籤完成版面配置的效果。在版面內容位置的規劃上，根據資料視覺化需求，將畫 面實作為不同版型原型，並分成四種類型：封面版型、全版資訊版型、部分資訊 版型以及圖層與資訊版型，系統原型實際對照如表 17 所顯示，呈現四種版型之 版面配置成果。
function removeLayer(map, layername) { map.removeLayer(layername);
};
52
表 17 原型與版面設計版型規劃對照
A.封面版型
B.全版資訊版型
C.部分資訊版型
D.圖層與資訊版型
資料來源：本研究整理。
在頁面結構概念上分為三層（可參考第三章第一節）：資訊控制層、底圖層 與主題圖層，以確保不同資訊間的獨立性。實作中底圖層與主題圖層只有地圖容 器，其餘介面元素皆於資訊控制層上利用 HTML 元素進行內容設計安排，並使 用 CSS 樣式調整各內容的位置。本研究將資訊控制層劃分為多個不同區塊，規 劃上分為封面（banner，header 元素）、導航列（navigation bar，nav 元素）、圖層 控制欄（sidebar，div 元素，程式碼生成）、資訊與地圖區域（section，section 元 素），為了使地圖資訊最大化，因此將資訊區域增設透明度，並可收合圖層側欄，
功能選項集中在導航列上。封面效果因使用率考量，利用bootstrap scrollspy 的功 能結合卷軸式頁面設計，達到收合的目的。
53
資訊控制層
資訊控制層為主要資訊切換的架構規劃，圖 19 示意本網頁頁面上資訊控制 層各區域的位置，以封面版型及圖層與資訊版型作為區域示意示範，分為封面區 域、導航列、圖層控制欄、資訊欄與地圖區域（留白實作透視成果）。
原型 區域示意
圖 19 資訊控制層各區域示意，本研究繪製。
1. 封面區域：主要呈現地圖標題與研究區域。研究區域使用地圖容器配合 mapbox 的 WMS 服務與使用向量圖磚（vector tile），實現面量資料滑動 切換效果。利用Leaflet 相關套件可進行 GeoJSON 轉製為向量圖磚圖層 之過程，向量圖磚具有圖磚快速顯示之效果（資料量龐大時），也具有 原 始 向 量 圖 層 之 資 訊 。 唯 處 理 過 程 較 為 複 雜 ， 本 研 究 使 用 Leaflet.VectorGrid 與 geojson-vt 兩套件實作出研究區範圍區域以供參考。
版型框架使用header 元素與 nav 元素（導航列）區格內文 section 元素 區域，並套用bootstrap 的類別（class），供後續響應式反應控制。
2. 導航列：頁面間的連接、側欄控制按鈕、其他主要控制項目規劃區域。
區域細分為左側與右側，左側為主要頁面連結與圖層側欄開合，右側區 域以輔助性功能為主。nav 元素在 HTML5 規格為定義連結到同一網頁 其他部分或其他網頁的分項。利用 nav 元素與 bootstrap 類別規範導航 列之內容與樣式，詳細功能設計會於第五節說明。
3. 圖層控制欄：呈現與該頁面主題相關的疊加圖層，並可調整圖層呈現參
54
數。區塊預設為 div 元素區域，透過特定類別（class=”page-content-wrapper”）定義提供未來可指定之空間。由於內容須在載入圖層資料後 產生，因此相關圖層控制項目元素採JavaScript 動態產生 HTML 碼，規 範為 li 元素與特定圖層資料 id，以便於後續子元素（功能參數調整區 域）動態產生配對。透過各式input 元素實踐前端參數調整與輸入，配 合對應圖層資訊li 元素動態生成於各區塊（section 元素）之圖層控制欄 區域。
4. 資訊欄：呈現與該頁面主題之資訊內容。於各區域（section 元素）內部 利用div 元素搭配 bootstrap 類別 container 與 CSS，調整資訊欄之位置 與區塊特色內容。可於不同區域進行圖片等數位媒體之嵌入，結合 JavaScript 與 CSS 展現動態內容。
5. 地圖區域：底圖、圖層圖資、圖徵資訊等地圖要素都在此區作呈現。以 資訊控制層來看，div 與 section 上只呈現留白中空的樣式設計，使下層 的地圖圖層能顯示出來。
主題圖層與底圖層
邏輯上分為主題圖層與底圖層兩層，實作上是建立於同一個地圖容器中，利 用 Leaflet.js 提供的地圖容器載入網頁下層 div 元素中。在 Leaflet.js 的地圖容器 中 ， 圖 層 類 別 有 其 順 序 性 ， 預 設 上 的 排 序 為 ： tilesshadowsoverlaysmarkerspopups。底圖通常利用 tiles，本研究主要介 接mapbox 平台對於 OpenStreetMap 樣式加值後的 WMS 與 WMTS 的服務，其中 圖磚的輸出格式與參數採預設設定，容器對於圖層輸出的參數設定為 canvas 方 法。
圖 20 為 Leaflet.js 版本 1.0.0 的類別圖（UML Class diagram），可以看出 Leaflet.js 中不同類別的規劃架構，主題圖層主要使用 Leaflet.js 函式庫中的 L.GeoJSON 方法，將 GeoJSON 格式的資料建立起 L.Layer 的類別，繼而繼承 L.Layer 類別屬性，疊加於底圖上形成地圖資訊，其他較為特殊的圖層，也都是 使用到 L.Layer 下面的類別，因此也繼承 L.Layer 的屬性，在圖層疊加時遵守其 預設的排序規則。L.Layer 類別可使用相關函式方法進行操作，藉由 style 屬性來 調整圖層的視覺化效果，並輸出非空間之屬性資料。
55
圖 20 Leaflet UML 類別圖（Leafletjs.com）