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

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

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

3、據(jù)庫的要求比較高3。青島氣象局的趙文雪的百度MapAPI在氣象自動站監(jiān)測的應(yīng)用，主要介紹了基于公共網(wǎng)絡(luò)地圖的接口實(shí)現(xiàn)各氣象站氣象信息的實(shí)時(shí)更新，這種構(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)，進(jìn)行了系統(tǒng)結(jié)構(gòu)設(shè)計(jì)和數(shù)據(jù)庫的構(gòu)建，從而實(shí)現(xiàn)在互聯(lián)網(wǎng)上展示旅游信息，對數(shù)據(jù)庫技術(shù)的要求高，更需要對數(shù)據(jù)進(jìn)行維護(hù)、更新5。國內(nèi)關(guān)于網(wǎng)絡(luò)平臺的數(shù)字校園建設(shè)目前正處于成長階段，數(shù)字、3D技術(shù)等日趨成熟，

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

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

6、 API是Google為開發(fā)者提供的MapsHYPERLINK http:/ http:/ Maps的地圖服務(wù)應(yīng)用，并借助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 提供了大量實(shí)用工具用以處理地圖,并通過各種服務(wù)向地圖添加內(nèi)容，從而使您

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

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

9、的文件。如下圖所示：圖1 技術(shù)路線圖3 基于網(wǎng)絡(luò)地圖的虛擬校園建設(shè)的具體實(shí)現(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)建地圖事例與點(diǎn)坐標(biāo)并進(jìn)行地圖初始化varmap=newBMap.Map(container);/創(chuàng)建地圖實(shí)例varpoint=newBMap.Point(116.404,39.915);/創(chuàng)建點(diǎn)坐標(biāo)map.centerAndZoom(point,15);/初始化地圖，設(shè)置中心點(diǎn)坐標(biāo)和地圖級別BMap.Map.centerAndZoom()方法要求設(shè)置中心點(diǎn)坐標(biāo)和地圖級別。 地圖必須經(jīng)過初始化才可以執(zhí)行其他操作。之后我們可以增加一個監(jiān)聽事件，而且可以設(shè)置返回值，此處增加返回坐標(biāo)信息map.addEventListener(cli

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

12、本信息第四步：根據(jù)地物坐標(biāo)生成多邊形來表示地圖上的建筑道路等，多邊形通過添加覆蓋物的形式向地圖中添加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), /添加多邊形坐標(biāo)點(diǎn) 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個多邊形覆蓋物，多邊形各有四個點(diǎn)坐標(biāo)構(gòu)成，有代碼自動生成多邊形，其它的繪制方法同上，此處不再顯示。效果如下9：圖4 添加的多邊形第五步：向地圖中添加標(biāo)注信息，對每個多邊形所標(biāo)示的建筑物進(jìn)行命名和注釋varmap=newBMap.Map(container);varpoint=newBMap.Point(116.4

15、04,39.915);map.centerAndZoom(point,15);varmarker=newBMap.Marker(point);/創(chuàng)建標(biāo)注 map.addOverlay(marker);/將標(biāo)注添加到地圖中var sContent1 =科技樓 + + ; /定義標(biāo)注尺寸和名稱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() / 設(shè)置監(jiān)聽事件 this.openInfoWindow(infoWindow); document.getElementById(imgDemo).onload = function () infoWindow.redraw(); /信息展示 );上圖以科技樓為例來說明，增加監(jiān)聽事件，點(diǎn)擊自動返回值，其他在此省去，效果如圖10:圖5 點(diǎn)擊顯示的標(biāo)注信息4 成果展示匯總以上步驟，得到如下成果圖示：圖6 最終成果5 結(jié)論與展望本文主要是在前人研究的基礎(chǔ)進(jìn)行總結(jié)和改進(jìn)，試圖對js網(wǎng)絡(luò)和地理信息技術(shù)進(jìn)行結(jié)合，把

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

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

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