政大校園生活圈地理資訊系統建置

(1)

國立政治大學參與大學城規劃研究計畫

成果報告

計畫名稱：

政大校園生活圈地理資訊系

統建置

執行期間：民國 102 年 11 月 1 日至 103 年 4 月 30 日

執行單位：地政學系

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

計畫參與人員：毛白馨、林奕揚、余其樺、翁仕誠

中華民國 103 年 4 月 30 日

(2)

摘要

近年來因為空間資訊領域的產業與應用的快速發展，產生許多便利的應用，如衛星導航系統、電子地圖(Google Maps/Earth)等。本計畫以建立可供留言、評分，且能與電子地圖連結之導覽系統為目的，結合留言板、Google Maps API 與 資料庫製作網站平台，供政大教職員和學生使用。

關鍵字：地理資訊系統、空間資訊、Google Maps API、電子地圖

Abstract

In recent years, the Geomatics related industries and applications have very rapid development. As a result, many convenient applications have emerged, including: satellite navigation system, and Google Maps/Earth. The objective of this study is to establish a platform using dynamic web programming, bulletin board, Google Maps API, and database management system. The system will provide the faculty and students of National Chengchi University with web-based tools to publish blogs along with relevant information, such as map, and photos.

Key word: Geographic Information Systems, Geospatial information, Google Maps

(3)

一、前言

近年來空間資訊領域的學術研究蓬勃發展，更促進了相關領域的產業與應用的快速成長，不但創造了可觀的經濟產值，在民生方面也有許多便利的應用，如衛星導航系統、電子地圖(Google Maps/Earth)等。本計畫之目的為利用空間資訊科技，以及 Web 2.0 的架構建立資訊系統平台，提供全體政大師生更方便的生活圈導覽資訊，並透過網際網路分享，為政大的校園注入更多的活力，凝聚政大人對於母校的向心力。

(5)

二、網站系統

2.1 網站系統目的

建立此具有多媒體圖像與地圖的政大校園生活圈資訊系統，可讓全校師生從互動式電子地圖輕鬆得知各項校園生活圈相關資訊及提供政大人留言闡述想法的平台，藉由網站建立師生聯繫的橋樑。

2.2 使用軟體

2.2.1 Django

Django 是一個以 Python 語言寫成的開放原始碼高階網頁開發框架(Web Frame Work)，原是為了管理線上新聞網站資料開發而成，並於 2005 年 7 月以 BSD 授權模式發布。Django 的主要目的就是可以快速地開發高效能且可運用資料庫的網站，且此軟體的使用可以讓網站的開發更為簡便。Django 支援 MVC (Model-View-Controller)架構，透過內建模組(module)，可達到在短時間建立具有完整功能網站的目標。圖 1. Django 運作的流程圖

(6)

Django 的 MVC 設計樣式和一般 MVC 架構有些不同，Django 的 View 和 Template 都對應到 MVC 架構中的 View，View 的部分是一些基本 HTML 架構的設計，而 Template 則是一些簡單的語法，當使用者以網頁瀏覽器(Browser)對伺服器(Server)發出 Request，Django 便會針對 urls.py 進行呼叫，urls.py 會將 View 中的模組和 Template 中的連結作連接。圖 2. Django MTV 與 MVC 架構圖

2.2.2 Python

Python 是 Django 的基礎語言，它是一種簡易且功能強大、具備物件導向和直譯式的程式語言，具有良好的可讀性。Python 擁有完善的標準函式庫，Python 語言由數字、字串(string)、列表(list)、字典(dictionary)等常見類型和函式組成，而 Python 標準函式庫則提供了系統管理、資料庫介面、圖形系統等額外的功能。並支援各種平台，使得在應用上更為方便。其還有易於擴充、嵌入的特性，適合當作其他應用程式的延伸語言。Youtube、Google、Yahoo!等著名網站都在內部大量使用 Python 語言。

(7)

Python 經常被應用於 Web 開發，由於支援多種標準格式和協定如 MIME 和 HTTP，它非常適合編寫跟網路相關的應用。圖 3. Python 直譯式語言示意圖

2.2.3 資料庫

資料庫(database)為對於某一特定資料，有系統地整理為一個資料的集合，且可以分享給多個使用者使用。使用者可以針對其做查詢或是修改資料的動作。它是資料表(table)的集合體，一資料庫可能由一個或多個資料表組成。

2.2.4 PostgreSQL

PostgreSQL(念法為”Post-gress-Q-L”，簡稱”Postgres”)為一被廣泛使用的開放式免費資料庫軟體。主要的特徵為可程式性，PostgreSQL 讓開發與使用的工作變得更加容易。它可以用於所有主要的作業系統，包括 Linux, Unix 和 Windows。支援如 C/C++, Java, Python 等程式語言。SQL (Structured Query Language)符合 ANSI-SQL2008 的標準，其標準函式庫包含數百個內建功能，可讓使用者在資料庫的建置上更加方便。著名的用戶有 Skype, IMDB, Evergreen 等。

2.3 網頁設計

在網頁製作的過程中，會頻繁地使用 CSS (Cascading Style Sheets，中文為層疊樣式表，又稱階層式樣式表)，由 W3C 維護，是一種樣式表(Style Sheet)語言，它可以決定一個網頁的顏色、字體、排版等顯示特性，其目的是為了對 XHTML 和 HTML 等標示語言(Markup Language)提供顯示層，將文件的結構(使用 HTML 等語言)和顯示(CSS)做區隔。

(8)

2.4 系統使用環境

系統管理者負責系統資料庫與網頁之管理，其使用環境需求如下： ● Microsoft Windows 7 以上

● Internet Explorer 10.0 以上 ● Internet Information Service 5.1 ● Flash player 8 以上

使用者透過本系統提供之使用介面操作各項功能，其使用環境需求如下： ● Internet Explorer 10.0 以上

(9)

三、Google API 及其網頁開發應用

3.1 Google Maps

Google Maps 為 Google 所提供的電子地圖服務，除了提供傳統地圖、衛星影像圖與地形圖之外，近年來還新增了街景圖。除電腦查詢外，亦可在智慧型手機等行動裝置上使用。

3.2 Google Maps API

透過 Google Maps API (Application Programming Interface)，可以將 Google Maps 嵌入網頁，網站上可以自行定義修改。它提供了一個 JavaScript 函式庫，使用者可以利用網站上提供的 js 文件進行修改。在早期版本中，每個網站需要申請一個特定金鑰才能做地圖的使用，而在 v3 版本中，此註冊程序已經被取消了。

3.3 HTML

HTML (Hyper Text Markup Language)是為了「網頁創建和其他可在瀏覽器看到的信息」所設計的標示語言。它具有超文字(HyperText)、超連結(HyperLink)、超媒體(HyperMedia) 的特性，透過 HTTP ( Hyper Text Transfer Protocol) 網路通訊協定，便能夠在世界各地透過 WWW (World Wide Web) 的架構做跨平台的交流。只需要簡單的文書編輯軟體或 HTML 編輯器，就可以編輯 HTML 文件。包含 HTML 的文件檔名為.html，但由於像是 DOS 的舊系統的限制，.htm 也被廣泛地使用。

(10)

3.4 JavaScript

JavaScript 是一種廣泛用於網站開發的直譯式語言，最常於 HTML 上使用，以添加網頁動態功能，但它也可以被用在不同的介面上，如伺服器。JavaScript 和 Java 不同，相似處僅為兩者都承襲 C 語言的風格，所以在語法上會有相似之處。它原本要被命名為 LiveScript，但因為行銷策略而被改為現在的 JavaScript。 JavaScript 和 Jscript 也不同，但應用範圍相似。

JavaScript 不同於其他語言的是，它是一種腳本語言(Script Language)，在執行前不需要先做編譯的動作。它被設計為在 Host 環境下執行的 Script，流灠器是最常見的 Host。

(11)

四、研究問題

本計畫著重於使用者的留言內容與地圖位置的展示，主要的研究問題是如何建置資料豐富的校園生活圈資料庫並呈現於地圖上，並將使用者的個人資料儲存到資料庫，再透過網頁和 Google Maps 呈現，方法說明如下：

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

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

4.2 如何使用 JavaScript 語法結合 Google Maps API

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

4.3 如何利用網頁對 PostgreSQL 的資料庫進行管理

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

(12)

4.4 如何將 PostgreSQL 和 Google Maps API 作連結

PostgreSQL 和 Google Maps API 或許沒有直接的連結關係，但若從資料庫裡抓出當時建置於資料庫的經緯度、圖片、文字等資料，再以 Python 的 function 作撰寫 JavaScript 的動作，並將此些資料一併寫入其中，如此便可以利用 Google Maps API 來呈現校園周遭生活圈在地圖上對應的位置，同時也可以呈現相關的圖片與文字資訊。

4.5 如何用 CSS 程式語言將網頁美化

CSS (Cascading Style Sheets，中文為層疊樣式表)，是一種樣式表(Style Sheet)語言，它主要是管理一個網頁中版面的配置，文字、背景、表格、圖層、連結等都可以利用它做修改，且可寫成.css 檔，在 HTML 文件中連結外部的 CSS 檔案，使得網頁版面樣式的管理更為簡易，亦可讓多個 HTML 文件使用相同 CSS 樣式，達到節省時間的目的。

(13)

五、開發方法

5.1 利用 HTML 及 Dango 建置網站頁面

與大部分的程式語言相同，Django 也能夠建立邏輯判斷式與宣告變數，不同的是這些判斷式與變數名稱可以寫入 HTML，而此種 HTML 即為 Django 的 Template。

Template 中的邏輯判斷式是以 Django Template tag 的方式表示，寫成：{% 邏輯判斷式 %}，例如：{% if i>0 %}，並且搭配{% endif %}作為 tag 結束的指令。而 Template 中的變數則是以{{ 變數名稱 }}的方式表示，如此就可以將即時更新的資料，透過 Django 內建 django.shortcuts 模組的函式 render_to_response()的方式，將資料隨時對應到指定的變數，使之能即時於網頁上呈現。

5.2 利用 Google Maps API 建立具有互動式地圖之網頁

撰寫 JavaScript 程式語言引入 Google Maps API 的函式，將所建立的資料呈現在 Google Maps 上，並將互動式地圖的結果以 HTML 的方式呈現在網際瀏覽器上。結合使用者留下來的資料與 JavaScript，再利用 JavaScript 連結 Google Maps API 的函式將資料呈現在 Google Maps 上，並且以 CSS 程式語言的設計，將 Google Maps 呈現在 HTML 網頁上，讓使用者可以即時地看到自己所留下的資訊呈現於 Map 上的位置，如此便形成互動式的地圖。

(14)

六、使用者手冊

6.1 使用者介面

進入網站的起始頁面如圖 5，點選紅框中的「註冊」按鈕可以進入註冊頁面。

(15)

6.2 帳號密碼註冊及認證

進入註冊頁面，輸入帳號、暱稱、密碼後，以政大信箱做為認證信箱進行註冊。

(16)

註冊成功後系統會提示已寄出認證碼到信箱，至學校信箱收取認證信，之後於系統提示頁面點選「確定」按鈕，會自動連結到認證頁面，再進行認證動作，完成後系統會再提示已成功註冊。

圖 7. 系統提示圖

(17)

圖 9. 帳號認證圖

(18)

若使用者先前已把系統提示頁關閉，可於網站首頁右上方，如圖 11 紅框處點選「認證」按鈕手動進入認證頁面。

(19)

6.3 登入

要進行登入時，於首頁右上方紅框處輸入帳號及密碼，並按下「登入」按鈕，登入完畢後會於右上方顯示已登入的訊息。

(20)

6.5 個人歷史留言

登入後點選紅框處「個人歷史紀錄」按鈕可以檢視使用者自己的歷史留言紀錄。

(21)

6.6 瀏覽地圖及留言

欲使用電子地圖獲得位置資訊，須由首頁左方「圖層選擇區」的下拉式選單中選擇類別，接著於下方副類別處選擇欲瀏覽之類別，下圖 15 以校園建物→學院類別做為示範。點選後即會於地圖顯示該類別的所有位置，點選想要瀏覽的地點會跳出訊息視窗顯示該點的完整資訊。圖 15. 留言類別示意圖圖 16. 訊息視窗圖

(22)

接著點選上圖 16 訊息視窗內右方紅框處的「留言」按鈕，會進入留言頁面，可以在此對該地點評分及留言。留言完畢後點選「送出」按鈕，系統會提示使用者已成功上傳留言，即完成留言動作。

圖 17. 留言頁面圖

(23)

於訊息視窗中，除了該地點的簡介外，也能瀏覽該點的其他圖片。點選訊息視窗上方的「相簿」標籤，即會顯示關於該地點的其他相片。而點選欲瀏覽之相片後會跳出另一個視窗放大顯示該相片。

圖 19. 相簿照片圖

(24)

點選訊息視窗中上方的「悄悄話」標籤，可以瀏覽關於該地點的評分及所有留言。

(25)

6.7 忘記密碼

若是忘記密碼，請選取首頁右上方「忘記密碼」按鈕進入忘記密碼頁面，輸入當初申請之帳號，系統便會發送帳號密碼提示信件至認證信箱中。

圖 22. 忘記密碼頁面圖

(26)

七、結論與建議

本計畫主要目的是以開放原始碼之免費軟體建置網站，利用 HTML、Django 及 Google Maps 的結合，呈現政大人的生活體驗。主要研究成果說明如下： 1. 近年來由於空間資訊領域、資訊科技與電腦網路的蓬勃發展，使得可以免費取得的軟體、資料更加豐富，也促成電子地圖在各種不同領域的應用與學術研究的發展。本計畫結合 Web 2.0、資料庫設計與網站管理技術，建置屬於政大人的影音導覽系統，將有助於凝聚政大人對於母校的向心力。

2. 利用動態網頁設計的技術，結合 Google Maps API，可結合免費電子地圖資源，發展出一套具有互動功能的網站系統，對於具有空間資訊的資料分享很有幫助。 3. 本計畫使用許多免費軟體，相對於商業軟體而言，各種技術服務資源較為有限，參與計畫的同學在系統建置過程中不斷嘗試，也曾遭遇挫折，但在持續的努力下終能完成本計畫，所有參予者均學到許多寶貴經驗，對於將來在學習、研究上應有助益。有關本計畫未來發展及相關建議如下： 1. 未來若有需要，可增加能於行動裝置上使用的功能，增加網頁的普及性。 2. 本計畫需定期檢查是否有不當留言內容，在後續的使用也需要持續管理，若有較高性能的電腦硬體，可增進系統之穩定性與安全性。

(27)

八、參考文獻

自由軟體鑄造場-http://www.openfoundry.org

W3school-http://www.w3schools.com Django 官網-http://www.djangoproject.com Google Maps-http://maps.google.com

Google Maps API-http://www.google.com/apis/maps Python 官網-http://www.python.org

PostgreSQL 官網-http://www.postgresql.org/

Gaberiel Svennerberg, 2010. Beginning Google Maps API3.

Allen Downey, 2008, Think Python - An Introduction to Software Design.

Infobubble-http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubbl e/examples/example.html/