行動政大APP 校園地圖功能建置及其他附加應用之研究

(1)

1

國立政治大學校務發展研究計畫

一零五學年第一學期成果報告

行

動政大 APP 校園地圖功能建置及其

他附加應用之研究

執行期間：民國 105 年 11 月 01 日至 106 年 03 月 31 日

執行單位：地政學系

計畫主持人：詹進發副教授

計畫參與人員：周子凱、王韋勝、盧玟芳、許瑋庭

(2)

2

摘要

本計畫以建立學校鄰近生活圈地理資訊系統為主，利用空間資訊技術蒐集野外調查資料，並結合 Leaflet API (Application Programming Interface)與中研院及國土測繪中心之開放圖資，開發出一套跨平台瀏覽之校園生活圈地圖系統。首先蒐集研究地區相關之點位坐標、圖片等地理位置資料，然後以開放源碼(open source)的網站管理系統開發工具，建置研究地區之地理資料庫管理系統，提供使用者查詢生活圈內相關資訊外，並結合電子地圖及各式圖資透過網路呈現多元化的資訊供使用者以更視覺化的方式認識政大生活圈。關鍵字：地理資訊系統、空間資訊、Leaflet API、開放源碼

Abstract

The purpose of this study is to establish a geographic information system (GIS) for the vicinity of the National Chengchi University. By using advanced spatial information technology, we developed a cross-platform campus circle map system which can integrate with open data maps, Leaflet API (Application Programming Interface). First, we collected field data including coordinates, images and other related information . Secondly, we used an open source framework tool(Django) to build our website and develop a geospatial database management system which allows users to add, update, delete, search, and display information together with electronic maps using a typical Internet browser. The results not only provide that the user can search the information of living circle, but also integrate electronic map and diverse map data to the user known the National Chengchi University living circle.

Key word: Geographic Information Systems, Spatial information, Leaflet API, Open

(3)

3

一、前言 ... 6 二、網站系統 ... 7 2.1 網站系統目的 ... 7 2.2 使用軟體 ... 7 2.2.1 Django ... 7 2.2.2 Python ... 8 2.2.3 PostgreSQL ... 8 2.3 網頁設計 ... 8 2.4APACHE 伺服器... 9 2.5 系統使用環境 ... 9 三、LEAFLET 網頁開發應用 ... 10 3.1LEAFLET MAPS ... 10 3.2WMS、WMTS ... 10 3.3JAVASCRIPT ... 10 3.4HTML ... 10 3.5BOOTSTRAP ... 10 四、研究問題 ... 11 4.1 如何使用 PYTHON和 DJANGO的網頁開發工具 ... 11 4.2 如何使用 PYTHON抓取資料 ... 11

4.3 如何使用 JAVASCRIPT語法結合 LEAFLET MAPS ... 12

4.4 如何利用網頁對 POSTGRESQL 的資料庫進行管理 ... 13 4.5 如何用 BOOTSTRAP將網頁美化 ... 13 4.6 如何將 ARCGISONLINE應用於網頁 ... 13 4.7 如何將 LEAFLET MAPS應用於網頁 ... 14 4.8 如何用 ELASTICSEARCH進行全域搜尋 ... 14 五、開發方法 ... 15 5.1 利用 HTML 及 DJANGO建置網站頁面 ... 15

5.2 利用 LEAFLET MAPS及 JAVASCRIPT建立具有互動式地圖之網頁 ... 15

5.3 介接中研院及國土測繪中心之圖資 ... 16

5.4DJANGO之管理者使用介面 ... 17

5.5ELASTICSEARCH 全域搜尋 ... 18

(4)

4 六、使用者手冊 ... 19 6.1 使用者介面 ... 19 6.2 首頁 ... 20 6.3 店家地圖 ... 21 6.4 建物地圖 ... 23 6.5 搜尋功能 ... 25 七、參考文獻 ... 27

(5)

5

圖目錄

圖 1 Django 運作流程 ... 7 圖 2 PostgreSQL 提供之資料庫管理程式使用介面 ... 8 圖 3 Djano 開發框架 ... 11 圖 4 KML 檔案內容 ... 12 圖 5 Leaflet 地圖 ... 12 圖 6 ArcGIS Online 使用介面 ... 13 圖 7 利用 ElasticSearch 製作全域搜尋結果 ... 14 圖 8 Leaflet 提供之使用範例 ... 15 圖 9 地圖網站製作地圖的程式碼... 16 圖 10 引入各圖層的程式碼... 16 圖 11 加入圖層... 16 圖 12 登入頁面... 17 圖 13 進入管理頁面... 17 圖 14 管理資料內容... 18

圖 15 Windows Google Crome 瀏覽情形... 19

圖 16 Iphone6 IOS Safari 瀏覽情形 ... 19

圖 17 網站系統首頁... 20 圖 18 圖片超連結功能... 20 圖 19 操作簡易說明... 21 圖 20 店家地圖... 21 圖 21 店家地圖套疊... 21 圖 22 不同店家的選取... 22 圖 23 店家資訊框... 22 圖 24 新增店家頁面... 23 圖 25 新增店家連結... 23 圖 26 在功能表列選到建物地圖... 24 圖 27 校園地圖... 24 圖 28 建物詳細資訊... 24 圖 29 縮放按鈕... 25 圖 30 不同圖層... 25 圖 31 首頁之搜尋功能... 25 圖 32 以 Arty 餐廳進行搜尋 ... 26 圖 33 搜尋結果... 26 圖 34 點選按鈕”地圖”之顯示畫面 ... 26

(6)

6

一、前言

現今智慧型行動裝置日益普及，校園為了跟進時代變遷，推出行動政大 APP，提供政大師生更加便利使用校園系統的管道。行動政大 APP 涵蓋了課程查詢、活動報名、交通資訊、圖書館、數位學習網等功能，此 APP 提供給政大師生許多有用的資訊。但現今行動政大 APP 的『校園地圖』功能，僅提供地圖圖資、各院所位置及資訊，又因地圖圖資老舊，因此於本計畫發想建置更完善的地圖系統。近年來，空間資訊領域的學術研究蓬勃發展，更促進相關領域產業快速成長，不僅創造了可觀的經濟產值，亦在民生方面也有許多便利的應用，如衛星導航系統、電子地圖(Google Maps/Earth)等。本計畫欲利用空間資訊科技，以及 Web 2.0 的架構建立資訊系統平台，為政大校園生活圈提供更完善的資訊。政大師生能夠透過此系統，更加深入了解校園資訊，增進與鄰近生活圈的互動，並透過地圖視覺化的動態呈現，增升與使用者間的互動性。本計畫之目的：在行動政大 APP 的『校園地圖』功能中，建置其他加值功能，例如：校園建物資訊，鄰近政大美食等，提供政大師生更加豐富的校園資訊。 1.介接開放性資料的地圖圖資，例如：臺灣經建版地形圖、日治地形圖、日治臺灣堡圖等，不但豐富地圖圖資，使用者也能藉由不同圖層的套疊，更加了解政大的歷史與文化變遷。 2. 利用該 APP 既有的交通資訊及政大生活圈功能，結合本研究欲建置的校園地圖系統，以地圖為導向，讓政大師生在地圖上便可了解政大附近商家及校園建物的相關資訊。

(7)

7

二、網站系統

2.1 網站系統目的

建立具有多媒體影像與資訊的互動地圖，可以讓政大的學生更了解政大校園與生活圈的系統。藉由地圖得知政大周邊生活圈相關資訊，並同時建立食物評論的平台，讓使用者可以更方便查詢政大周邊的店家。校內部分，我們也提供了校園地圖系統，使政大的學生能更了解政大校園建築物的歷史與由來。

2.2 使用軟體

2.2.1 Django

Django 是一個由 Python 寫成，免費且開放原始碼的高階網頁開發框架(Web Frame Work)，於 2005 年 7 月以 BDS 授權模式釋出。Django 的主要目的就是可以快速地開發高效能且可運用資料庫的網站，且此軟體的使用可以讓網站的開發更為簡易。因採用了 MVC(Module-View-Controller)架構，即模型 M，視圖 V 和控制器 C。可以讓使用者快速建立起具有完整功能的網站目標。

(8)

8

2.2.2 Python

為 Django 的基本語言，是一種物件導向、直譯式的電腦程式語言，語法簡單，並具有廣大的函式庫，包括數字、字串(string)、列表(list)、字典(dictionary) 等常見函式庫。優點是能夠支援各種平台，使得在應用上更為方便，也因為易於擴充、遷入的特性，適合當作其他應用程式的延伸語言。

2.2.3 PostgreSQL

PostgreSQL 是一套開放原始碼的物件關聯式資料庫管理系統 (object-relational database management system, ORDBMS)，其穩定性及效能可與商業性資料庫系統相比(例如：Oracle、IBM DB2、Microsoft SQL Server)。PostGIS 是 PostgreSQL 的擴充模組，提供地理空間資料的存取功能，使用者可透過 PostGIS 對儲存於 PostreSQL 資料庫中的地理空間資料進行存取。PostGIS 與 PostgreSQL 均可免費取得，可節省購置軟體與日後維護的費用。

PostgreSQL 資料庫管理系統可管理大量的資料，包括：人文資料屬性、空間坐標、影像、聲音資料及其他必要資料等，PostgreSQL 提供圖形使用者介面 pgAdmin。此外，PostgreSQL 可支援桌上型 GIS 軟體，例如：ArcGIS、QGIS，以及 WebGIS 軟體，未來若需擴充亦較具彈性。

圖 2 PostgreSQL 提供之資料庫管理程式使用介面

2.3 網頁設計

網頁設計過程中，運用了 CSS (Cascading Style Sheets)，是一種用來添加樣式的程式碼，他可以決定網頁的顏色、字體、排版等，可以將原本的內容跟顯示分隔開來。由 W3C（World Wide Web Consortium）定義和維護。

(9)

9

2.4 APACHE 伺服器

Apache HTTP Server（簡稱 Apache）是 Apache 軟體基金會的一個開放原始碼的網頁伺服器軟體，可以在大多數電腦作業系統中運行，由於其跨平台和安全性，被廣泛使用，是最流行的 Web 伺服器軟體之一。它快速、可靠並且可通過簡單的 API 擴充，將 Perl／Python 等直譯器編譯到伺服器中。

2.5 系統使用環境

系統管理者負責系統資料庫與網頁之管理，其使用環境需求如下：  linux 系統  python3.4  django1.8.16  leaflet  postgreSQL9.5  chrome 56.0 以上  Microsoft Edge 38.0 以上使用者透過本系統提供之使用介面操作各項功能，其使用環境需求如下：  chrome 56.0 以上  Microsoft Edge 38.0 以上

(10)

10

三、Leaflet 網頁開發應用

3.1 Leaflet Maps

Leaflet 屬於 JavaScript 的函式，專門用於設計給行動裝置使用的互動式地圖，且其包含大部分開發者所需的地圖功能。此外，它具有跨平台功能，亦支援行動裝置，也能加入第三方外掛(plugin)進行功能擴充。

3.2 WMS、WMTS

網路地圖服務 WMS(Web Map Service)是一種從地理資訊中，依照用戶需求而動態產生對應地圖影像的服務。地理資訊包括各種地圖資料檔如 shape file 以及各種地理資料庫等。WMS 圖資發佈系統在進行介接設定後，即可發佈圖資讓用戶進行圖資的使用。WMS 客戶端程式即可使用 Google earth 等進行瀏覽。

WMTS (Web Map Tile Service)全名為開放地圖圖磚服務，該技術廣泛應用於各類地理資訊於網路之流通與展示。WTMS 之最大功能為了加速使用者端之瀏覽以及有效控制傳遞的資料量，會預先制定最適當的呈現規格，目前台灣許多公家單位透過 WMTS 技術規劃其業務資料與底圖展示。

3.3 JavaScript

JavaScript 是一種程式語言，其主要的應用範圍為網頁開發上，網頁上動態、互動的變化，大多由 JavaScript 開發而成，被大多主流的瀏覽器支援，如 Google Chrome、IE、FireFox、Safari、Opera 等，對於用戶端來說，是一種直譯語言，無需經過編譯便可以直接與 HTML 進行互動，進而製作出網頁的動態效果。

3.4 HTML

HTML 的全名為 Hyper Text Markup Language，是編寫網頁的基本語言，網頁瀏覽器可以讀取 HTML 檔案，並將其轉化呈現為視覺化網頁。而 HTML 常與 CSS 、JavaScript 進行網站的設計，CSS 主要是進行網頁元素的外觀設計與佈局;JavaScript 則是影響網頁的行為，而三者的結合更是現今網頁的主流。

3.5 Bootstrap

Bootstrap 為 Twitter 所開發的，方便開發者使用與建構的網頁應用，整合了 CSS、JavaScript、元件，變成只要套用就能快速的寫出前端網頁框架，此外， Bootstrap 亦提供許多版面配置樣式、兼容裝置。

(11)

11

四、研究問題

本計畫著重於使用者得以藉由此網站系統得知校園內生活圈美食及建物資訊並與地圖進行互動，主要的研究問題是如何將校園內生活圈資料儲存到資料庫，再透過網頁和 Leaflet Map 呈現，方法說明如下:

4.1 如何使用 Python 和 Django 的網頁開發工具

Django 的 MVC 設計樣式和一般 MVC(Module-View-Controller)架構不太相同，Django 的 View 和 Template 都對應到 MVC 架構中的 View，View 的部分是一些基本 HTML 架構的設計，而 Template 則是一些簡單的語法，當使用者 Browser 對伺服器作 Request，Django 便會針對 urls.py 進行呼叫，urls.py 會將 View 中的模組和 Template 中的連結作連接。大抵來說，Django 的 MVC 架構應該被稱為 MTV(Module-Template-View)架構。圖 3 Djano 開發框架

4.2 如何使用 Python 抓取資料

田野調查收集得到的資料量十分龐大，如何有效率且快速的抓取其中資料便成為一項重要的工作，本計畫透過 Python 程式抓取田野調查收集到之 KML 檔案中的資料，KML 檔案如下圖所示。

(12)

12

圖 4 KML 檔案內容

4.3 如何使用 JavaScript 語法結合 Leaflet Maps

Leaflet Maps API 的內容是以 JavaScript 語法所建立的，以 JavaScript 撰寫軟體呼叫 Leaflet Maps API 的函式，便可利用 Leaflet Maps 呈現開放街圖、衛星影像與其他相關的資訊。

(13)

13

4.4 如何利用網頁對 PostgreSQL 的資料庫進行管理

資料庫為 Django 的核心所在，利用 Django 的 View 模板，可使用 Python 程式語言撰寫出來的函式，搭配 Django models.py 裡對資料表欄位進行設計，對資料庫裡的資料進行增加、刪除、編輯及查詢等功能，建立一個功能完善的管理介面。配合 Django settings.py 裡資料庫的設定，包括資料庫種類、資料庫名稱、所對應伺服器 IP 和 PORT，可與資料庫之間做動態的連結，使其以動態網頁的方式呈現。

4.5 如何用 Bootstrap 將網頁美化

BootStrap 是基於 HTML、CSS 和 JavaScript 的框架，使你只需要寫簡單的代碼就可以很快的搭建一個還不錯的前端框架，是後端程式設計師的一大利器，使它們只需要專注業務邏輯，而無須浪費太多的精力在介面設計上。它可以開發全響應式網頁，不論你使用手機、平板電腦、普通個人電腦瀏覽網站內容，所有的元素都可以很優雅的呈現。所以，可以用他來開發適合各種設備瀏覽的頁面，避免了大量的因為兼容性而導致的重複勞動。

4.6 如何將 ArcGIS Online 應用於網頁

ArcGIS Online 服務表示位於 ArcGIS Server 上可供用戶端應用程式使用的各種 GIS 資源（例如，地圖、定位器或圖片），得以瀏覽各式地圖以及來自 Esri 和數千個組織的其他地圖或者介接來自中研院和國土測繪中心之地圖，並得以使用您自己的資料豐富這些地圖，建立新地圖和地圖圖層。

(14)

14

4.7 如何將 Leaflet Maps 應用於網頁

輕便直覺的地圖模組，透過 Leaflet More Maps 可以搭配更多種類的地圖，有超過 20 種的互動式地圖可供選擇，可以依照網站的特質選擇不一樣的地圖來呈現，不再只有 Google Map 可以選擇，讓網站的感覺可以更不一樣，用起來也很容易上手。

4.8 如何用 Elasticsearch 進行全域搜尋

Elasticsearch（簡稱 ES），是一個 Open Source 的搜尋專案，base on Apache Lucene，專案由 Shay Banon 於 2010 年 2 月啟動，其協定是 Apache 2.0。 Elasticsearch 由於其天生的分散式和即時特性，很多人把它作為資料庫使用，也有很多人把它拿來儲存 Log，Elasticsearch 的發佈在 Lucene 和 Solr 社群引起很大的騷動，Solr 4.0+ 版本的 SolrCloud 也吸收了很多 Elasticsearch 的特性。

我們運用 Elasticsearch 進行全域搜尋政大地區生活圈之店家資訊，將搜尋到之結果呈現在網頁系統上面供使用者參考。

(15)

15

五、開發方法

5.1 利用 HTML 及 Django 建置網站頁面

Django 為網頁 MTV 開發框架，MTV 框架指的是 Model、Template、View 三個部分完成網頁提供服務的任務，當由 client 端發出一份 request，Django 本身負責判斷該請求應該由哪個 View 負責，View 決定網頁呈現的樣貌、使用哪個 Template，以及取用來自哪個 Model 的資料再傳回給 Django 系統，最後回傳給瀏覽器呈現所製作網頁。

而當要呈現網頁給使用者時，必須傳送一份 HTML 文件給瀏覽器閱讀，在 Django 框架下，HTML 文件寫於 Template 之中，相較於其他非 Django 框架的開發方式，此種寫於 Template 中的 HTML，有特別的格式，如{%for…in…%}、 {%if …%}、{%else%}……等，這些格式符合原生 python 的語法，這樣的設計方便 Django 框架的設計，更容易結合 Model 的資料。

5.2 利用 Leaflet Maps 及 Javascript 建立具有互動式地圖之

網頁

在 HTML 之中，可以於<script>元素中使用 Leaflet 插件，於網頁上顯示地圖。在<script>元素中，可以設定 map 物件的屬性，如地圖中心位置、放大縮小的範圍、設定 Marker 的資訊……等等，僅需使用 Leaflet Maps 所提供的 api 便能夠製作出所想要的地圖。

(更多資訊：http://leafletjs.com/reference-1.0.3.html) 圖 8 Leaflet 提供之使用範例

(16)

16

圖 9 地圖網站製作地圖的程式碼

5.3 介接中研院及國土測繪中心之圖資

欲介接其他如 google, 中研院、國土測繪中心的地圖甚至更多地圖，同樣有適合 Leaflet 使用的插件可以使用，使用方式可以從 Leaflet 的 Plugins 頁面 (http://leafletjs.com/plugins.html)找到，製作方法大同小異，皆是從其所提供的 javascript 來源，讓開發者可以於 HTML 中的 head 元素中引入，再於所引入的程式檔中，可以加入該圖層置自己的地圖上，並且同時能夠設定透明度、放大大小等，如此便可以於自己製作的地圖上呈現不同的底圖。圖 10 引入各圖層的程式碼圖 11 加入圖層

(17)

17

5.4 Django 之管理者使用介面

Django 有自身內建的後台管理介面，只要確認 django.contrib.admin 已經被我們填入 INSTALLED_APPS，及 urls.py 的 patterns 中有加入 url(r'^admin/', include(admin.site.urls)),則僅需於本地端啟動伺服器，並且將原網址最後加上 /admin 則可以連接上該後台管理系統，輸入帳號密碼後，便可以進入管理頁面。

圖 12 登入頁面

(18)

18

圖 14 管理資料內容

5.5 ELASTICSEARCH 全域搜尋

Elasticsearch 是由荷蘭開發者 Shay Banon 所創造之開源分散式搜尋分析系統，由於其容易學習與架設，同時具有很高的可用性與可擴充性，以及強大的資料處理效能，而國內外個大型內容網站包含 Facebook 、紐約時報等紛紛開始使用 Elasticsearch 來完成其內容搜尋與資料分析東工作，因為本網站是利用 Django 進行網站的架設，所以可以採用 Haystack 結合 Elasticsearch 作為搜索引擎，進行基本搜尋功能的建置。

5.6 Apache 佈署

部署 Django 網站至 Apache 上有以下幾個步驟： 1. 首先，必須先設定 settings.py 中 ALLOWED_HOSTS 有包含自己欲架設網站的 ip。 2. 接著，需進入到 /etc/apach2/sites-enabled 目錄中，設定 ServerAdmin, DocumentRoot, wsgi 檔案指向設定等等，便可以架設完成，另外需要注意的是部署時 apache 會使用到與 python 相關的 mod_wsgi 套件，而此套件需與自己所使用的 python 版本相合才能夠部署成功，不同的話則需要下載相合的版本。

3. 設定完成後，只需要於 command line 中輸入 sudo service apache2 restart 並輸入密碼後，就可重新部署。

(19)

19

六、使用者手冊

6.1 使用者介面

本系統是以Django 1.8.16 開發，並搭配 HTML5 進行網頁設計，優點為可在不同的平台上瀏覽及使用本系統。在不同廠牌及不同螢幕尺寸之電腦、手機抑或平板皆能呈現本系統之樣貌，不會因為在不同平台上瀏覽而產生版面跑版或功能無法使用的情形。下圖為在不同平台下進入本系統起始頁面之瀏覽情形。

圖 15 Windows Google Crome 瀏覽情形

(20)

20

6.2 首頁

首頁主要包含四個部分，第一個部分為「店家地圖」，以Leaflet Map 為底圖並介接國土測繪中心之豐富圖資來呈現政大校園生活圈之店家相關資訊，使用者可以任意放大、縮小及套疊不同圖層，並可查看店家詳細資訊；第二個部分為「建物地圖」，以 OpenStreetMap 為底圖並介接中研院之歷史圖資來呈現政大校園生活圈之建物相關資訊，使用者可以任意放大、縮小及套疊歷史圖層，查看過去政大校園的點點滴滴；第三個部分為「搜尋功能」，利用 ElasticSearch 做店家資訊搜尋，將搜尋店家資訊呈現在出來並可知道其地理位置。第四個部分為「返回政大」，點選右上角之政大校徽即可返回政大首頁。圖 17 網站系統首頁首頁功能部分，政大生活圈下面分別有店家地圖、建物地圖、搜尋功能之簡單介紹，點選下方圖片會分別連結到各功能頁面。圖 18 圖片超連結功能最下方之如何使用地圖平台，簡單介紹此網站系統應該要如何進行操作，讓第一次使用本網站系統師生得以迅速熟悉並使用之。

(21)

21 圖 19 操作簡易說明

6.3 店家地圖

點選導航欄上的店家地圖後可以進入到店家地圖頁面，其中可以看見標示政大周邊商家的地圖，圖20。地圖的左上角是可以控制縮放大小的按鈕，及右上角有兩個控制選單，第一個選單可以選擇使用不同的底圖如 OSM、正射影像圖，以及可以套疊不同的透明圖層如段籍圖、地形圖等等，圖21。套疊不同地圖後，可以點選地圖上任意位置關閉該選單。圖 7. 店家地圖套疊圖 21 店家地圖圖 20 店家地圖套疊

(22)

22 除了初始設定選擇出現標示餐廳類店家外，使用者也可以從右上角的第二個控制選單選取想要出現的店家類型，除了餐廳類店家還有其他如影印店等商家類、飲料類、早餐類等等的店家標示可以出現在地圖上，圖22。圖 22 不同店家的選取選取完不同的圖層及店家類型後，可以點選頁面上感興趣的店家標示，將會跳出該店家的資訊框，說明該店家的資訊，如店名、電話、地址、營業時間等資訊，提供使用者更多該店家相關的資訊，圖23。圖 23 店家資訊框

(23)

23 最後若是使用者發現政大附近有其他新開的店家，可以於此頁面下方點選新增新的店家，圖24。將會進入到新增店家資訊，填寫之後我們將會先行審核該店家是否為新開之店家，進而將其新增在本系統當中，圖25。

6.4 建物地圖

首先在最上方的功能表列中選到建物地圖，圖26，接下來底下會出現一張政大的校園地圖，圖27，而圖中橘色的多邊形及代表著政大校園內不同的建築物，使用者可以透過點擊建物，便可得知該建物的詳細資訊。再點擊的同時，會有一說明的彈出式視窗，該視窗中會顯示該建物的照片、相關介紹與相關連結網址，圖28，點按彈出式視窗中最下方的「縮放至」連結可以將地圖放大至建物的位置。如果要調整地圖的大小與位置時，左上方有一加減號的符號按鈕，圖29，可以透過點選加、減號分別放大與縮小地圖。並透過拖曳的功能，直接移動地圖到使用者到想要查看的位置。而加減號中間的房子符號，是代表回到地圖最一開始的檢視位置。圖 25 新增店家連結圖 24 新增店家頁面

(24)

24 另外，為了解政大這地區的變遷以及歷史，本地圖特別搭配了不同的圖層供使用者套用，來查看不同年代時政大校園此塊土地過去的使用情形。使用方法是點選地圖左上角的符號，便會跳出不同的圖層供選擇，圖30，我們提供了過去幾年的台灣經建版地圖，以及日治時期的地形圖供使用者做選擇與套用，夠過點按後勾選便可將不同圖層套用道地圖上，而不需使用時只需再點按一次便可以關閉該圖層。圖 26 在功能表列選到建物地圖圖 27 校園地圖圖 28 建物詳細資訊

(25)

25 圖 29 縮放按鈕圖 30 不同圖層

6.5 搜尋功能

點選首頁左上方的搜尋圖示，如圖31 所示，可以進入餐廳搜尋畫面。圖 31 首頁之搜尋功能在搜尋方框內輸入欲查詢的餐廳，如下圖 32 所示，以下採用位於政大周邊

(26)

26 餐廳- Arty 作為操作示範，輸入完畢後，接著點選搜尋按鈕，即可在同一頁面之地圖下方，出現該餐廳的詳細訊息，例如：該餐廳之照片，聯絡電話，營業時間等，如圖33，為進行搜尋後，所顯示的餐廳介紹。圖 32 以 Arty 餐廳進行搜尋圖 33 搜尋結果此外，在搜尋結果中，亦可以點選按鈕“地圖”，在頁面上方的地圖，便會顯示該餐廳在地圖上的位置，以及餐廳資訊，如下圖34 所示圖 34 點選按鈕”地圖”之顯示畫面

(27)

27

七、參考文獻

W3school，http://www.w3schools.com

Django Tutorial Document，https://www.djangoproject.com The Django Book，http://djangobook.py3k.cn/2.0/

Leaflet Maps，http://leafletjs.com/examples/quick-start/ Bootstrap，http://getbootstrap.com/

Elasticsearch，https://fsxiaodao.gitbooks.io/elasticsearch-reference-zh/content/ Python Tutorial Document，http://www.python.org

Python Tutorial，http://www.tutorialspoint.com/python3/ PostgreSQL，http://www.postgresql.org/

(28)

1

校園地圖系統操作手冊

使用者介面

本系統網址為maps.nccu.edu.tw，可在不同的平台上瀏覽及使用本系統。在不 同廠牌及不同螢幕尺寸之電腦、手機抑或平板皆能呈現本系統之樣貌，不會因為在不同平台上瀏覽而產生版面跑版或功能無法使用的情形。下圖為在不同平台下進入本系統起始頁面之瀏覽情形。

圖 1 Windows Google Crome 瀏覽情形

(29)

2

首頁

首頁主要包含四個部分  店家地圖：使用者可以任意縮放及套疊不同圖層，查看店家詳細資訊。  建物地圖：使用者可以任意縮放及套疊歷史圖層，查看過去政大校園的點點滴滴。  搜尋功能：將搜尋店家資訊呈現在出來並可知道其地理位置。  返回政大：點選右上角之政大校徽即可返回政大首頁。圖 3 網站系統首頁首頁功能部分，政大生活圈下面分別有店家地圖、建物地圖、搜尋功能之簡單介紹，點選下方圖片會分別連結到各功能頁面。圖 4 圖片超連結功能

(30)

3

最下方為如何使用地圖平台，簡單介紹此網站系統應該要如何進行操作，讓第一次使用本網站系統師生得以迅速熟悉並使用之。

(31)

4

店家地圖

點選導航欄上的店家地圖後可以進入到店家地圖頁面，即可看見政大周邊商家的地圖，如圖 6。圖 6 店家地圖地圖的左上角是可以控制縮放大小的按鈕，及右上角有兩個控制選單，第一個選單可以選擇使用不同的底圖如開放街圖、正射影像圖等等，以及可以套疊不同的透明圖層如段籍圖、地形圖等等，圖 7。套疊不同地圖後，可以點選地圖上任意位置關閉該選單。

(32)

5 圖 7 店家地圖套疊除了初始設定選擇出現標示餐廳類店家外，使用者也可以從右上角的第二個控制選單選取想要出現的店家類型，除了餐廳類店家還有其他如影印店等商家類、飲料類、早餐類等等的店家標示可以出現在地圖上，圖 8。圖 8 不同店家的選取

(33)

6

選取完不同的圖層及店家類型後，可以點選頁面上感興趣的店家標示，將會跳出該店家的資訊框，說明該店家的資訊，如店名、電話、地址、營業時間等資訊，提供使用者更多該店家相關的資訊，圖 9。

(34)

7 最後若是使用者發現政大附近有其他新開的店家，可以於此頁面下方點選新增新的店家，圖 11。將會進入到新增店家資訊，填寫之後我們將會先行審核該店家是否為新開之店家，進而將其新增在本系統當中，圖 10。圖 10 新增店家頁面圖 11 新增店家連結

(35)

8

建物地圖

首先在最上方的功能表列中選到建物地圖，圖12，圖 12 在功能表列選到建物地圖接下來底下會出現一張政大的校園地圖，圖13，而圖中橘色的多邊形及代表著政大校園內不同的建築物，使用者可以透過點擊建物，便可得知該建物的詳細資訊。圖 13 校園地圖使用者可以透過點擊建物，便可得知該建物的詳細資訊，該視窗中會顯示該建物的照片、相關介紹與相關連結網址，圖14。按彈出式視窗中最下方的「縮放至」連結可以將地圖放大至建物的位置。圖 14 建物詳細資訊

(36)

9 如果要調整地圖的大小與位置時，左上方有一加減號的符號按鈕，圖15。加減號中間的房子符號，是代表回到地圖最一開始的檢視位置。圖 15 縮放按鈕另外，為了解政大這地區的變遷以及歷史，本地圖特別搭配了不同的圖層供使用者套用，來查看不同年代時政大校園此塊土地過去的使用情形。點選地圖左上角的符號，會跳出不同的圖層供選擇，圖16。我們提供了過去幾年的台灣經建版地圖，以及日治時期的地形圖供使用者做選擇與套用。圖 16 不同圖層

(37)

10

搜尋功能

點選首頁左上方的搜尋圖示，如圖 17 所示，可以進入餐廳搜尋畫面。圖 17 首頁之搜尋功能在搜尋方框內輸入欲查詢的餐廳，如下圖 18 所示，以下採用位於政大周邊餐廳- Arty 作為操作示範，輸入完畢後，接著點選搜尋按鈕，即可在同一頁面之地圖下方，出現該餐廳的詳細訊息，例如：該餐廳之照片，聯絡電話，營業時間等，如圖 19，為進行搜尋後，所顯示的餐廳介紹。圖 18 以 Arty 餐廳進行搜尋圖 19 搜尋結果

(38)

11

此外，在搜尋結果中，亦可以點選按鈕“地圖”，在頁面上方的地圖，便會顯示該餐廳在地圖上的位置，以及餐廳資訊，如下圖 20 所示