本節將呈現地圖主題圖層運作之過程與設計流程，圖 12 顯示圖層處理之流 程步驟，與圖 13 呈現操作函式之相關關係架構，簡易呈現函式間的運作連結。
基礎資料由資料管理物件提供，透過本節所實作之函式進行相關參數設定，產生 圖層資料匯出。
圖 12 圖層處理流程圖，本研究繪製。
圖 13 圖層函式架構圖，本研究繪製。
44
圖層物件參照
從資料管理物件中，.layer 變數將會指向更新函式所產生的圖層，透過資料 管理物件中的.layer 屬性判別，可以於不同情況下對於指定資料所對應的圖層做 出更新、銷毀與初始化的動作。關於對應資料由哪一個產生函式，藉由記錄檔自 動產生對應的程式碼，少數較特別的資料，也是藉由映射的方式產生，只是記錄 檔紀錄的函式名稱較為特別，但原理上相同。.layer 屬性傳遞的為參照值（pass by reference），藉由對於相同圖層的參照，以確保地圖容器中該圖層的存在只有一個，
透過物件的管控以及Leaflet 對於 layar 類別的生成機制，達成上述產生、更新與 銷毀的操作。
圖層產生函式
產生函式與更新函式差異在於產生函式本身並不會直接獲取 DOM 的回傳 參數，產生函式主要在於接收傳入的參數產生對應的Leaflet layer 物件，並回傳 該物件。更新函式主要在於獲取DOM 的值，再傳入產生函式產生對應參數的圖 層。
因應特定的視覺方法只有特定的資料型態才能使用，產生函式中的分類即依 據空間資料型態，撰寫對應的視覺化方法。函式中利用傳入參數作為樣式調整的 依據，並自行撰寫或引用已開源之函式庫支援，分別開發出各項功能。
表 14 為本研究整理撰寫之功能（部分程式碼過長，請詳見附錄，示意參見 表 14），分別為本研究使用的功能名稱，程式碼中所命名的函式名稱與傳入參數
（以myX 為命名原則），以及該功能所使用到的套件函式庫名稱，最後是功能的 簡易敘述。
以buffer 功能為例，產生函式的命名為 mybuffer，傳入之參數為資料物件、
buffer 範圍大小與視覺化樣式，其中 buffer 範圍大小為更新函式傳遞頁面上更動 的參數，視覺化樣式為包含頁面上更動的透明度參數的 L.geoJSON 類別樣式，
於 mybuffer 函式內部只負責將範圍與樣式套用於 L.geoJSON 類別的圖層上，並 將圖層指派給資料管理物件的.layer 屬性。
45
表 14 圖層產生函式整理
功能名稱 函式名稱（傳入參數） 應用套件 功能概述
buffer mybuffer(資料、範圍、樣 式)
turf.buffer 利用turf.js 的功能實作 buffer 的效果，可自定義範圍半徑，產生 對應之polygon。
heatmap myheat( 資 料 、 欄 位 名 稱、樣式)
Leaflet.heat 利用Leaflet.heat 套件，可產生以點資料為中心的渲染圖層。
cluster mycluster(資料、欄位名 稱、樣式)
Leaflet.markercluster Leaflet.markercluster 套件的使用，將點資料聚集成群組的方式，
形成圖層。
category
mycategory(資料、欄位 名稱、資料類別、類別陣 列、顏色陣列)
Leaflet.js 使用Leaflet.js 內部自定義功能與圖層資料結構進行樣式自定義操 作，按傳入參數更改輸出資訊。
symbol mycircle(資料、欄位名 稱、樣式)
Leaflet.js 使用Leaflet.js 內部自定義功能與圖層資料結構進行樣式自定義操 作，按傳入參數更改輸出資訊。
choropleth
mychoropleth(資料、欄 位名稱、分級數目、分級 方法、顏色陣列、樣式)
Leaflet-choropleth Leaflet-choropleth 是將 Leaflet.js 對 geoJSON polygon 資料結構進 行一部份自定義，使製作面量圖時可傳入更直觀的參數操作。
46
timeline
（ choropleth 變 形）
myflooded(資料、欄位名 稱、時間欄位、時間區 間、單位、顏色陣列、分 級數目)
jQuery UI+ Leaflet-choropleth
此功能為choropleth 功能之變形，利用 jQuery UI 於前端製作雙切 換介面，可另外傳入時間區間，利用Leaflet.js 定義之 geoJSON 資 料結構進行樣式與符合時間之資料篩選。
youbike （ symbol 變形）
myyoubike(資料、欄位 名稱、樣式)
Leaflet.js 此功能為Symbol 功能之變形，利用 Leaflet.js 定義之點資料結構 進行個別樣式設定。由於 youbike 資料為即時介接，因此匯入結 構與一般symbol 功能有所差異。
MRT（symbol 變 形）
mycolor Leaflet.js 此功能為Symbol 功能之變形，利用 Leaflet.js 定義之 geoJSON 資 料結構進行個別樣式設定。
general
L.geoJSON、L.tilelayer、
L.maker 等
Leaflet.js 別於上述函式，general function 主要在產生底圖或是輔助圖資，
其本身樣式固定，因此不同於其他產生函式形式。此類型多引用 Leaflet.js 定義之方法完成，像是 L.geoJSON、L.tilelayer 等。
資料來源：本研究整理
47
圖層初始化函式
使用來初始化圖層物件的相關函式，由於有關圖層產生的文件物件模型回傳 參數會由更新函式處理，因此初始化函式只設定資料管理物件其他變數，圖層產 生仍然藉由呼叫更新函式完成。與之相關的函式有管理所有資訊之初始的函式：
initialize function，和單純初始化圖層的函式：add layer function。
1. initialize function：所有資訊之初始化，相關資料參數需傳入，如圖 14。
圖 14 initialize 函式示意，本研究繪製。
2. add layer function：只將匯出完成之圖層添加入地圖中，如圖 15。
圖 15 add layer 函式示意，本研究繪製。
圖層更新函式
主要圖層產生的中樞函式組，絕大多數圖層產生會使用。與產生函式的差異 在於更新函式主要在於獲取文件物件模型的值，再傳入產生函式產生對應參數的 圖層。換句話說，使用者操作時改變的參數變化，會透過更新函式來更新並呼叫 產生函式重新產生對應參數的圖層。因此，更新函式會對應到相呼應的產生函式，
表 15 圖層更新函式整理為本研究整理撰寫之更新函式（部分程式碼過長，請詳 見附錄）。
function initialize(id, map, data, layer_name, legend, urlname
= "datas/datalist.csv") {
if (!loadCSV(urlname)) { console.log('failed.');
return false;
} else {
……中間省略 };
};
//Leaflet layer add
function addLayer(map, layername) { map.addLayer(layername);
};
48
表 15 圖層更新函式整理
功能名稱 函式名稱（傳入參數） DOM 接收參數 功能概述
buffer updateBuffer(DOM 圖 層 ID、地圖容器、資料、圖案)
範圍、顏色、透明度 根據DOM 傳入之參數，呼叫 mybuffer 產生新的 buffer 圖層，指派給資料管理物件.layer。
heatmap
updateHeat(DOM 圖層 ID、
地圖容器、資料、資料欄位 名稱)
半徑 根據DOM 傳入之參數，呼叫 myheat 產生新的 heatmap 圖層，指派給資料管理物件.layer。
cluster
updateCluster(DOM 圖 層 ID、地圖容器、資料、資料 欄位名稱)
無 呼叫mycluster 產生新的 cluster 圖層，設定單點 icon 型 式，並指派給資料管理物件.layer。
category
updateCategory(DOM 圖層 ID、地圖容器、資料、資料 欄位名稱)
分類類別 根據 DOM 傳入之參數，呼叫 mycategory 產生新的 category 圖層，指派給資料管理物件.layer。
symbol
updateCircle(DOM 圖 層 ID、地圖容器、資料、資料 欄位名稱)
顏色 根據DOM 傳入之參數，呼叫 mycolor 產生新的 color 圖 層，並指派給資料管理物件.layer。
49
根據 DOM 傳入之參數，呼叫 mychoropleth 產生新的 choropleth 圖層，並指派給資料管理物件.layer。 生新的flooded 圖層，並指派給資料管理物件.layer。
youbike （ symbol
50
圖層銷毀函式
使用來將圖層物件銷毀掉的功能函式。除了將使用者介面呈現的圖層消除掉，
因此函式組在清除該圖層時也會將其記憶體空間釋放，維持系統空間大小。函式 接收從使用者介面傳遞的參數變化判斷是否銷毀圖層，同時操作文件物件模型回 到無圖層顯示狀態（例：按鍵收合），所以函式中可分為單純銷毀圖層物件之函 式（例：remove layer function），也有回復原狀所有指定項目的函式（例：destroy function）。以下為本研究整理撰寫之更新函式（部分程式碼過長，請詳見附錄）： 1. destroy function：主要用於消除所有圖層所用到的儲存空間，透過一些
以定義之函式達成，如圖 16。
圖 16 destroy 函式示意，本研究繪製。
2. remove data function：用來清除在地圖容器中符合特定資料管理物件的 圖層與圖層控制相關資料，也是利用Leaflet.js 內建函式消除，如圖 17。
圖 17 remove data 函式示意，本研究繪製。
function destroyed(map) {
removeDataLayer(map, crime_home);
removeDataLayer(map, crime_car);
……中間省略
removeDataLayer(map, mrt_stop);
removeDataLayer(map, mrt_route);
removeDataLayer(map, youbike);
};
function removeDataLayer(map, data) {
if (map.hasLayer(data.layer)) removeLayer(map, data.layer);
if (map.hasLayer(data.layer2)) removeLayer(map, data.layer2);
map.removeControl(data.legend);
data.legend = L.control({
position: 'bottomright' });
};
51
3. remove layer function：較為單純，移除地圖容器中對應參照的圖層，利 用Leaflet.js 內建函式達成，如圖 18 所示。
圖 18 remove layer 函式示意，本研究繪製。