浅析实景三维与网页技术在片区多维度空间表现的应用<br/>——基于倾斜摄影技术的实景三维网络地图构建与研究

浅析实景三维与网页技术在片区多维度空间表现的应用
——基于倾斜摄影技术的实景三维网络地图构建与研究

2020-04-02广东工业大学冯鸿斌刘旭红郭鹏燕

广东教育 2020年3期

文/广东工业大学冯鸿斌刘旭红郭鹏燕杨艺

图1 实景三维地图

一、国内网络地图产品概况

当下国内民用地图行业百花齐放，主流产品有百度地图、高德地图、谷歌地图、e都市、我秀中国等。其中有不少提供了三维地图与街景功能，如百度、高德在三维模式下能看到较为简洁的建筑白模型与空间环境关系，也有沿城市主要道路拍摄的街景全景。谷歌地图中能看到带有卫星图纹理的地表三维模型，城市中重要的建筑也配有实景三维模型。e都市中，城市的主要区域建有虚拟三维模型，使用者能在固定的角度浏览观看。我秀中国则是汇总了全国各大城市拍摄的重要节点全景图。[1]虽说每个地图有其自身的特色，但并没有一款真正意义的以实景三维模型为基础的地图产品，市面上地图产品的三维模式，多少都会存在诸如建筑白色模型表现力低(百度、高德)、建筑实景模型信息缺失严重(谷歌)、城市三维模型范围有限(e都市)等问题。另外在街景方面，也有诸如社区级别道路街景信息缺失的问题。

二、产品与各部分介绍

1.项目基本概况

在这样的时代与行业背景下，基于倾斜摄影技术相应特点，结合我们所参与的大学生创新创业训练项目，作出通过无人机倾斜摄影技术，航拍建模得到的实景三维模型的尝试，并围绕此实景三维模型建立一个以实景信息为主、覆盖范围较小的网页地图，以此解决一平方公里范围内，需要全面、精细展现实景三维信息、街景信息、传统平面地图信息的区域对定制化网络地图的使用需求。网页地图平台主要包含三个部分，三维实景地图部分，全景地图部分与平面地图部分，三个部分互相结合，能较好地达到我们预期的效果。

2.实景三维网页地图部分

实景三维网页地图部分(图1)主要采用无人机航拍倾斜摄影建模技术来实现，采用自旋翼无人机或滑翔翼无人机搭载多角度多相机云台，按照预定飞行航线定点、定时拍摄多角度的图像信息，[2]然后通过相应软件如Smart3D Capture、PhotoMesh、等进行三维建模得到等比例的实景三维模型。[3]

模型能够通过家用计算机的网页浏览器加载，无需安装插件。用户可以通过鼠标操控浏览器放大、缩小、旋转模型，通过较为自由的观察方式直观了解该区域的实际面貌、建筑外观、景观环境质量等不同层次的信息。

3.全景网页地图部分

全景网页地图部分也称360度全景地图，全景环视地图，全景拍摄技术是通过数码相机定点对周边现有环境环视拍摄多角度图像后，通过计算机软件拼接形成球形或环形相片、最后通过播放器加载播放的技术。[4]

作为实景三维地图部分的一种补充，全景地图部分能很好地弥补倾斜摄影技术短板带来的人视点角度上表达的不足。无人机倾斜摄影虽然能够生成较为真实的鸟瞰模型，但由于场地内建筑、树木相互遮挡，不可避免地导致一些拍摄盲区的生成，进而导致生成错误的模型，这些错误会在低视角观察模型的时候暴露出来。我们选择在人视高度(地面以上1.70M)拍摄全景照片作为场地低视角空间表达的弥补。

4.二维平面网页地图部分

平面地图部分(图2)由区域内场地总平面图与建筑物各层室内平面图组成。不仅能表达区域内道路、建筑、广场与绿化之间的关系，也能查阅到各个建筑楼层内房间的分布情况。

准确客观地表达场地内部信息是地图必不可少的要素，传统的二维平面地图在准确性与客观性上仍然有着不可替代的优势。

图2 平面地图页面(图片来源:作者自绘)

三、各个部分的制作方法

以广东工业大学大学城校区教学区部分作为实例进行说明。

1.三维实景模型部分

建模部分采用了无人机航拍倾斜摄影建模技术来获得实景三维模型。使用鸿鹏的AC1200型号无人机搭载着AP5600型号的云台，建模软件采用Smart3D Capture 与3ds Max。

表1 硬件设备性能与参数表

建模外业部分：(1)根据项目的具体要求，规划航线，选择合适的起飞与返航点，用鸿鹏公司配给的平板电脑作为地面站，在航线设定软件里按照要求设定飞行航线。(2)为保证模型边缘的建模质量，边缘航线应在模型对应边界的基础上向外扩展等同于飞行高度的水平距离，同时拍摄区域内航向重叠和旁向重叠应大于70%，以保证区域内模型的完整。[5]

建模内业部分：(1)从云台和飞行器上分别下载图像资料与坐标信息，将图像存储路径与飞行坐标、控制点坐标按照软件要求的格式在exalt中录入。(2)快速空中三角测量采样率按照25%左右设置，加快空中三角测量的速度。控制点坐标之前，需要在坐标系统中选取与控制点坐标系相对应的坐标系。删除外围残缺无效的模型信息，然后进行分瓦片运算，瓦片越小，占用电脑RAM的使用量就越少。[6](3)Smart 3D软件可输出多种格式的模型文件，常用的三维模型格式有S3C、OSGB、OBJ等，OBJ格式能通过RHINO、3DS MAX等多种建筑学常用软件读取，编辑方便。(4)将从SMART 3D 软件导出的模型加载入3DS MAX 进行模型处理。

网页部分是基于webGL，WebGL通过把JavaScript和OpenGL ES 2.0结合在一起，可以为HTML5 Canvas提供硬件3D加速渲染，通过HTML脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件支持,在浏览器里更流畅地展示3D场景和模型，创建复杂的导航和数据视觉化。在实际开发中利用了基于JavaScript编写的WebGL第三方库three.js。Three.js 是一款运行在浏览器中的 3D 引擎，通过调用three.js的方法进行模型的渲染，材质的加载，场景的构建等，在平台可以对模型进行拖动、旋转、放大缩小。具体实现是根据3DS MAX软件导出obj 文件、mtl 文件和贴图，利用three.js的THREE.OBJLoader()和THREE.OBJMTLLoader()方法对obj 文件、mtl 文件和贴图进行加载；进一步利用three.js的orbit controls插件(轨道控制)控制模型交互动作，可以通过鼠标拖拽模型进行放大缩小、等动作。

2.全景网页地图部分

相机采用理光牌 THETA SC 型号360度全景摄像数码相机，分辨率1400×700，输出格式HTLM5。在区域内室内外具有代表性、标示性的地点按照人视点1.70m高度放置相机，模拟人在场景中真实的视觉感受。

全景网页地图部分，首先使用Pano2VR全景图像转换应用软件将球形全景图转换成HTML5格式的文件，通过绝对定位在背景地图上设置相应的位置图标，使用HTML的标签链接到对应的全景网页，实现点击相应位置跳转到具体的全景图页面，在全景图页面可以通过鼠标对全景图进行放大缩小和旋转。

3.二维平面网页地图部分

采用AUTO CAD描图得到线稿，配合PHOTOSHOP 软件对房间与室内外分区按照功能布局填充不同颜色并标注文字。描图的图底可向该区域内基建部索要留档的建筑结构施工图。由于使用者并非建筑类专业人员，对精度要求不高，描绘的过程可对施工图进行一定程度的简化。

平面网页地图部分，通过将背景图片设置为：background-size:100% 100%;background-attachment:fixed;width:100%;height:100%;overflow:hidden;使背景地图可以自适应屏幕大小；使用绝对定位在背景地图上设置相应的位置图标，引入swiper插件将对应位置的不同楼层的平面图以轮播图的形式展示在网页上，用户可以点击页面的左右箭头对不同楼层的平面图进行切换查看；通过jQuery设置轮播图的display属性实现点击位置图标显示对应的各个楼层的平面图。