基于網(wǎng)上電子地圖平臺的數(shù)字校園建設

1、第 頁基于網(wǎng)上電子地圖平臺的數(shù)字校園建設0 引言數(shù)字校園建設有很早的歷史，最早始于美國克萊蒙特大學教授凱尼斯格林(Kenneth Green)發(fā)起并主持的一項名為“信息化校園計劃”的大型科研項目。我國高等學校大規(guī)模的信息化建設大多從20世紀90年代開始，并得到快速發(fā)展，在“HYPERLINK http:/ http:/ http:/ http:/ 本文主要介紹基于百度地圖的數(shù)字校園地圖建設，只對校園交通及平面圖進行網(wǎng)絡化，以供在互聯(lián)網(wǎng)上展示和查詢，向人們提供校園交通和位置信息，方便我校師生出行和游客游覽。目前我國很多高校都建立起了自己的數(shù)字虛擬校園，在基于電子地圖平臺的校園建設方面卻處于起步階

2、段，但前景十分廣闊。為此提供的平臺越來越多，國外很多先進技術的引入，及我國近幾年互聯(lián)網(wǎng)技術的突飛猛進，都為虛擬校園建設做出來重要貢獻。目前關于基于百度地圖API的應用方面的論述不是很豐富。主要有廊坊師范學院學報出版的廣東培正學院的梁廣榮、黎紅的基于百度地圖API的虛擬校園實現(xiàn)，主要是把采集到的校園圖景通過flash處理成全景圖頁面，以及3DMax制作的校園三維地圖，通過JavaScript語言在HTML中調(diào)用實現(xiàn)的，實現(xiàn)了校園的某一指定地物的全方位可視化，卻沒有漫游瀏覽的功效2。德州房產(chǎn)測繪隊的杜傳明百度地圖API在小型地理信息系統(tǒng)中的應用，只要是基于百度地圖的房產(chǎn)信息的管理、查詢與展示，對數(shù)

3、據(jù)庫的要求比較高3。青島氣象局的趙文雪的百度MapAPI在氣象自動站監(jiān)測的應用，主要介紹了基于公共網(wǎng)絡地圖的接口實現(xiàn)各氣象站氣象信息的實時更新，這種構想最大的問題是容易受到網(wǎng)絡入侵而影響到整個系統(tǒng)的穩(wěn)定4。西南林業(yè)大學生態(tài)旅游學院的王紅崧、周海晏的基于百度地圖API的旅游地理信息系統(tǒng)開發(fā)，主要針對傳統(tǒng)GIS開發(fā)周期長、過程復雜、建設成本高的缺陷，利用百度地圖API技術建立基于WebGIS的旅游信息系統(tǒng)，進行了系統(tǒng)結(jié)構設計和數(shù)據(jù)庫的構建，從而實現(xiàn)在互聯(lián)網(wǎng)上展示旅游信息，對數(shù)據(jù)庫技術的要求高，更需要對數(shù)據(jù)進行維護、更新5。國內(nèi)關于網(wǎng)絡平臺的數(shù)字校園建設目前正處于成長階段，數(shù)字、3D技術等日趨成熟，

4、虛擬校園更加逼真，但也存在很多不足:數(shù)據(jù)庫技術不成熟，數(shù)據(jù)量大，處理難度增加。3D技術發(fā)展有限，實物虛擬數(shù)字化達不到應有的水平。我國缺乏對數(shù)據(jù)、地理信息、網(wǎng)絡技術、虛擬技術等進行融合匯總的綜合性技術人才。這些嚴重影響了我國在虛擬校園建設方面的發(fā)展。1 基于網(wǎng)絡地圖的虛擬校園建設的平臺選擇1.1平臺比較 百度地圖API是為開發(fā)者免費提供的一套基于百度地圖服務的應用接口，包括JavaScript API、Web服務API、Android SDK、iOS SDK、定位SDK、車聯(lián)網(wǎng)API、LBS云等多種開發(fā)工具與服務，提供基本地圖展現(xiàn)、搜索、定位、逆/地理編碼、路線規(guī)劃、LBS云存儲與檢索等功能，適

5、用于PC端、移動端、服務器等多種設備，多操作系統(tǒng)下的地圖應用開發(fā)。百度地圖API免費對外開放，業(yè)已廣泛應用互聯(lián)網(wǎng)、移動設備、車廠等行業(yè)，主要涉及房產(chǎn)、電商、團購、移動手機應用、生活服務網(wǎng)站等。主要有搜房、糯米、去哪兒網(wǎng)、百姓網(wǎng)、12580、酷訊旅游、同程網(wǎng)、途牛旅游網(wǎng)、好大夫在線、豆角網(wǎng)、墨跡天氣、食神搖搖等。百度地圖宣稱百度地圖API免費對外開放，提供給進行PC端、移動設備端、服務端的地圖應用開發(fā)者。百度地圖API具有官方網(wǎng)站，使用者最好具有一定編程經(jīng)驗，若毫無開發(fā)經(jīng)驗，也可以根據(jù)每款產(chǎn)品提供的開發(fā)指南進行入門學習。此外，讀者若對地圖產(chǎn)品有一定的了解，會更容易入門6。 Google Maps

6、 API是Google為開發(fā)者提供的MapsHYPERLINK http:/ http:/ Maps的地圖服務應用，并借助Google Maps的地圖數(shù)據(jù)為用戶提供HYPERLINK http:/ Maps API除了幫助開發(fā)者將地圖HYPERLINK http:/ http:/ Maps為開發(fā)者提供的地圖API，可以開發(fā)出各種各樣有趣的地圖HYPERLINK http:/ http:/ http:/ 地圖 API 是一種通過 JavaScript 將 Google 地圖HYPERLINK http:/ API。該 API 提供了大量實用工具用以處理地圖,并通過各種服務向地圖添加內(nèi)容，從而使您

7、能夠在您的網(wǎng)站上創(chuàng)建功能全面的地圖HYPERLINK http:/ 百度地圖API是為開發(fā)者免費提供的一套基于百度地圖服務的應用接口，由JavaScript語言編寫，它能夠幫助您在網(wǎng)站中構建功能豐富、交互性強的地圖HYPERLINK http:/ API是一套由JavaScript語言編寫的HYPERLINK http:/ http:/ 準備工作 我們首先了解什么是腳本（JavaScript）,JavaScript是一種基于對象和HYPERLINK http:/ http:/ http:/ http:/ 基于網(wǎng)絡地圖的虛擬校園建設的技術路線 首先利用百度地圖api中的JavaScript提供的

8、示例代碼，簡單的把百度地圖引用到腳本中，再對地圖進行代碼操作，用添加代碼的方法實現(xiàn)地圖中地物的顯示。這些代碼包括控件、覆蓋物、事件等，以用于地圖大小的顯示、縮放、拖拽等，添加覆蓋物用于突出地圖中的地物，使地物更直觀的顯現(xiàn)在地圖中。本文中所用的覆蓋物是用坐標點生成的一個個多邊形繪制的地物形狀，附之以不同的顏色進而將地表的建筑、街道顯示出來。通過標注把主要信息通過紅色小水滴標注出來，通過點擊小水滴觸發(fā)事件，從而達到顯示信息的效果8。 然后在把腳本做好之后，我們需要把它顯示出來，我們通過申請免費空間的方法，通過ftp上傳軟件把我們做好的html文件上傳到空間中，其他人通過訪問主頁的形式就可以看到做好

9、的文件。如下圖所示：圖1 技術路線圖3 基于網(wǎng)絡地圖的虛擬校園建設的具體實現(xiàn)3.1 代碼引用編寫與修改調(diào)試第一步：引用百度地圖最新版本1.4，并自定義地圖大小尺寸定義尺寸body, html,#allmap width: 100%;height: 100%;overflow: hidden;margin:0; /尺寸為填充整個瀏覽器#l-mapheight:100%;width:78%;float:left;border-right:2px solid #bcbcbc;#r-resultheight:100%;width:20%;float:left;引用百度地圖api文件：type=text

10、/javascript src=http:/ /版本1.4第二步：創(chuàng)建地圖事例與點坐標并進行地圖初始化varmap=newBMap.Map(container);/創(chuàng)建地圖實例varpoint=newBMap.Point(116.404,39.915);/創(chuàng)建點坐標map.centerAndZoom(point,15);/初始化地圖，設置中心點坐標和地圖級別BMap.Map.centerAndZoom()方法要求設置中心點坐標和地圖級別。 地圖必須經(jīng)過初始化才可以執(zhí)行其他操作。之后我們可以增加一個監(jiān)聽事件，而且可以設置返回值，此處增加返回坐標信息map.addEventListener(cli

11、ck,function(e) alert(e.point.lng + , + e.point.lat););以上做完，返回坐標值，其效果如下：圖2 監(jiān)聽事件對點擊觸發(fā)的回應第三步：增加文本信息窗口并加載顯示，可以設置窗口的大小和要顯示的信息var opts = width : 100, /文本框?qū)挾?height: 80, /文本框高度 title : 南陽師院 /文本框標題var infoWindow = new BMap.InfoWindow(環(huán)境科學與旅游學院, opts); /文本框內(nèi)容map.openInfoWindow(infoWindow,point);如下：圖3 展示了添加的文

12、本信息第四步：根據(jù)地物坐標生成多邊形來表示地圖上的建筑道路等，多邊形通過添加覆蓋物的形式向地圖中添加varmap=newBMap.Map(container);varpoint=newBMap.Point(116.404,39.915);map.centerAndZoom(point,15);/添加自定義覆蓋物varmySquare=newSquareOverlay(map.getCenter(),100,red);map.addOverlay(mySquare);var polygon = new BMap.Polygon( /添加多邊形 new BMap.Point(112.497061,

13、32.980949), /添加多邊形坐標點 new BMap.Point(112.497778,32.981183), new BMap.Point(112.498075,32.980676), new BMap.Point(112.497419,32.980366), strokeColor:red, strokeWeight:3, strokeOpacity:0.5); /定義線寬和顏色var polygon1 = new BMap.Polygon( new BMap.Point(112.496224,32.982728), new BMap.Point(112.497231,32.982

14、735), new BMap.Point(112.497455,32.981448), new BMap.Point(112.496386,32.98135), strokeColor:blue, strokeWeight:3, strokeOpacity:0.5);現(xiàn)在向地圖中添加2個多邊形覆蓋物，多邊形各有四個點坐標構成，有代碼自動生成多邊形，其它的繪制方法同上，此處不再顯示。效果如下9：圖4 添加的多邊形第五步：向地圖中添加標注信息，對每個多邊形所標示的建筑物進行命名和注釋varmap=newBMap.Map(container);varpoint=newBMap.Point(116.4

15、04,39.915);map.centerAndZoom(point,15);varmarker=newBMap.Marker(point);/創(chuàng)建標注 map.addOverlay(marker);/將標注添加到地圖中var sContent1 =科技樓 + + ; /定義標注尺寸和名稱var point = new BMap.Point(112.497662, 32.980972);var marker = new BMap.Marker(point);var infoWindow = new BMap.InfoWindow(sContent1); map.addOverlay(marke

16、r);marker.addEventListener(click, function() / 設置監(jiān)聽事件 this.openInfoWindow(infoWindow); document.getElementById(imgDemo).onload = function () infoWindow.redraw(); /信息展示 );上圖以科技樓為例來說明，增加監(jiān)聽事件，點擊自動返回值，其他在此省去，效果如圖10:圖5 點擊顯示的標注信息4 成果展示匯總以上步驟，得到如下成果圖示：圖6 最終成果5 結(jié)論與展望本文主要是在前人研究的基礎進行總結(jié)和改進，試圖對js網(wǎng)絡和地理信息技術進行結(jié)合，把

17、校園平面信息進行整合展示到網(wǎng)絡平臺上，并提供信息查詢，能夠有效地將校園信息的了解范圍擴展到最大。由于本人在數(shù)據(jù)庫方面知識有限，并沒有結(jié)合數(shù)據(jù)庫技術提供更多的信息查詢。加之網(wǎng)絡取點難度大，所以在地物描繪精度上不是很好，在技術上還需要更大的改進。在當今社會，信息化突飛猛進，網(wǎng)絡技術更是一日千里，用好網(wǎng)絡這個工具能給我們生活帶來無盡的方便，給我們展示網(wǎng)絡平臺強大的信息量。隨著社會的發(fā)展，開源逐漸成為一種時尚，自定義讓人們的生活更加充滿生機。網(wǎng)絡虛擬逐漸走入人們的生活，讓現(xiàn)實的東西在網(wǎng)絡世界里都能找到映像，虛擬校園旨在打造網(wǎng)絡的校園平臺，豐富我們的生活。在借鑒了google地圖api的基礎上，和吸收了

18、國內(nèi)學者基于百度地圖api在其他領域的開發(fā)經(jīng)驗，給本文的寫作提供了有力的指導特別是廣東培正學院的梁廣榮、黎紅的基于百度地圖API的虛擬校園實 現(xiàn)，讓本文的寫作有了方向和參考。文中有些不完善的地方還請見諒，由于時間關系建筑物的坐標點只取了4個，距離現(xiàn)實還有很大差距，信息展示的不是很全面，在虛擬校園的建設上還有很長的路要走。參 考 文 獻1 Online baidubaike . 2013-4-1http:/ 梁廣榮、黎紅等.基于百度地圖API的虛擬校園實現(xiàn)J.廊坊師范學院學報，2012年12月6日2013-4-1.3杜傳明.百度地圖API在小型地理信息系統(tǒng)中的應用J，2011年4月,2013-4

19、-1.4 趙文雪.百度MapAPI在氣象自動站監(jiān)測的應用，2012年6月，2013-4-1.5王紅崧、周海晏等.基于百度地圖API的旅游地理信息系統(tǒng)開發(fā)J.現(xiàn)代計算機.2012年8月, 60-636 Online baidubaike .baidumap api 2013-4-1http:/ 高峰. HYPERLINK http:/ t _blank JavaScript在基于SVG的網(wǎng)絡地圖中的應用，2004 江西師范大學學報：自然科學版.8 Online 百度地圖api 2013-4-1http:/ Online 百度地圖開發(fā)指南，覆蓋物 http:/ 10 Online 百度地圖api示

20、例Demo http:/ construction of digital campus based on web map platform 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 and 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,