基于Web的2.5維校園地圖的設計與實現

張潞　司占軍

摘要：隨著數字城市建設的不斷推進，二三維電子地圖逐步成為校園信息化建設的重要組成部分。本設計旨在開發2.5維校園電子地圖，更真實的展現校園景觀，用于學校宣傳展示、校園布局介紹等方面。研究方法是以天津科技大學為例，首先根據校園地形信息生成二維地形圖，并進行底圖處理及區域劃分。再利用3ds Max實現三維虛擬場景，通過添加紋理及貼圖，按特定的俯視角度渲染生成2.5維的校園空間平面地圖。通過HTML和JavaScript語言對網頁進行制作并利用IIS發布，最終實現基于網頁的校園地圖。本設計利用虛擬現實技術展現出更加立體化、真實化的校園結構，較三維地圖而言，具有簡單直觀、數據量小、后臺運行速度快的特點。此外，通過校園網快速瀏覽，為用戶提供了一個具有交互性的數字校園展示平臺。

關鍵詞：2.5維；校園地圖；三維建模；Web；IIS

中圖分類號：TP311 文獻標識碼：A 文章編號：1009-3044（2016）02-0080-02

Abstract： With the continuous advance of digital city construction， two or three dimensional electronic map has gradually become an important part of campus information construction.This design is the production of a 2.5D campus electronic map system， it can show the more realistic campus landscape， and be used for school publicity show， information presentation etc. The research method is take a certain university as a case， first of all， according to the terrain information of campus it should generate 2D topographic map and plot processing and regional division. After that， it should produce 3D scene modeling and add texture and texture by 3ds Max. It need to generate 2.5D the campus space plane map with the particular view angle. Web pages uses HTML and JavaScript language and releases by IIS .With virtual reality technology， this design show campus structure more vivid. Compared with a 3D map， this design has the characteristics of simple and intuitive， less amount of data， faster background running speed. In addition， the user has interactive platform of a digital campus through the campus network.

Key words： 2.5 Dimensional （2.5D）； Digital Map； 3D modeling； Web； IIS

隨著計算機技術的進步和信息技術的發展，校園地圖展示形式也逐步過渡到數字化模式[1]。2.5維數字地圖不僅能夠展現三維數字地圖的逼真效果，有滿足了在現有的網絡環境下對三維地圖的快速瀏覽訪問，而且還能夠提供多方式、多方位的展現校園景觀，又可作校園規劃和管理的輔助工具，因此2.5維地圖具有較高的應用價值[2]。

1 前期準備

制作該設計首先需要收集校園的相關資料，將平面的CAD圖進行處理整合。此外還需要針對實地場景進行拍攝紀錄，并且將照片進行處理，便于后期貼圖。由于校園建模較為復雜，而且已有的三維模型數據為全模，數據量巨大，因此不能將大面積的模型合并在一起渲染，需要對整體校園進行區域劃分。按照校園結構分布以道路為邊界劃分為四個區域分別建模，如圖1。

2模型建立

該設計利用3ds Max軟件進行的三維模型的建立。該軟件采用了二維建模、幾何體建模、面片建模等建模技術，有效的實現虛擬校園場景中各個對象的三維模型的建立，并結合3ds Max的實例技術、紋理貼圖、外部引用等來提高場景建模速度，有效的降低整體場景文件的大小[3]。

2.1 地形地貌建模

地形地貌是搭建三維校園模型的基礎，本次設計中的地面通過網格構建起伏框架，利用紋理映射的方法提高模型的還原度。利用3ds Max對道路、地表，進行建模，采用制作模型線條，使用擠出命令，利用真實場景圖片的貼圖從而完成整個地形地貌的搭建。

2.2 建筑物建模

首先根據CAD圖紙及之前對建筑樓體的了解確定建模的層次結構，對于建筑物的建模主要利用了二維圖形和多邊形建模結合的方式，利用布爾運算命令，得到建模的窗體等形狀。

2.3 其他建模

為了能夠更加真實的表現虛擬環境，需要添加一些植物、校園標志性建筑。在3ds Max中利用Photoshop中處理過得植物鏤空貼圖來實現植物及植被的建模[4]。

3優化模型及渲染

利用3ds Max實現了虛擬校園的三維場景后，還需要使用恰當的方法對3ds Max文件進行優化，有助于降低文件大小，提高工作效率[3]。在渲染之前需要在場景中添加適當的燈光以實現自然光源的效果，添加攝像機使場景向右和向下分別旋轉45度后，保證校園模型能夠最大化的展現，最終通過渲染生成該地圖。

4后期美化

針對渲染生成的2.5維地圖進行后期處理，利用Photoshop軟件調節亮度，顏色等參數確保圖片以達到最佳呈現效果，并對整體場景進行美化處理并且根據以后此外針對地圖中的道路，樓宇等標志物添加文字標注，方便用戶直觀識別。

5網頁的制作及發布

利用HTML超文本標記語言、CSS樣式、JavaScript語言結合Dreamweaver工具制作網頁平臺。將生成的2.5維地圖載入至網頁制作，并設計網頁整體布局，利用編程語言現實網頁的功能，開發完成后，需要對它進行發布。本次設計利用IIS組件發布網站，其發布方式具有方便快捷、不用冗長繁雜的步驟、不用購買域名操作等優點，圖2是最終的網頁效果圖。

6總結

2.5維地圖是結合信息化與網絡化的特點，通過校園網展示學校的整體景觀，從傳統校園展示拓展為數字化的在線校園展示平臺。該設計不僅可以最大程度的展現校園風光及校園布局，還可以展現學院的相關信息。是校園展示和規劃的重要輔助工具，具有一定的應用價值。

參考文獻：

[1] 張永梅. 基于地理信息系統的城市數字化地圖的研究與設計[D].太原：華北工學院，2002.

[2] 倪凱. 2.5維電子地圖的制作流程[J]. 科技創新導報，2013（16）：50.

[3] 何曉田. 基于3D MAX實現虛擬校園場景建模[J]. 電腦知識與技術，2011（22）：5365-5366.

[4] 黃婳. 基于3ds Max與VRP鏤空植物效果制作[J]. 現代計算機：專業版，2014（15）：38-41.