基于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.