基于網(wǎng)上電子地圖平臺的數(shù)字校園建設(shè)-畢業(yè)論文

1、<p>　　基于網(wǎng)上電子地圖平臺的數(shù)字校園建設(shè)</p><p>　　摘要：通過網(wǎng)上電子地圖平臺的數(shù)字校園建設(shè)能夠?qū)⑿@各項信息在網(wǎng)絡(luò)上進行展示，使有關(guān)信息得到及時的傳達和顯示，為宣傳和增加學(xué)校知名度提供平臺，同時簡化校園管理難度，增加管理的有效性，保障校園各項生活平穩(wěn)有序進行，從而為學(xué)校在網(wǎng)絡(luò)上的發(fā)展提供了更廣闊的天地，也為學(xué)生和社會各界了解學(xué)校提供了很好的通道。本文介紹了基于網(wǎng)絡(luò)地圖的數(shù)字校園建設(shè)，闡

2、述了百度地圖API在展示校園平面圖方面的具體應(yīng)用，使用JavaScript語言，將校園的平面圖等校園地理信息添加到電子地圖平臺上，實現(xiàn)數(shù)字校園地圖服務(wù)。目前的展示信息量有限，繪制還不是很精細，需要進一步的完善。</p><p>　　關(guān)鍵詞：百度地圖API； 數(shù)字校園； WebGIS； 網(wǎng)上電子地圖</p><p><b>　　0 引言</b></p>

3、<p>　　數(shù)字校園建設(shè)有很早的歷史，最早始于美國克萊蒙特大學(xué)教授凱尼斯·格林(Kenneth Green)發(fā)起并主持的一項名為“信息化校園計劃”的大型科研項目。我國高等學(xué)校大規(guī)模的信息化建設(shè)大多從20世紀90年代開始，并得到快速發(fā)展，在“面向21世紀教育振興行動計劃”中提出并強調(diào)了要利用信息技術(shù)來推進教育的改革。我國“數(shù)字校園”就是在這一教育改革的理念上提出來的[1]。在隨后的數(shù)字校園建設(shè)實踐過程中，數(shù)字校園的理念

4、得到了逐步擴充和完善。</p><p>　　數(shù)字化校園是利用計算機技術(shù)、網(wǎng)絡(luò)技術(shù)、通訊技術(shù)以及科學(xué)規(guī)范的管理對校園內(nèi)的教學(xué)、科研、管理和生活服務(wù)有關(guān)的所有信息資源進行整合、集成和全面的數(shù)字化，以構(gòu)成統(tǒng)一的用戶管理、統(tǒng)一的資源管理和統(tǒng)一的權(quán)限控制；通過組織和業(yè)務(wù)流程再造，推動學(xué)校進行制度創(chuàng)新、管理創(chuàng)新，最終實現(xiàn)教育信息化、決策科學(xué)化和管理規(guī)范化[1]。</p><p>　　隨著互聯(lián)網(wǎng)的迅猛發(fā)

5、展，網(wǎng)絡(luò)已深入社會的方方面面，網(wǎng)絡(luò)地圖作為網(wǎng)絡(luò)時代的產(chǎn)物為人們的出行、導(dǎo)航、定位等提供了方便快捷的服務(wù)，逐漸成為人們生活中不可或缺的產(chǎn)品?；诰W(wǎng)絡(luò)地圖的虛擬校園建設(shè)能夠把握網(wǎng)絡(luò)發(fā)展潮流，充分利用網(wǎng)絡(luò)平臺與資源來展示校園，成為宣傳和發(fā)展校園自身的利器。</p><p>　　本文主要介紹基于百度地圖的數(shù)字校園地圖建設(shè)，只對校園交通及平面圖進行網(wǎng)絡(luò)化，以供在互聯(lián)網(wǎng)上展示和查詢，向人們提供校園交通和位置信息，方便我校師生

6、出行和游客游覽。</p><p>　　目前我國很多高校都建立起了自己的數(shù)字虛擬校園，在基于電子地圖平臺的校園建設(shè)方面卻處于起步階段，但前景十分廣闊。為此提供的平臺越來越多，國外很多先進技術(shù)的引入，及我國近幾年互聯(lián)網(wǎng)技術(shù)的突飛猛進，都為虛擬校園建設(shè)做出來重要貢獻。</p><p>　　目前關(guān)于基于百度地圖API的應(yīng)用方面的論述不是很豐富。主要有廊坊師范學(xué)院學(xué)報出版的廣東培正學(xué)院的梁廣榮、黎紅

7、的基于百度地圖API的虛擬校園實現(xiàn)，主要是把采集到的校園圖景通過flash處理成全景圖頁面，以及3DMax制作的校園三維地圖，通過JavaScript語言在HTML中調(diào)用實現(xiàn)的，實現(xiàn)了校園的某一指定地物的全方位可視化，卻沒有漫游瀏覽的功效[2]。德州房產(chǎn)測繪隊的杜傳明百度地圖API在小型地理信息系統(tǒng)中的應(yīng)用，只要是基于百度地圖的房產(chǎn)信息的管理、查詢與展示，對數(shù)據(jù)庫的要求比較高[3]。青島氣象局的趙文雪的百度MapAPI在氣象自動站監(jiān)測的

8、應(yīng)用，主要介紹了基于公共網(wǎng)絡(luò)地圖的接口實現(xiàn)各氣象站氣象信息的實時更新，這種構(gòu)想最大的問題是容易受到網(wǎng)絡(luò)入侵而影響到整個系統(tǒng)的穩(wěn)定[4]。西南林業(yè)大學(xué)生態(tài)旅游學(xué)院的王紅崧、周海晏的基于百度地圖API的旅游地理信息系統(tǒng)開發(fā)，主要針對傳統(tǒng)GIS開發(fā)周期長、過程復(fù)雜、建設(shè)成本高的缺陷，利用百度地圖API技術(shù)建立基于WebGIS的旅游信息系統(tǒng)，進行了系統(tǒng)結(jié)構(gòu)設(shè)計和數(shù)據(jù)庫的構(gòu)建，從而實現(xiàn)在互聯(lián)網(wǎng)上展示旅游信息，對數(shù)據(jù)庫技術(shù)的要求高，更需要對數(shù)據(jù)進行

9、維護、更新[</p><p>　　國內(nèi)關(guān)于網(wǎng)絡(luò)平臺的數(shù)字校園建設(shè)目前正處于成長階段，數(shù)字、3D技術(shù)等日趨成熟，虛擬校園更加逼真，但也存在很多不足:數(shù)據(jù)庫技術(shù)不成熟，數(shù)據(jù)量大，處理難度增加。3D技術(shù)發(fā)展有限，實物虛擬數(shù)字化達不到應(yīng)有的水平。我國缺乏對數(shù)據(jù)、地理信息、網(wǎng)絡(luò)技術(shù)、虛擬技術(shù)等進行融合匯總的綜合性技術(shù)人才。這些嚴重影響了我國在虛擬校園建設(shè)方面的發(fā)展。</p><p>　　1 基于網(wǎng)

10、絡(luò)地圖的虛擬校園建設(shè)的平臺選擇</p><p><b>　　1.1平臺比較</b></p><p>　　百度地圖API是為開發(fā)者免費提供的一套基于百度地圖服務(wù)的應(yīng)用接口，包括JavaScript API、Web服務(wù)API、Android SDK、iOS SDK、定位SDK、車聯(lián)網(wǎng)API、LBS云等多種開發(fā)工具與服務(wù)，提供基本地圖展現(xiàn)、搜索、定位、逆/地理編碼、路線規(guī)劃

11、、LBS云存儲與檢索等功能，適用于PC端、移動端、服務(wù)器等多種設(shè)備，多操作系統(tǒng)下的地圖應(yīng)用開發(fā)。百度地圖API免費對外開放，業(yè)已廣泛應(yīng)用互聯(lián)網(wǎng)、移動設(shè)備、車廠等行業(yè)，主要涉及房產(chǎn)、電商、團購、移動手機應(yīng)用、生活服務(wù)網(wǎng)站等。主要有搜房、糯米、去哪兒網(wǎng)、百姓網(wǎng)、12580、酷訊旅游、同程網(wǎng)、途牛旅游網(wǎng)、好大夫在線、豆角網(wǎng)、墨跡天氣、食神搖搖等。百度地圖宣稱百度地圖API免費對外開放，提供給進行PC端、移動設(shè)備端、服務(wù)端的地圖應(yīng)用開發(fā)者。百度

12、地圖API具有官方網(wǎng)站，使用者最好具有一定編程經(jīng)驗，若毫無開發(fā)經(jīng)驗，也可以根據(jù)每款產(chǎn)品提供的開發(fā)指南進行入門學(xué)習(xí)。此外，讀者若對地圖產(chǎn)品有一定的了解，會更容易入門[6]。</p><p>　　Google Maps API是Google為開發(fā)者提供的Maps編程API。它允許開發(fā)者在不必建立自己的地圖服務(wù)器的情況下，將GoogleMaps地圖數(shù)據(jù)嵌入到網(wǎng)站之中，從而實現(xiàn)嵌入Google Maps的地圖服務(wù)應(yīng)用，并

13、借助Google Maps的地圖數(shù)據(jù)為用戶提供位置服務(wù)。Google Maps API除了幫助開發(fā)者將地圖嵌入到Web應(yīng)用中之外，還允許開發(fā)者利用JavaScript腳本進行應(yīng)用開發(fā)拓展，給地圖添加標注和路徑及其他圖層覆蓋物，或者響應(yīng)用戶的點擊動作，并顯示包含內(nèi)容信息在內(nèi)的氣泡提示窗口。通過Google Maps為開發(fā)者提供的地圖API，可以開發(fā)出各種各樣有趣的地圖Mash-up應(yīng)用，還可以將不同地圖圖層加載到應(yīng)用中，如衛(wèi)星影像、根據(jù)海

14、拔高度繪制的高山和植被地形圖、街道視圖等，從而幫助開發(fā)者打造個性化的地圖應(yīng)用站點。Google 地圖 API 是一種通過 JavaScript 將 Google 地圖嵌入到您的網(wǎng)頁的 API。該 API 提供了大量實用工具用以處理地圖,并通過各種服務(wù)向地圖添加內(nèi)容，從而使您能夠在您的網(wǎng)站上創(chuàng)建功能全面的地圖應(yīng)用程序。</p><p><b>　　1.2選擇</b></p>&l

15、t;p>　　百度地圖API是為開發(fā)者免費提供的一套基于百度地圖服務(wù)的應(yīng)用接口，由JavaScript語言編寫，它能夠幫助您在網(wǎng)站中構(gòu)建功能豐富、交互性強的地圖應(yīng)用程序。百度地圖API不僅包含構(gòu)建地圖的基本功能接口，還提供了諸如本地搜索、路線規(guī)劃等數(shù)據(jù)服務(wù)。功能強大，開發(fā)過程大大簡化，特別是開源庫為大家提供更廣闊的開發(fā)空間。</p><p>　　基于網(wǎng)絡(luò)地圖的虛擬校園建設(shè)，主要基于JavaScript把相關(guān)信

16、息以腳本的形式展現(xiàn)到網(wǎng)頁中去，人們可以通過域名網(wǎng)址進行訪問。百度地圖JavaScript API是一套由JavaScript語言編寫的應(yīng)用程序接口，它能夠幫助您在網(wǎng)站中構(gòu)建功能豐富、交互性強的地圖應(yīng)用程序。百度地圖API不僅包含構(gòu)建地圖的基本功能接口，還提供了諸如本地搜索、路線規(guī)劃等數(shù)據(jù)服務(wù)。適用于PC或移動設(shè)備端的基于瀏覽器的開發(fā)。JS版本還為用戶開放了開源庫，簡化開發(fā)。比較適用于初級開發(fā)者，而且其功能越來越完善，加之，考慮到goog

17、le服務(wù)器退出大陸地區(qū)，其穩(wěn)定性欠缺，故而選擇國內(nèi)的百度地圖api中的JavaScript。</p><p><b>　　1.3 準備工作</b></p><p>　　我們首先了解什么是腳本（JavaScript）,JavaScript是一種基于對象和事件驅(qū)動并具有相對安全性的客戶端腳本語言。同時也是一種廣泛用于客戶端Web開發(fā)的腳本語言，常用來給HTML網(wǎng)頁添加動態(tài)

18、功能，比如響應(yīng)用戶的各種操作。百度地圖api為用戶提供更加簡易便捷的JavaScript入門和各種實例，給初學(xué)者提供更加直觀的學(xué)習(xí)資源。在此基礎(chǔ)上，我們學(xué)習(xí)js的各種控件、事例、覆蓋物、圖層、工具和各種服務(wù)。在此，我們要有腳本編寫軟件，對示例代碼進行編寫和修改調(diào)試。與之對應(yīng)我們要有與百度地圖api支持兼容的瀏覽器進行展示[7]。</p><p>　　2 基于網(wǎng)絡(luò)地圖的虛擬校園建設(shè)的技術(shù)路線</p>

19、<p>　　首先利用百度地圖api中的JavaScript提供的示例代碼，簡單的把百度地圖引用到腳本中，再對地圖進行代碼操作，用添加代碼的方法實現(xiàn)地圖中地物的顯示。這些代碼包括控件、覆蓋物、事件等，以用于地圖大小的顯示、縮放、拖拽等，添加覆蓋物用于突出地圖中的地物，使地物更直觀的顯現(xiàn)在地圖中。本文中所用的覆蓋物是用坐標點生成的一個個多邊形繪制的地物形狀，附之以不同的顏色進而將地表的建筑、街道顯示出來。通過標注把主要信息通過紅

20、色小水滴標注出來，通過點擊小水滴觸發(fā)事件，從而達到顯示信息的效果[8]。</p><p>　　然后在把腳本做好之后，我們需要把它顯示出來，我們通過申請免費空間的方法，通過ftp上傳軟件把我們做好的html文件上傳到空間中，其他人通過訪問主頁的形式就可以看到做好的文件。如下圖所示：</p><p><b>　　圖1 技術(shù)路線圖</b></p><p&

21、gt;　　3 基于網(wǎng)絡(luò)地圖的虛擬校園建設(shè)的具體實現(xiàn)</p><p>　　3.1 代碼引用編寫與修改調(diào)試</p><p>　　第一步：引用百度地圖最新版本1.4，并自定義地圖大小尺寸</p><p><b>　　定義尺寸</b></p><p>　　<!DOCTYPE html></p><

22、;p><b>　　<html></b></p><p><b>　　<head></b></p><p>　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></p>

23、;<p>　　<style type="text/css"></p><p>　　body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}  //尺寸為填充整個瀏覽器</p><p>　　#l-map{height:100%;width:78

24、%;float:left;border-right:2px solid #bcbcbc;}</p><p>　　#r-result{height:100%;width:20%;float:left;}</p><p>　　引用百度地圖api文件：</p><p>　　<script>type="text/javascript" src

25、="http://api.map.baidu.com/api?v=1.4"></script>  //版本1.4</p><p>　　第二步：創(chuàng)建地圖事例與點坐標并進行地圖初始化</p><p><b>　　<body>  </b></p><p>　　<

26、div id="container"></div> </p><p>　　<script type="text/javascript"> </p><p>　　var map = new BMap.Map("container&qu

27、ot;);//創(chuàng)建地圖實例  </p><p>　　var point = new BMap.Point(116.404, 39.915);//創(chuàng)建點坐標  </p><p>　　map.centerAndZoom(point, 15);   // 初

28、始化地圖，設(shè)置中心點坐標和地圖級別  </p><p>　　BMap.Map.centerAndZoom()方法要求設(shè)置中心點坐標和地圖級別。 地圖必須經(jīng)過初始化才可以執(zhí)行其他操作。之后我們可以增加一個監(jiān)聽事件，而且可以設(shè)置返回值，此處增加返回坐標信息</p><p>　　map.addEventListener("click",function(e

29、){</p><p>　　alert(e.point.lng + "," + e.point.lat);</p><p><b>　　});</b></p><p>　　以上做完，返回坐標值，其效果如下：</p><p>　　圖2 監(jiān)聽事件對點擊觸發(fā)的回應(yīng)</p><p>　　

30、第三步：增加文本信息窗口并加載顯示，可以設(shè)置窗口的大小和要顯示的信息</p><p>　　var opts = {</p><p>　　width : 100,  //文本框?qū)挾?lt;/p><p>　　height: 80,  //文本框高度</p><p>　　title : "南陽師院"

31、  //文本框標題</p><p><b>　　}</b></p><p>　　var infoWindow = new BMap.InfoWindow("環(huán)境科學(xué)與旅游學(xué)院", opts);  //文本框內(nèi)容</p><p>　　map.openInfoWindow(infoWindow,point)

32、;</p><p><b>　　如下：</b></p><p>　　圖3 展示了添加的文本信息</p><p>　　第四步：根據(jù)地物坐標生成多邊形來表示地圖上的建筑道路等，多邊形通過添加覆蓋物的形式向地圖中添加</p><p>　　var map = new BMap.Map(&q

33、uot;container");    </p><p>　　var point = new BMap.Point(116.404, 39.915);    </p><p>　　map.centerAndZoom(point, 15);&#

34、160;   </p><p>　　// 添加自定義覆蓋物   </p><p>　　var mySquare = new SquareOverlay(map.getCenter(), 100, "red");  

35、0; </p><p>　　map.addOverlay(mySquare);  </p><p>　　var polygon = new BMap.Polygon([ //添加多邊形</p><p>　　new BMap.Point(112.497061,32.980949), //添加多邊形坐標點</p>

36、;<p>　　new BMap.Point(112.497778,32.981183),</p><p>　　new BMap.Point(112.498075,32.980676),</p><p>　　new BMap.Point(112.497419,32.980366)</p><p>　　], {strokeColor:"red&q

37、uot;, strokeWeight:3, strokeOpacity:0.5}); //定義線寬和顏色</p><p>　　var polygon1 = new BMap.Polygon([</p><p>　　new BMap.Point(112.496224,32.982728),</p><p>　　new BMap.Point(112.497231,32

38、.982735),</p><p>　　new BMap.Point(112.497455,32.981448),</p><p>　　new BMap.Point(112.496386,32.98135)</p><p>　　], {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5});

39、</p><p>　　現(xiàn)在向地圖中添加2個多邊形覆蓋物，多邊形各有四個點坐標構(gòu)成，有代碼自動生成多邊形，其它的繪制方法同上，此處不再顯示。</p><p><b>　　效果如下[9]：</b></p><p><b>　　圖4 添加的多邊形</b></p><p>　　第五步：向地圖中添加標注信息，

40、對每個多邊形所標示的建筑物進行命名和注釋</p><p>　　var map = new BMap.Map("container");    </p><p>　　var point = new BMap.Point(116.404, 39.

41、915);    </p><p>　　map.centerAndZoom(point, 15);    </p><p>　　var marker = new BMap.Marker(point);   //創(chuàng)建標注 map.ad

42、dOverlay(marker);     // 將標注添加到地圖中</p><p>　　var sContent1 =</p><p>　　"<h4 style1='margin:0 0 5px 0;padding:0.2em 0'>科技樓</h4>" + </p

43、><p>　　"<p1 style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>" + </p><p>　　"</div1>";  // 定義標注尺寸和名稱</p><p>　　var

44、point = new BMap.Point(112.497662, 32.980972);</p><p>　　var marker = new BMap.Marker(point);</p><p>　　var infoWindow = new BMap.InfoWindow(sContent1); </p><p>　　map.addOverlay(mark

45、er);</p><p>　　marker.addEventListener("click", function(){  //  設(shè)置監(jiān)聽事件</p><p>　　this.openInfoWindow(infoWindow);</p><p>　　document.getElementById('imgD

46、emo').onload = function ()</p><p><b>　　{</b></p><p>　　infoWindow.redraw();  // 信息展示</p><p><b>　　}</b></p><p><

47、b>　　});</b></p><p>　　上圖以科技樓為例來說明，增加監(jiān)聽事件，點擊自動返回值，其他在此省去，效果如圖[10]:</p><p>　　圖5 點擊顯示的標注信息</p><p><b>　　4 成果展示</b></p><p>　　匯總以上步驟，得到如下成果圖示：</p>

48、<p><b>　　圖6 最終成果</b></p><p><b>　　5 結(jié)論與展望</b></p><p>　　本文主要是在前人研究的基礎(chǔ)進行總結(jié)和改進，試圖對js網(wǎng)絡(luò)和地理信息技術(shù)進行結(jié)合，把校園平面信息進行整合展示到網(wǎng)絡(luò)平臺上，并提供信息查詢，能夠有效地將校園信息的了解范圍擴展到最大。由于本人在數(shù)據(jù)庫方面知識有限，并沒有結(jié)合

49、數(shù)據(jù)庫技術(shù)提供更多的信息查詢。加之網(wǎng)絡(luò)取點難度大，所以在地物描繪精度上不是很好，在技術(shù)上還需要更大的改進。</p><p>　　在當今社會，信息化突飛猛進，網(wǎng)絡(luò)技術(shù)更是一日千里，用好網(wǎng)絡(luò)這個工具能給我們生活帶來無盡的方便，給我們展示網(wǎng)絡(luò)平臺強大的信息量。隨著社會的發(fā)展，開源逐漸成為一種時尚，自定義讓人們的生活更加充滿生機。網(wǎng)絡(luò)虛擬逐漸走入人們的生活，讓現(xiàn)實的東西在網(wǎng)絡(luò)世界里都能找到映像，虛擬校園旨在打造網(wǎng)絡(luò)的校園

50、平臺，豐富我們的生活。</p><p>　　在借鑒了google地圖api的基礎(chǔ)上，和吸收了國內(nèi)學(xué)者基于百度地圖api在其他領(lǐng)域的開發(fā)經(jīng)驗，給本文的寫作提供了有力的指導(dǎo)特別是廣東培正學(xué)院的梁廣榮、黎紅的基于百度地圖API的虛擬校園實 現(xiàn)，讓本文的寫作有了方向和參考。文中有些不完善的地方還請見諒，由于時間關(guān)系建筑物的坐標點只取了4個，距離現(xiàn)實還有很大差距，信息展示的不是很全面，在虛擬校園的建設(shè)上還有很長的路要走。&

51、lt;/p><p><b>　　參 考 文 獻</b></p><p>　　[1] Online baidubaike . [2013-4-1]</p><p>　　http://baike.baidu.com/view/959300.htm</p><p>　　[2] 梁廣榮、黎紅等.基于百度地圖API的虛擬校園實現(xiàn)[J]

52、.廊坊師范學(xué)院學(xué)報，2012年12月6日[2013-4-1].</p><p>　　[3]杜傳明.百度地圖API在小型地理信息系統(tǒng)中的應(yīng)用[J]，2011年4月,[2013-4-1].</p><p>　　[4] 趙文雪.百度MapAPI在氣象自動站監(jiān)測的應(yīng)用，2012年6月，[2013-4-1].</p><p>　　[5]王紅崧、周海晏等.基于百度地圖API的旅

53、游地理信息系統(tǒng)開發(fā)[J].現(xiàn)代計算機.2012年8月, 60-63</p><p>　　[6] Online baidubaike .baidumap api [2013-4-1]</p><p>　　http://baike.baidu.com/view/3521171.htm</p><p>　　[7] 高峰.JavaScript在基于SVG的網(wǎng)絡(luò)地圖中的應(yīng)

54、用，2004 江西師范大學(xué)學(xué)報：自然科學(xué)版.</p><p>　　[8] Online 百度地圖api [2013-4-1]</p><p>　　http://developer.baidu.com/map/jshome.htm</p><p>　　[9] Online 百度地圖開發(fā)指南，覆蓋物 </p><p>　　http://d

55、eveloper.baidu.com/map/jsdevelop-4.htm </p><p>　　[10] Online 百度地圖api示例Demo </p><p>　　http://developer.baidu.com/map/jsdemo.htm</p><p>　　The construction of digital campus based on

56、web map platform </p><p>　　Abstract：Through the construction of digital campus net electronic map platform can be demonstrated on the information of campus network, so the information timely communication an

57、d display, the popularity of the school to provide a platform for propaganda and increase, while simplifying the campus management difficulty, increase the effectiveness of management, guarantee the smooth and orderly ca