本小節將呈現系同時作完成後的地理視覺化成果，透過前幾節資料的整理以 及視覺化函式處理過後的成果，依據不同居住環境品質的構面進行展現。表 26 整理Leaflet.js 函式庫中 Canvas 輸出與傳統輸出上（overlay）的 HTML 差異，在 傳統匯出向量物件時，會根據物件數量生成對應之 path 物件，可從表中示意圖 發現，path 間為獨立物件（如有定義 img 物件則會生成 img 物件），而Canvas 輸 出方法只生成單一 Canvas 物件。若將更多圖層加入，差距數量更大，本研究網 站系統考量後續圖層疊加之複雜性，後續圖層成果皆採用 Canvas 輸出方式進行 處理。
71
表 26 本研究 Canvas 與 SVG 輸出比較
比較項目 Canvas 傳統輸出（以SVG 為例）
Leaflet 參數設定 preferCanvas: true preferCanvas: false（預設）
輸出DOM 元素 <canvas> <SVG>的<path>
整體輸出件數 1 按物件數量，本例中為臺北
市鄰里數量總和 相同區域示意圖
（以臺北市村里 人口資料為例）
多圖層輸出件數
1 按物件數量，為下列示意之
五個向量圖層疊加之物件數 量總和。
多圖層疊加示意
（以人口、公害、
學校與加油站圖 層為疊加案例）
資料來源：本研究整理。
72
安全性圖層的成果
以臺北市住宅竊盜點位、汽車竊盜與事故點位座標三個治安性資訊作為呈現 範例，圖層視覺化使用 heatmap 的方式呈現犯罪與事故熱區（如圖 24A、B、C 所示）。土壤液化資料因受限於資料釋出的格式（GeoJSON）與型態，以分層設 色之面量圖作為設計呈現（如圖 24D 所示）。臺北市歷年積水紀錄採用面量式設 計，並配合時間欄位實現不同時間尺度之淹水範圍（如圖 24E 所示）。
左側資訊欄呈現與構面相關之簡介以及圖層之介紹，右側地圖區域則按使用 者之選擇圖層呈現。熱區圖主要可調整熱區範圍，而土壤液化只可調整透明度，
歷年積水可透過介面範圍拖曳來挑整時間區間，篩選符合區間之區域顯示，並且 透過「操控地圖」可獲取較詳細的深淺資訊（如圖 24D 所示）。
A.住宅竊盜點位成果 B.汽車竊盜點位成果
C.交通事故點位成果 D.歷年積水紀錄成果
E.土壤液化潛勢成果
圖 24 安全性圖層的成果，本研究整理。
73
健康性圖層的成果
健康構面採用三種指標與其資訊，分別為公害點位（環境衛生）、醫院分布
（醫療設施）與加油加氣站點位（鄰避設施）三個圖層資料。其中公害與醫院使 用分類設色的方法呈現不同類別點位的分布（如圖 25A、B 所示），加油加氣設 施則使用buffer 的方式，以點位為圓心呈現動態距離範圍（如圖 25C 所示）。
醫院圖層中以大型醫療院所與小型診所作為分類依據；公害案件則以案件汙 染分類作為分類依據。加油加氣點位以 icon 的呈現方式設計，使用者可透過調 整類別（如圖 25A、B）或調整範圍與顏色參數（如圖 25C），來決定想關注的 範圍與類別分布。圖層輸出上，由於醫療院所與公害案件屬於件數較多而又無簡 括化的圖層，因此在canvas 輸出上有相當顯著的效能效果。
A.公害案件分布成果 B.醫療院所位置成果
C.加油加氣點位成果
圖 25 健康性圖層的成果，本研究整理。
74
寧適性圖層的成果
學校設施（教育設施）與公園綠地（公共設施）為開放空間的指標圖層，社 經資料利用村里人口（居住密度）與村里平均薪資（所得）作為示範圖層。學校 使用分類設色的方法呈現不同類別點位（學校分級，如圖 26A）方式呈現學校位 置，公園綠地由於面積影響因素較重，後續捨棄點資料型態，藉由mapbox 加值 OpenStreetMap 的公園類別（park），介接其 WMS 作為呈現方式（如圖 26B 所 示），其地圖樣式藉由mapbox studio 的功能進行設定，於使用者端暫時無法進行 調整。社經面量資料則使用分層設色的方式呈現面量圖層（如圖 26C、D 所示）。
操作功能上大致與第五節介紹過，學校分級使用教育部所使用之學校分級作 為分類操作依據（如圖 26A）。面量圖上可讓使用者選擇顏色的喜好與不同的分 級方法、級距，並且可調整透明度方便使用者欲疊加更多圖層時顯示，如圖 26C、
D 所操作之成果。
A.各級學校點位成果 B.公園綠地範圍成果
C.村里人口總數成果 D.村里平均薪資成果
圖 26 寧適性圖層的成果，本研究整理。
75
便利性圖層的成果
便利性構面主要以交通方便性做為參考資料，實踐捷運路網與站體之點位分 布。捷運路網依照臺北市捷運所規範之顏色代碼進行分類設色，站體點位結合 buffer 功能作為距離參考（如圖 27A 所示）。微笑單車（youbike，或稱 Ubike）
站點介接 PTX 即時資訊，除了呈現站點分布點位，試作即時資訊呈現，使用者 可藉由地圖操控功能掌握即時車輛資訊（如圖 27C 所示）。
使用者在操作相關圖層時，除了捷運站點為之buffer 參數調整，其餘圖層無 法進行客製化的操作，較為特別的為微笑單車站點，透過開關方式，系統會在產 生圖層時重新抓取來源的資料進行更新動作，因此重新開啟圖層能更新微笑單車 站點之即時資訊（按照來源資料之更新發布頻率），詳細資訊可透過操作地圖過 場觸發即可顯示出該站資訊（如圖 27C 所示）。
A.台北捷運站數成果 B.台北捷運路線成果
C.微笑單車站點成果
圖 27 便利性圖層的成果，本研究整理。
76
全部圖層的成果
全部圖層頁面無議題與構面資訊呈現，此頁面是設計給使用者可以自行選擇 所需的圖層進行參考與操作，使用者可以透過圖層控制列控制本系統網站之所有 圖資，調整其顯示參數來滿足自己關注的居住品質因子與交互可能的視覺化關係
（如圖 28 所示）。
圖 28 是使用住宅竊盜點位、土壤液化潛勢、台北捷運路線與微笑單車站點 作為示範，透過打開「操控地圖」功能，使用者可藉由滑鼠獲取圖面資訊之屬性 資料，顯示模式包括彈出效果與資訊視窗（info window），並參考圖例輔助來了 解地圖資訊之呈現。
圖 28 全部圖層的成果，本研究整理。
77
使用性評估
使用性（usability），又被翻譯成優使性、易用性、可用性等名詞。使用性在 國際標準組織所制定標準（ISO9241-11）中定義為在特定使用環境中，特定的使 用者能達到指定目標的有效性、效率與滿意度。在使用性相關研究中，Jakob Nielsen 曾於文章中提到使用性被五種構面給定義：可學習性 （Learnability）、效 率 （Efficiency）、可記憶性（Memorability）、錯誤（Errors）與滿意度（Satisfaction）。 鑒於製圖技術逐漸改變，地圖介面與使用者操作也受到影響。透過分析網路地圖 的使用性，從網路地圖的有效性、有用性、使用者滿意度出發，修正與建構於評 量網路地圖的使用性指標（蔡育棋，2013）。