崑 山 科 技 大 學 資 訊 傳 播 系 學 生 專 題 製 作 報 告 南 仁 湖 生 態 導 覽 網 站 製 作 指 導 教 授 : 蔡 哲 民 博 士 專 題 組 員 : 陳 書 豪 學 號 :4980C016 專 題 組 員 : 康 偉 哲 學 號 :4980C018 專 題 組 員 : 黃 振 原 學 號 :4980C039 中 華 民 國 101 年 01 月

南 仁 湖 生 態 導 覽 網 站 製 作 黃 振 原 康 偉 哲 陳 書 豪 崑 山 科 技 大 學 資 訊 傳 播 系 摘 要 本 專 題 南 仁 湖 生 態 導 覽 網 站 製 作 使 用 JavaScript 以 及 Google Map, 設 計 出 一 個 結 合 生 態 保 育 教 育 以 及 生 態 研 究 的 網 站, 其 中 環 場 影 像 讓 人 不 僅 有 身 歷 其 境 的 感 覺, 也 能 讓 使 用 者 感 受 的 南 仁 湖 的 生 態 之 美, 並 使 用 Google Map 建 立 一 個 結 合 資 料 庫 以 提 供 調 查 人 員 與 研 究 人 員 墾 丁 地 區 所 有 溼 地 的 珍 貴 生 物 資 料 查 詢 本 系 統 延 續 前 計 畫 成 果 並 依 墾 丁 國 家 公 園 之 需 求 新 增 以 下 功 能 : (1) 三 百 六 十 度 環 場 (2) 生 態 藝 廊 (3) 路 徑 物 種 查 詢 系 統, 並 針 對 三 百 六 十 度 環 場 系 統 進 行 改 良, 將 物 種 查 詢 系 統 增 加 路 徑 查 詢 和 區 域 查 詢 這 兩 大 功 能, 最 後 將 網 站 上 的 主 要 功 能 整 合 至 手 機 導 覽 APP 中 關 鍵 詞 : 南 仁 湖 生 態 導 覽 環 場 影 像 物 種 查 詢 系 統 I

目 錄 頁 數 摘 要... I 目 錄... II 表 目 錄... III 圖 目 錄... IV 一 緒 論... 1 1.1 專 題 動 機... 1 1.2 專 題 目 的... 1 二 文 獻 探 討... 2 2.1 資 料 庫 Databases Management System,DBMS... 2 2.2 地 理 資 訊 系 統 (GIS)... 2 2.2.1 地 理 資 訊 系 統 簡 介... 2 2.2.2 地 理 資 料 庫 系 統... 3 2.3 地 表 距 離 計 算 方 式... 3 2.3.1 二 度 分 帶 座 標... 3 2.3.2 大 圓 理 論... 4 2.4 路 徑 查 詢... 4 2.5 無 障 礙 網 頁... 5 2.6 圖 形 檢 索 相 關 文 獻... 5 2.6.1 PostgreSQL Geometric Functions... 5 2.6.2 Pixel Based Test... 6 2.6.3 Crossing Test... 6 三 實 作 的 程 序 與 方 法... 7 3.1 製 作 採 行 的 方 法 與 工 具... 7 3.2 系 統 架 構... 8 3.3 核 心 功 能 說 明... 15 3.4 完 成 工 作 項 目 及 結 果... 17 3.5 使 用 的 設 備 與 軟 體... 17 3.6 人 力 分 配 表... 18 3.7 進 度 甘 特 圖... 19 四 專 題 成 果 呈 現 與 討 論... 20 五 結 論 與 未 來 發 展... 25 參 考 文 獻... 26 II

表 目 錄 頁 數 表 2.1 資 料 庫 系 統 差 異 表... 2 表 3.1 species 物 種 資 料 表... 11 表 3.2 collect 採 集 資 料 資 料 表... 13 表 3.3 userdb 採 集 者 資 料 表... 14 表 3.4 extname 擴 充 欄 位 命 名... 14 表 3.5 人 力 分 配 圖... 18 表 3.6 民 國 101 年 專 題 進 度 表... 19 III

圖 目 錄 圖 2.1 PostgreSQL Geometric Functions 示 意 圖... 5 圖 2.2 Pixel Based Test 示 意 圖... 6 圖 2.3 Crossing Test 示 意 圖... 6 圖 3.1 範 本 圖 形... 7 圖 3.2 路 徑 圖... 7 圖 3.3 不 規 則 路 徑... 8 圖 3.4 查 詢 結 果... 8 圖 3.5 軟 體 系 統 圖... 8 圖 3.6 詳 細 系 統 圖... 9 圖 3.7 APP 內 容 圖... 9 圖 3.8 ER 圖... 10 圖 3.9 路 徑 查 詢... 15 圖 3.10 三 百 六 十 度 環 場 系 統 運 作 流 程 圖... 16 圖 4.1 空 照 圖... 20 圖 4.2 環 場 影 像... 21 圖 4.3 物 種 查 詢... 21 圖 4.4 手 機 APP 導 覽... 22 圖 4.5 手 機 APP 導 覽 - 南 仁 湖 簡 介... 22 圖 4.6 手 機 APP 導 覽 - 生 態 藝 廊... 23 圖 4.7 手 機 APP 導 覽 - 物 種 查 詢... 23 圖 4.8 手 機 APP 導 覽 - 查 詢 結 果... 24 IV

第 一 章 緒 論 1.1 專 題 動 機 本 網 站 是 延 續 與 高 雄 醫 學 大 學 生 物 系 合 作 墾 丁 國 家 公 園 陸 域 長 期 生 態 監 測 計 畫 ( 南 仁 湖 重 要 濕 地 長 期 生 態 監 測 ) 三 年 濕 地 生 態 物 種 保 育 計 畫, 而 製 作 此 網 站 用 來 記 錄 南 仁 湖 濕 地 周 遭 生 態, 讓 一 般 使 用 者 調 查 人 員 研 究 人 員 能 藉 由 此 網 站 取 得 當 地 的 生 態 資 料 南 仁 湖 原 是 水 稻 田, 後 來 因 稻 田 東 邊 出 水 口 被 堵 塞, 水 量 累 積 越 來 越 多, 最 終 形 成 廣 大 湖 泊 此 處 可 見 的 黃 灰 澤 蟹, 是 台 灣 特 有 種 的 淡 水 蟹, 屬 於 陸 蟹 的 一 種, 也 是 唯 一 不 須 到 海 邊 進 行 繁 殖 的 蟹 種 為 了 保 育 此 地 生 態 南 仁 湖 被 劃 為 南 仁 山 生 態 保 護 區 中, 平 常 僅 供 學 術 研 究 現 在 網 路 上 充 斥 著 許 多 只 有 固 定 資 料 的 環 境 生 態 保 育 的 網 站 [7], 因 為 這 些 網 站 的 資 料 從 第 一 次 放 上 去 後 就 幾 乎 沒 有 後 續 的 更 新, 因 此 所 提 供 的 資 料 對 於 一 般 使 用 者 及 研 究 人 員 並 沒 有 太 大 的 價 值, 不 僅 無 法 讓 民 眾 了 解 到 生 態 之 美, 對 研 究 人 員 來 說 可 能 只 看 過 一 次 就 不 會 再 造 訪 此 網 站, 再 者, 每 個 網 站 之 間 的 資 料 因 為 記 錄 格 式 沒 有 統 一, 若 要 進 行 跨 物 種 的 交 互 查 詢, 將 會 對 研 究 者 造 成 很 大 的 麻 煩 此 專 題 延 續 上 一 次 的 成 果, 前 系 統 有 以 下 功 能 : (1) 與 Google Maps 結 合 之 野 外 採 集 系 統 (2) 與 Google Maps 結 合 之 附 近 物 種 查 詢 系 統 (3) 物 種 關 鍵 字 查 詢 (4) 展 場 互 動 裝 置 (5) 三 百 六 十 度 地 面 空 拍 環 場 引 擎 (6) 結 合 日 曆 之 最 新 訊 息 管 理 系 統, 而 我 們 針 對 前 系 統 中 版 面 進 行 改 版, 使 用 與 南 仁 湖 景 色 相 近 的 綠 色 系 來 呈 現, 使 人 有 種 彷 彿 身 歷 其 境 的 感 受, 再 來 是 針 對 三 百 六 十 度 環 場 系 統 作 改 良, 並 將 生 物 物 種 查 詢 系 統 上 增 加 路 徑 查 詢 的 判 斷, 最 後 預 計 讓 整 個 網 站 頁 面 也 能 支 援 智 慧 型 手 機 ( 平 板 電 腦 ) 本 專 題 是 墾 丁 國 家 公 園 陸 域 長 期 生 態 監 測 計 畫 ( 南 仁 湖 重 要 濕 地 長 期 生 態 監 測 ) 三 年 濕 地 生 態 物 種 保 育 計 畫 中 的 第 三 個 子 計 畫, 然 而 為 了 讓 更 多 人 可 以 一 起 響 應 南 仁 湖 的 生 態 保 育, 我 們 希 望 做 出 一 個 結 合 生 態 教 育 生 態 保 育 以 及 生 物 研 究 並 結 合 觀 察 與 記 錄 為 主 的 網 站 製 作 完 成 後 可 以 讓 民 眾 能 藉 由 網 站 來 瞭 解 目 前 濕 地 生 態, 而 相 關 人 員 也 能 將 付 出 許 多 心 血 蒐 集 的 物 種 資 料 記 錄 在 網 站 的 資 料 庫 中, 最 後 計 劃 完 成 之 後, 資 料 庫 也 將 會 擁 有 墾 丁 地 區 的 所 有 濕 地 珍 貴 的 生 物 物 種 資 料, 這 對 於 研 究 人 員 來 講 將 是 一 份 很 有 價 值 的 資 料 1.2 專 題 目 的 本 研 究 之 目 的 為 製 作 完 成 南 仁 湖 濕 地 生 態 網 站 製 作 與 南 仁 湖 導 覽 APP, 具 備 以 下 功 能 : (1) 附 近 物 種 查 詢 ( 路 徑 查 詢 和 區 域 查 詢 ) (2) 關 鍵 字 查 詢 ( 結 合 GIS) (3) 野 外 採 集 資 料 輸 入 輔 助 系 統 (4) 三 百 六 十 度 環 場 (5) 支 援 手 機 之 APP 導 覽 1

第 二 章 文 獻 探 討 2.1 資 料 庫 Databases Management System,DBMS : 目 前 我 們 知 道 較 為 常 用 的 資 料 庫 [22] 系 統 有 MySQL PostgresSQL Microsoft Access SQL Server FileMarker Oracle Sybase SQLite 等, 其 中 MySQL PostgresSQL 都 為 開 放 原 始 碼 的 關 聯 式 資 料 庫 管 理 系 統 而 且 開 發 成 本 低, 經 由 討 論 後 由 於 PostgresSQL 有 一 些 專 門 支 援 結 合 Google Maps 之 物 種 地 理 交 互 關 係 調 查 系 統 的 功 能, 在 其 他 SQL 指 令 支 援 上 也 比 MySQL 全 面, 所 以 我 們 決 定 使 用 PostgresSQL 為 我 們 主 要 的 資 料 庫 管 理 系 統 Microsoft Access 優 點 : 程 式 安 裝 及 設 定 使 用 方 法 簡 易, 如 表 2.1 缺 點 : 資 料 安 全 性 低 同 時 使 用 人 數 有 限 制 資 料 庫 物 件 及 大 小 有 限 制, 如 表 2.1 Oracle 優 點 : 方 便 了 查 詢, 在 數 據 量 大 時 排 序 更 易 查 詢, 如 表 2.1 缺 點 : 查 詢 時 需 要 進 行 重 新 排 序, 減 少 了 效 率 物 理 索 引 缺 點 建 立 索 引 效 率 低, 只 能 建 一 個, 如 表 2.1 表 2.1 資 料 庫 系 統 差 異 表 優 點 缺 點 對 SQL 語 法 的 支 執 行 速 度 沒 PostgreSQL 援 更 加 全 面 MySQL 快 免 費 Microsoft Access 使 用 者 介 面 易 操 作 要 收 費 對 SQL 語 法 的 MySQL 執 行 速 度 快 支 援 不 足 執 行 速 度 快 Oracle 要 收 費 可 處 理 龐 大 資 料 2.2 地 理 資 訊 系 統 (GIS) GIS 是 結 合 地 理 與 地 圖 學 所 開 發 出 來 的 地 理 資 訊 系 統 [17], 具 備 整 合 各 類 不 同 空 間 資 料 的 能 力, 可 以 比 較 出 任 何 時 間 與 任 何 地 點 的 環 境 差 異, 是 一 個 包 含 不 同 空 間 與 不 同 時 間 的 資 訊 系 統 2.2.1 地 理 資 訊 系 統 簡 介 地 理 資 訊 系 統 現 代 電 腦 科 技 空 間 分 析 及 地 圖 技 術 結 合 之 產 物, 現 就 其 定 義 組 成 及 系 統 名 稱 加 以 說 明 何 謂 地 理 資 訊 系 統 (Geographic Information System,GIS) 之 定 義 2

可 分 三 部 分 來 訂 定 : 1. 以 處 理 對 象 而 言 --- 空 間 資 訊 及 其 相 關 連 之 屬 性 2. 以 處 理 之 式 而 言 --- 電 腦 化 之 輸 入, 處 理, 分 析 輸 出, 電 腦 化 3. 以 運 用 功 能 而 言 --- 決 策 管 理 支 援 綜 合 而 言, 地 理 資 訊 系 統 是 一 電 腦 化 系 統, 針 對 空 間 及 其 屬 性 資 訊 建 立 資 料 庫, 並 以 輸 入 處 理 分 析 及 輸 出 四 大 部 分 功 能, 來 作 為 決 策 及 管 理 支 援 GIS 之 組 成 可 依 狹 意 與 廣 義 之 系 統 分 別 說 明, 即 系 統 本 身 及 系 統 與 其 操 作 環 境 地 理 資 訊 系 統 之 特 性 是 在 空 間 資 訊 處 理, 其 包 括 了 二 度 ( 平 面, 多 為 傳 統 之 地 圖 ) 三 度 ( 立 體 ) 及 四 度 ( 空 間 時 間 ) 之 資 訊 1. 系 統 本 身 : 資 料 庫 軟 體 硬 體 2. 系 統 環 境 :GIS 系 統 軟 硬 體, 操 作 員 經 理 使 用 者 系 統 發 展 者 應 用 模 式 建 立 者 地 理 資 訊 系 統 本 身 有 四 個 主 要 的 組 成 : 輸 入 管 理 分 析 應 用 及 展 示 另 外 上 使 人 組 織 維 護 管 理 人 員 成 為 一 完 整 之 系 統 環 境 2.2.2 地 理 資 料 庫 系 統 資 料 庫 系 統 是 地 理 資 訊 系 統 最 重 要 的 一 環, 它 直 接 影 響 了 資 料 儲 存 的 效 率, 也 間 接 影 響 了 爾 後 資 料 處 理 及 分 析 的 效 能 簡 言 之, 地 理 資 料 庫 系 統 是 一 個 地 理 資 料 ( 訊 ) 的 記 錄 系 統, 它 的 主 要 目 的 是 將 地 理 資 料 ( 訊 ) 以 某 種 方 式 妥 善 的 儲 存, 並 能 提 供 適 時 適 當 的 資 料 ( 訊 ) 給 使 用 者 一 套 完 整 的 地 理 資 料 庫 系 統 首 先 必 須 將 大 自 然 各 種 地 理 現 象 的 特 性 表 達 於 理 念 的 地 理 資 料 模 式 中, 進 而 將 理 念 的 模 式 具 體 化 於 地 理 資 料 結 構 中, 最 後 才 能 將 地 理 現 象 及 其 特 性 妥 善 的 安 排 於 電 腦 的 檔 案 結 構 裡 在 這 一 連 串 的 過 程 中, 大 自 然 的 地 理 現 象 是 地 理 學 專 精 研 究 的 範 圍, 電 腦 檔 案 結 構 是 計 算 機 學 家 的 專 長, 而 地 理 資 料 模 式 與 地 理 資 料 結 構 則 介 於 地 理 者 與 計 算 學 家 研 究 範 圍 之, 也 是 地 理 資 訊 系 統 的 主 要 研 究 對 象 2.3 地 表 距 離 計 算 方 式 由 於 製 作 結 合 Google Maps 之 物 種 地 理 交 互 關 係 調 查 系 統 時, 需 要 計 算 在 地 圖 上 點 選 的 位 置 與 物 種 位 置 之 間 的 距 離, 所 以 需 要 利 用 一 個 可 以 計 算 距 離 的 方 法 : 2.3.1 二 度 分 帶 座 標 1974 年, 政 府 為 繪 製 五 千 分 之 一 基 本 圖 及 地 籍 測 量 之 需 求, 決 定 採 用 以 121 為 中 央 經 線, 圖 幅 可 完 整 涵 蓋 台 灣 本 島, 橫 跨 經 度 二 度 的 二 度 分 帶 座 標 [18] 二 度 分 帶 顧 名 思 義, 是 將 地 表 每 隔 二 度 切 為 一 個 投 影 帶, 由 於 二 度 分 帶 是 平 面 的 座 標, 而 且 已 公 尺 為 單 位, 所 以 可 以 用 兩 點 距 離 公 式 計 算 最 短 距 3

離, 因 此 傳 統 GIS 系 統 常 利 用 二 度 分 帶 座 標 來 計 算 距 離, 但 是 使 用 這 個 方 法 會 出 現 當 物 種 不 在 台 灣 本 島 時, 例 如 : 物 種 的 位 置 在 海 上, 就 無 法 定 位 物 種 座 標 2.3.2 大 圓 理 論 大 圓 理 論 [4] 是 用 來 測 量 球 體 上 地 表 最 短 距 離 的 方 法, 由 於 球 面 幾 何 不 同 於 普 通 的 歐 幾 里 得 幾 何, 方 程 的 距 離 採 取 不 同 的 形 式 兩 點 之 間 的 距 離 在 歐 氏 空 間 是 從 一 個 點 到 另 一 個 點 直 線 的 長 度 但 是 球 體 上 沒 有 直 線, 所 以 在 非 歐 幾 里 得 幾 何 中 直 線 被 替 換 成 測 地 線 來 做 計 算 經 過 一 些 文 獻 的 探 討 後 發 現 大 圓 理 論 有 以 下 幾 種 計 算 的 方 法, 若 已 知 A B 兩 點 之 經 緯 度, 可 用 下 列 公 式 求 出 大 圓 距 離 : Great-circle distance 公 式 : Haversine 公 式 : 1 2 若 已 知 A B 兩 點 之 經 緯 度, 可 用 下 列 公 式 求 出 A 到 B 點 之 方 位 角 : 3 若 已 知 A 點 之 經 緯 度 和 到 B 點 之 距 離 d 與 方 位 角, 可 用 下 列 公 式 求 出 B 點 之 經 緯 度 : 4 其 中 d 為 大 圓 距 離, 而 A 點 經 度 緯 度 分 別 為 5,B 點 的 經 度 緯 度 分 別 為 r 是 地 球 的 半 徑 ; 其 實 這 只 是 球 面 三 角 餘 弦 公 式 的 推 廣, 注 意 經 緯 度 的 度 數 計 算 時 要 轉 成 徑 度, 才 會 計 算 正 確 2.4 路 徑 查 詢 先 規 劃 路 徑 [3], 標 記 A 點 到 B 點 之 可 行 走 的 路 線, 記 錄 經 緯 度 座 標 調 查 方 式 沿 著 規 劃 好 的 路 徑 以 步 行 方 式, 依 據 鳥 類 之 鳴 唱 聲, 並 輔 以 目 視 進 行 分 辨, 在 可 目 視 的 範 圍 內 以 望 遠 鏡 記 錄 所 有 發 現 之 鳥 種 4

2.5 無 障 礙 網 路 無 障 礙 網 頁 [21] 是 把 網 頁 內 容 調 整 成 適 合 給 障 礙 人 士 使 用 的 網 頁, 除 了 能 讓 弱 勢 族 群 如 : 聽 覺 視 覺 障 礙 人 士 之 外 也 修 改 了 各 大 瀏 覽 器 顯 示 的 正 確 性, 並 多 方 面 改 善 使 用 鍵 盤 操 作 閱 覽 網 頁 的 能 力, 讓 網 頁 更 友 善 化, 使 障 礙 人 士 操 作 網 頁 更 便 利, 無 障 礙 網 頁 設 計 規 範 辦 法 是 W3C 協 會 之 WAI 組 織 所 訂 定 無 障 礙 網 頁 內 容 標 準 相 關 規 範, 旨 於 確 保 任 何 人 都 有 辦 法 取 得 放 在 網 頁 上 的 媒 體 內 容, 無 論 人 們 是 否 遭 遇 了 身 體 心 理 或 技 術 上 的 障 礙, 都 不 會 妨 礙 人 們 接 收 作 者 所 釋 出 的 資 訊, 其 中 包 含 無 障 礙 十 四 條 規 範 以 及 無 障 礙 九 十 條 的 檢 測 要 點, 這 些 要 點 並 可 歸 類 為 三 加 一 個 等 級, 顯 示 網 站 無 障 礙 空 間 的 影 響 程 度 鼓 勵 政 府 機 關 及 民 間 網 站 發 展 出 障 礙 者 可 使 用 的 網 站 2.6 圖 形 檢 索 相 關 文 獻 圖 形 檢 索 相 關 文 獻 [1] 主 要 用 於 判 斷 路 徑 和 Pixel 是 否 在 相 關 範 圍 內, 所 以 需 要 製 作 一 個 能 夠 可 以 判 斷 路 徑 查 詢 的 方 法 2.6.1 PostgreSQL Geometric Functions PostgreSQL Geometric Functions 是 PostgreSQL 資 料 庫 所 提 供 的 技 術, 可 判 斷 一 個 點 (point) 的 座 標 (x,y) 是 否 落 在 多 邊 形 (Polygon) 範 圍 內, Polygon={(px1,py1),(px2,py2),(px3,py3),(px4,py4),(px5,py5),( px 6,py6)} 如 圖 2.1 運 算 式 如 下 Point (x,y) @Polygon 圖 2.1 PostgreSQL Geometric Functions 示 意 圖 5

2.6.2 Pixel Based Test Pixel Based Test 演 算 法 是 將 預 檢 索 的 多 邊 形 範 圍 內 全 部 填 滿 同 一 色 如 圖 2.2 的 藍 色 多 邊 形, 多 邊 形 範 圍 外 則 全 部 填 滿 另 一 色, 如 圖 2.2 白 色 部 分 若 一 個 點 的 座 標 檢 索 出 顏 色 與 多 邊 形 為 同 一 色 彩 時, 表 示 此 點 落 在 此 多 邊 形 的 範 圍 內, 如 圖 2.2 的 藍 點 所 示 相 反 地, 若 一 個 點 的 座 標 檢 索 出 的 顏 色 與 多 邊 形 為 不 同 色 彩 時, 則 表 示 此 點 沒 有 落 在 此 多 邊 形 的 範 圍 內 如 圖 2.2 白 點 所 示 圖 2.2 Pixel Based Test 示 意 圖 2.6.3 Crossing Test Crossing Test 演 算 法 是 指 一 個 點 的 射 線, 若 穿 過 一 個 多 邊 形 的 邊 界 之 次 數 總 和 為 奇 數, 則 表 示 此 點 落 在 此 多 邊 形 的 範 圍 內, 如 圖 2.3 的 紅 線 所 示 相 反 地 若 次 數 總 和 為 偶 數, 則 表 示 此 點 沒 有 落 在 此 多 邊 形 的 範 圍 內, 如 圖 2.3 的 藍 線 所 示 圖 2.3 Crossing Test 示 意 圖 6

第 三 章 實 作 的 程 序 與 方 法 3.1 製 作 採 行 的 方 法 與 工 具 本 系 統 分 成 伺 服 器 端 瀏 覽 器 端 與 手 機 端 三 大 部 分 伺 服 器 端 以 Linux Apache Postgresql 與 PHP 做 為 開 發 工 具, 瀏 覽 器 端 以 HTML5 CSS3 JavaScript 做 為 開 發 工 具, 手 機 端 以 Android 手 機 與 Java 為 開 發 工 具 在 此 網 站 中, 我 們 需 要 物 種 調 查 系 統 與 三 百 六 十 度 環 場 這 兩 項 系 統, 物 種 調 查 系 統 是 使 用 PHP 與 資 料 庫 作 溝 通 交 換 資 料, 並 將 結 果 顯 示 在 GOOGLE MAP 上 面, 而 三 百 六 十 度 環 場 系 統 我 們 則 使 用 JavaScript 自 行 開 發 一 套 環 場 系 統, 而 這 次 三 百 六 十 度 環 場 系 統 以 降 低 運 算 複 雜 度 為 目 標 進 行 改 寫 與 改 良, 並 以 支 援 Internet Explorer Firefox 與 Chrome 三 套 瀏 覽 器 為 主 做 開 發, 而 網 站 也 分 成 前 台 跟 後 台, 前 台 部 份, 因 為 HTML5 近 日 崛 起 而 在 將 來 也 很 有 可 能 是 Android 平 台 網 頁 的 標 準, 所 以 我 們 也 將 全 部 改 寫 成 HTML5, 另 外 也 用 CSS 作 網 頁 排 版, 而 在 後 台 部 分 則 使 用 PHP 寫 出 一 套 控 制 系 統, 可 以 做 網 頁 資 料 新 增 刪 除 與 修 改 等 動 作 而 這 次 還 有 一 項 重 大 的 任 務 就 是 處 理 路 徑 查 詢 和 區 域 查 詢, 我 們 使 用 PHP 的 GD and Image Functions[23] 畫 出 範 本 圖 形 和 點 選 出 的 路 徑, 如 圖 3.1 圖 3.2 所 示,, 在 使 用 brush 把 範 本 圖 形 沿 著 路 徑 繪 製 出 不 規 則 路 徑, 如 圖 3.3 所 示, 進 行 初 步 過 濾, 將 調 查 記 錄 轉 換 成 圖 形 中 的 Pixel 位 置, 進 行 檢 查, 查 詢 結 果 如 圖 3.4 所 示 圖 3.1 範 本 圖 形 圖 3.2 路 徑 圖 7

圖 3.3 不 規 則 路 徑 圖 3.4 查 詢 結 果 3.2 系 統 架 構 此 系 統 分 為 app 與 網 站, 網 站 可 分 為 前 台 與 後 台, 前 台 內 容 包 含 濕 地 的 基 本 介 紹 南 仁 湖 介 紹 生 態 現 況 和 空 拍 全 景 圖 與 環 場 影 像, 主 要 是 給 一 般 使 用 者 使 用 的 網 頁 介 面, 後 台 部 分, 主 要 可 分 為 研 究 人 員 與 系 統 人 員 所 使 用 的 介 面, 調 查 人 員 可 在 此 進 行 資 料 的 管 理, 研 究 人 員 也 可 在 此 網 頁 中 進 行 相 關 的 研 究 與 調 查, 如 圖 3.5 圖 3.6 圖 3.7 圖 3.5 軟 體 系 統 圖 8

圖 3.6 詳 細 系 統 圖 圖 3.7 APP 系 統 圖 9

本 系 統 的 資 料 庫 主 要 分 為 以 下 四 個 資 料 表,species 資 料 表 主 要 記 載 物 種 相 關 資 訊,collect 資 料 表 主 要 是 在 記 錄 研 究 人 員 採 集 當 時 的 相 關 資 訊,userdb 資 料 表 主 要 在 記 錄 採 集 人 員 研 究 人 員 和 系 統 管 理 員 的 個 人 相 關 資 料 與 權 限, extname 資 料 表 主 要 是 作 為 擴 增 欄 位 圖 3.8 ER 圖 10

四 個 資 料 表 詳 細 結 構 如 下 : species 物 種 資 料 表 : 表 3.1 species 物 種 資 料 表 索 引 名 稱 欄 位 名 稱 型 態 長 度 主 鍵 物 種 編 號 Sid integer 界 中 文 Kingdom character 30 門 中 文 Phylum character 30 綱 中 文 Classc character 30 目 中 文 Orderc character 30 科 中 文 屬 中 文 屬 中 文 種 中 文 中 文 學 名 中 文 俗 名 Family Genusc Genusc Speciesc scientificnamec commonnamec character varying character varying character varying character varying character varying character varying 是 否 為 特 有 種 endemicspecies Integer 保 育 等 級 conservation Integer 生 活 習 性 中 文 ecologicalhabitsc Text 定 居 性 中 文 Settlement Text 食 性 中 文 Feedinghabitsc Text 食 物 中 文 Foodc Text 活 動 習 性 中 文 Activity Text 棲 地 類 型 中 文 Habitat Text 出 現 海 拔 Distribution Text 成 體 外 型 中 文 Appearance Text 成 體 顏 色 中 文 Plumage Text 鳴 聲 中 文 Soundc Text 備 註 Refc Text 大 小 ( 公 分 ) Size Float 50 50 50 50 50 50 11

索 引 名 稱 欄 位 名 稱 型 態 長 度 重 量 ( 公 克 ) Weight Float 界 中 文 Kingdom character 30 門 中 文 Phylum character 30 綱 中 文 Class character 30 目 中 文 Order character 30 科 中 文 屬 中 文 種 中 文 學 名 英 文 俗 名 Family Genus Species Scientificname Commonname character varying character varying character varying character varying character varying 生 活 習 性 Ecologicalhabits Text 定 居 性 Settlement Text 食 性 Feedinghabits Text 食 物 Food Text 活 動 習 性 Activity Text 棲 地 類 型 Habitat Text 出 現 海 拔 Distribution Text 成 體 外 型 Appearance Text 成 體 顏 色 Plumage Text 鳴 聲 Sound Text 備 註 Ref Text 使 用 者 姓 名 Username character 100 IP Ip character 30 修 改 時 間 Modtime character 30 50 50 50 50 50 12

collect 採 集 資 料 資 料 表 表 3.2 collect 採 集 資 料 資 料 表 索 引 名 稱 欄 位 名 稱 型 態 長 度 主 鍵 採 集 編 號 cid integer 外 鍵 物 種 編 號 Sid integer 外 鍵 採 集 者 編 號 Crid integer 採 集 資 料 Filelist character 20 經 緯 度 座 標 E Wsmape Real 經 緯 度 座 標 N Wsmapn Real TWD97 座 標 E Twdmape Real TWD97 座 標 N Twdmapn Real 採 集 地 區 中 文 採 集 地 區 英 文 Location Location character varying character varying 出 現 頻 次 Ctime Real 查 詢 權 限 Auth Text 採 集 時 間 Cdate character 30 備 註 中 文 Refc Text 備 註 Ref Text 30 100 100 使 用 者 姓 名 Username Character 100 IP Ip Character 30 修 改 時 間 Modtime Character 30 13

userdb 採 集 者 資 料 表 表 3.3 userdb 採 集 者 資 料 表 索 引 名 稱 欄 位 名 稱 型 態 長 度 主 鍵 採 集 者 編 號 Crid integer 採 集 者 Email Email character varying 100 密 碼 shalpwd character 32 採 集 者 名 字 Name character 30 單 位 Org character varying 40 身 份 Status character 20 採 集 者 電 話 Tel character 20 手 機 Mobile character 20 採 集 者 性 別 gender character 10 採 集 者 住 址 address character varying 150 權 限 Level character 20 使 用 者 姓 名 Username Character 100 IP Ip Character 30 修 改 時 間 Modtime Character 30 extname 擴 充 欄 位 命 名 表 3.4 extname 擴 充 欄 位 命 名 索 引 名 稱 欄 位 名 稱 型 態 長 度 主 鍵 物 種 編 號 Sid integer 擴 充 欄 位 名 稱 1 name1 Character 50 擴 充 欄 位 名 稱 2 name 2 Character 50 擴 充 欄 位 名 稱 3 name 3 Character 50 擴 充 欄 位 名 稱 4 name 4 Character 50 擴 充 欄 位 名 稱 5 name 5 Character 50 14

3.3 核 心 功 能 說 明 (1) 附 近 物 種 查 詢 系 統 : 此 功 能 是 利 用 Google Maps 經 緯 度 定 位 的 方 法, 將 使 用 者 在 地 圖 中 所 點 選 的 位 置, 透 過 距 離 的 過 濾 傳 送 到 資 料 庫 中 查 詢 符 合 資 訊, 再 將 結 果 傳 回 到 網 頁 中 顯 示, 功 能 包 含 路 徑 查 詢 和 區 域 查 詢 方 式 路 徑 查 詢 是 用 大 圓 理 論 加 上 PHP 的 GD and Image Function 判 斷 圓 有 沒 有 和 多 個 經 緯 度 呈 顯 出 來 的 polygon 圖 形 相 交, 假 設 有 相 交, 我 們 在 利 用 PHP 的 GD and Image Functions 劃 出 用 大 圓 理 論 加 上 polypath 圖 形 繪 製 出 的 圖 形, 再 用 PHP 取 得 圖 形 中 最 大 範 圍 矩 形 的 最 左 上 和 最 右 下 的 點, 進 行 PostgreSQL 經 緯 度 資 料 比 對, 初 步 過 濾 找 出 範 圍 內 的 物 種, 再 使 用 範 圍 內 的 物 種 和 繪 製 出 的 圖 形, 以 顏 色 區 別 開, 再 來 判 斷 有 沒 有 覆 蓋, 沒 覆 蓋 的 點 就 表 示 沒 在 繪 製 出 的 圖 形 當 中, 反 之, 有 覆 蓋 的 話 圖 形 中 就 會 出 現 其 他 顏 色, 此 時 就 可 使 用 找 尋 到 有 覆 蓋 資 料 和 Google Map 結 合, 再 將 結 果 傳 回 到 網 頁 中 顯 示, 如 下 頁 圖 3.8 圖 3.9 路 徑 查 詢 (2) 關 鍵 字 查 詢 系 統 : 利 用 關 鍵 字 查 詢 的 方 式, 讓 使 用 者 輸 入 查 詢 的 物 種 名 稱, 直 接 到 資 料 庫 中 搜 尋 符 合 的 資 料, 再 將 結 果 回 傳 至 網 頁 上 並 在 地 圖 上 標 示, 也 可 以 讓 物 種 查 詢 和 關 鍵 字 查 詢 結 合 (3) 野 外 採 集 資 料 輸 入 輔 助 系 統 : 先 讓 調 查 人 員 點 選 發 現 物 種 的 方 位, 再 透 過 Google Maps 取 得 該 點 正 確 的 經 緯 度 後, 將 此 經 緯 度 與 所 輸 入 的 物 種 資 料 透 過 PHP 傳 送 至 資 料 庫 中 儲 存 15

(4) 三 百 六 十 度 環 場 導 覽 系 統 : 此 三 百 六 十 度 環 場 導 覽 系 統 是 由 JavaScript 程 式 撰 寫 而 成 做 法 是 先 用 PHP 取 得 使 用 者 想 要 觀 看 環 場 景 象 的 地 點, 然 後 載 入 兩 張 該 地 點 相 同 的 環 場 圖, 並 將 視 窗 的 最 左 上 當 成 原 點, 而 圖 片 的 最 左 上 點 定 為 基 準 點, 利 用 基 準 點 與 原 點 的 距 離 來 判 定 以 控 制 第 二 張 圖 的 位 置, 當 基 準 點 扣 掉 原 點 的 值 小 於 0 則 讓 第 二 張 圖 來 補 第 一 張 圖 的 右 邊, 而 基 準 點 扣 掉 原 點 的 值 大 於 或 等 於 0 時 則 補 在 第 一 張 圖 的 左 邊, 反 之, 第 二 張 圖 的 判 斷 方 法 也 跟 第 一 張 圖 一 樣, 如 此 一 來 這 兩 張 圖 不 斷 地 彼 此 互 相 遞 補, 並 製 造 出 三 百 六 十 度 環 場 的 效 果 可 以 使 用 滑 鼠 拖 曳 以 外, 也 可 以 使 用 鍵 盤 控 制 圖 片 移 動, 而 在 放 大 縮 小 方 面 可 以 使 用 頁 面 上 的 縮 放 按 鈕 或 是 拖 曳 頁 面 上 的 縮 放 輪 軸, 甚 至 是 使 用 滑 鼠 滾 輪 都 可 以 達 到 縮 小 放 大 的 效 果, 也 使 用 監 聽 更 新 的 方 法 來 更 新 頁 面, 去 除 非 必 要 的 更 新 動 作 以 達 到 節 省 系 統 資 源 的 使 用 量, 如 下 頁 圖 3.9 圖 3.10 三 百 六 十 度 環 場 系 統 運 作 流 程 圖 (5) 導 覽 App: 主 要 功 能 是 利 用 使 用 者 的 GPS 定 位 點, 擷 取 使 用 者 所 在 地 所 需 的 導 覽 資 訊, 包 含 附 近 的 景 點 與 動 植 物 介 紹, 也 可 以 查 詢 附 近 的 物 種 資 料 16

3.4 完 成 工 作 項 目 及 結 果 完 成 一 個 資 料 庫 網 頁, 具 備 以 下 功 能 : (1) 附 近 物 種 查 詢 ( 路 徑 查 詢 和 區 域 查 詢 ) (2) 關 鍵 字 查 詢 ( 結 合 GIS) (3) 野 外 採 集 資 料 輸 入 輔 助 系 統 (4) 詳 細 系 統 內 容 架 構 (5) 三 百 六 十 度 環 場 影 像 (6) 支 援 手 機 之 APP 導 覽 Android 導 覽 App, 可 查 詢 使 用 者 附 近 的 導 覽 資 訊 與 採 集 資 料 庫 的 資 料, 也 可 以 查 看 南 仁 湖 附 近 的 物 種 照 片, 即 為 APP 內 的 選 項 生 態 藝 廊 3.5 使 用 的 設 備 與 軟 體 (1)Adobe Photoshop : PhotoShop 向 來 是 影 像 製 作 上 首 選 的 軟 體 之 一, 主 要 是 在 影 像 處 理 的 功 能 上 以 及 校 色 功 能 上, 擁 有 優 越 的 網 頁 影 像 切 割 功 能 將 網 頁 影 像 自 動 最 佳 化 具 有 製 作 GIF 動 畫 的 功 能 (2)Adobe Illustrator : Illustrator 是 高 效 能 的 製 作 軟 體 之 一, 擁 有 許 多 的 優 點, 讓 我 們 能 在 短 時 間 內 執 行 有 效 率 的 工 作, 它 具 備 了 合 併 著 色 設 計 處 理 文 字 和 圖 片 的 功 能 Adobe Illustrator 裡 的 工 具 品 質 高, 能 混 合 顏 色 並 產 生 背 景 色 填 充 的 漸 層 樣 式, 達 到 出 色 的 結 果 (3)Hugin Hugin 是 一 套 跨 平 台 開 源 全 景 攝 影 圖 像 拼 接 的 軟 體, 它 允 許 多 張 在 同 一 地 點 拍 攝 的 互 有 重 疊 的 照 片 使 用 控 制 點 來 拚 和 照 片 混 合 而 輸 出 一 張 更 大 幅 面 的 圖 像, 此 外 他 也 支 持 自 動 創 建 控 制 點, 附 帶 預 覽 窗 口 的 優 化 圖 像 投 影 方 式 方 便 用 戶 全 景 圖 是 否 可 接 受, 如 果 用 戶 接 受, 則 程 序 通 過 拼 接 投 影 與 輸 出 全 景 圖 (4)Autostitch AutoStitch 是 一 套 可 以 將 多 張 不 同 角 度 的 數 位 照 片 連 接 成 一 張 全 景 照 的 免 費 軟 體 AutoStitch 的 操 作 非 常 的 簡 單, 只 要 幾 個 簡 單 的 動 作 就 可 以 完 成, 而 且 接 圖 也 有 一 定 水 準 (5)PC 撰 寫 網 頁 和 手 機 程 式 必 要 的 設 備 (6) 伺 服 器 使 用 Linux 作 業 系 統, 用 以 放 置 系 統 程 式 並 執 行 資 料 庫 查 詢 之 用 (7) 手 機 平 板 電 腦 測 試 開 發 導 覽 App 用 17

3.6 人 力 分 配 表 個 人 工 作 項 目 的 人 力 分 配, 如 表 3.5 表 3.5 人 力 分 配 表 項 目 / 負 責 人 黃 振 原 康 偉 哲 陳 書 豪 資 料 蒐 集 資 料 庫 開 發 系 統 開 發 APP 撰 寫 程 式 撰 寫 網 頁 設 計 環 場 圖 片 處 理 APP 介 面 設 計 環 場 拍 攝 論 文 撰 寫 18

3.7 進 度 甘 特 圖 進 度 的 甘 特 圖, 如 表 3.6 表 3.6 民 國 101 年 專 題 進 度 表 時 間 101 年 102 年 進 度 1 月 2 月 3 月 4 月 5 月 6 月 7 月 8 月 9 月 10 月 11 月 12 月 1 月 2 月 3 月 4 月 文 獻 收 集 實 地 探 勘 資 料 庫 建 置 資 料 程 式 庫 開 發 修 改 程 式 系 統 開 發 撰 寫 系 統 測 試 修 正 網 頁 架 構 網 頁 建 置 網 頁 原 始 碼 改 寫 手 機 導 覽 APP 19

第 四 章 專 題 成 果 呈 現 與 討 論 本 專 題 已 經 完 成 空 照 圖 三 百 六 十 度 環 場 影 像 物 種 查 詢 系 統 和 手 機 APP 導 覽, 下 圖 為 系 統 的 實 際 操 作 頁 面, 圖 4.1 為 空 照 圖 並 以 A 點 B 點 C 點 標 示 出 我 們 所 拍 攝 的 環 場 影 像 位 置, 如 圖 4.2 圖 4.3 為 物 種 查 詢 系 統, 圖 中 Google Map 會 標 示 出 使 用 者 所 點 選 的 位 置 和 畫 出 選 擇 的 範 圍, 再 物 種 資 料 的 部 分 會 顯 示 在 左 邊 物 種 查 詢 成 果, 手 機 APP 導 覽 的 進 入 頁 和 各 功 能 頁, 如 圖 4.4 圖 4.5 圖 4.6 圖 4.7 圖 4.8 在 三 百 六 十 度 環 場 系 統 方 面, 較 以 前 版 本 此 次 我 們 也 做 了 改 良, 我 們 運 用 了 偵 測 更 新 的 技 術, 來 改 進 先 前 使 用 每 秒 不 斷 更 新, 造 成 CPU 使 用 率 偏 高 的 情 況, 使 用 偵 測 更 新 的 技 術 去 除 了 不 必 要 的 畫 面 刷 新, 使 得 系 統 的 執 行 更 加 穩 定, 在 程 式 碼 寫 法 上, 我 們 也 將 功 能 盡 量 的 函 式 化, 以 方 便 將 來 程 式 系 統 的 拓 展 與 修 改 時 能 夠 更 有 效 率, 此 外 程 式 碼 也 依 照 W3C 標 準 來 撰 寫, 增 加 在 其 他 瀏 覽 器 上 的 相 容 度 圖 4.1 空 照 圖 20

圖 4.2 環 場 影 像 圖 4.3 物 種 查 詢 21

圖 4.4 手 機 APP 導 覽 圖 4.5 手 機 APP 導 覽 - 南 仁 湖 簡 介 22

圖 4.6 手 機 APP 導 覽 - 生 態 藝 廊 圖 4.7 手 機 APP 導 覽 - 物 種 查 詢 23

圖 4.8 手 機 APP 導 覽 - 查 詢 結 果 24

第 五 章 結 論 與 未 來 發 展 網 頁 導 覽 手 機 導 覽 系 統, 已 經 成 為 國 家 公 園 的 主 要 導 覽 方 式 但 是 整 個 導 覽 系 統 的 核 心, 還 是 建 立 在 我 們 對 整 個 生 態 系 的 調 查 資 料 上 不 同 於 其 他 導 覽 系 統 的 靜 態 解 說, 本 專 題 將 學 者 專 家 辛 苦 調 查 的 細 部 資 訊 與 導 覽 系 統 整 合, 發 展 能 夠 完 整 呈 現 細 節 生 態 資 料 並 具 使 用 者 親 和 力 的 導 覽 系 統 本 專 題 強 化 加 值 學 長 們 過 去 的 成 果, 並 進 一 步 發 展 出 手 機 導 覽 系 統, 透 過 對 於 經 緯 度 計 算 距 離 的 技 術 掌 握, 與 特 殊 領 域 生 態 調 查 方 式 的 查 詢 解 決 方 案, 製 作 出 獨 步 台 灣 各 國 家 公 園 的 導 覽 資 訊 系 統, 以 利 保 育 觀 念 的 推 廣 25

參 考 文 獻 [1] 王 連 祥," 以 影 像 與 標 示 為 主 體 之 仿 3D 網 路 教 學 系 統 設 計 與 建 置 ", 碩 士 論 文, 崑 山 科 技 大 學,94 [2] 蔡 承 穎," 公 共 圖 書 館 中 文 版 兒 童 網 站 評 鑑 之 研 究 ", 台 灣 圖 書 館 管 理 季 刊,97 年 1 月 [3] 林 義 雄," 生 態 旅 遊 資 源 調 查 之 探 究 - 以 墾 丁 埔 頂 地 區 為 例 ", 碩 士 論 文, 國 立 屏 東 教 育 大 學,99 [4] " 維 基 百 科 Great-circle distance", http://en.wikipedia.org/wiki/great-circle_distance [5] " 使 用 HTML5 的 十 大 原 因 ", http://www.williamlong.info/archives/3024.html [6] " 墾 丁 國 家 公 園 龍 鑾 潭 濕 地 生 態 網 站 ",http://wetland.vexp.net/ [7] " 台 灣 濕 地 保 護 聯 盟 ",http://www.wetland.org.tw/ [8] " 四 草 溼 地 生 態 網 ",http://ecobird.tncg.gov.tw/ [9] " 國 立 自 然 科 學 博 物 館 自 然 與 人 文 數 位 博 物 館 ", http://digimuse.nmns.edu.tw/ [10] " 臺 灣 大 學 動 物 博 物 館 ",http://archive.zo.ntu.edu.tw/ [11] " 中 央 研 究 院 生 物 多 樣 性 研 究 中 心 TAIBNET 台 灣 物 種 名 錄 ", http://taibnet.sinica.edu.tw/ [12] " 數 位 典 藏 與 數 位 學 習 國 家 型 科 技 計 畫 成 果 入 口 網 ", http://digitalarchives.tw/ [13] " 中 央 研 究 院 生 物 多 樣 性 研 究 中 心 台 灣 魚 類 資 料 庫 ", http://fishdb.sinica.edu.tw/ [14] " 經 濟 部 水 利 署 防 災 資 訊 服 務 網 淹 水 潛 勢 ", http://fhy.wra.gov.tw/pub_web/others/floodwarn.aspx [15] "Google Map API,http://code.google.com/intl/zh-TW/apis/maps/ [16] "Google Map API Android",http://code.google.com/intl/zh-TW/android/ [17] " 地 理 資 訊 系 統 研 究 ",http://www.rskl.geog.ntu.edu.tw/course/ [18] " 二 度 分 帶 座 標 ",http://www.sunriver.com.tw/grid_tm2.htm [19] "PostgreSQL Geometry Functions", http://www.postgresql.org/docs/7.4/static/functions-geometry.html [20] "PHP-Image Processing and GD", http://tw2.php.net/manual/en/book.image.php [21] " 無 障 礙 網 頁 ", http://zh.wikipedia.org/wiki/%e7%b6%b2%e9%a0%81%e8%a6%aa%e5% 92%8C%E5%8A%9B [22] " 資 料 庫 ", http://zh.wikipedia.org/wiki/%e8%b3%87%e6%96%99%e5%ba%ab [23] "PHP-GD and Image functions",http://php.net/manual/en/ref.image.php 26

書 背 2.5cm ( 民 國 ) 1cm 101 2.5cm 製 作 報 告 學 士 專 題 報 告 題 目 南 仁 湖 生 態 導 覽 網 站 製 作 所 名 3cm 1cm 資 訊 傳 播 系 崑 山 科 技 大 學 著 者 姓 名 2cm 黃 振 原 康 偉 哲 撰 陳 書 豪 3cm