浅析实景三维与网页技术在片区多维度空间表现的应用

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

　　当下国内民用地图行业百花齐放，主流产品有百度地图、高德地图、谷歌地图、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）根据项目的具体要求，规划航线，选择合适的起飞与返航点，用鸿鹏公司配给的平板电脑作为地面站，在航线设定软件里按照要求设定飞行航线。（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属性实现点击位置图标显示对应的各个楼层的平面图。

　　四、发展前景

　　1.产品特色

　　基于倾斜摄影技术的实景三维网络地图平台相比现有的网络地图模式，可更加真实、准确、全面、多角度地让使用者了解到该区域范围内的建筑、交通与环境情况。在整合多维度信息后，该平台既能承担传统的地图职能，同时在三维空间还原与表达方面有着不可替代的优势。另外，基于制作流程短，成果的形式与质量可调性强等特点，该平台能够较好地实现定制化服务。

　　2.应用方向

　　（1）公司、校园、园区与厂区介绍方面，地图平台能为观众多维度、多角度地真实呈现园区实景风貌，观众足不出户就能客观地了解到区域内的情况，也可以插入动画介绍页面，以视频的形式带领观众感受区域风貌。另外，在市政管理层面，亦可以将相关技术图纸上传至网页平台，有需要时相关工种能直接下载使用，提高工作效率。

　　（2）房地产宣传介绍方面，在原有实景三维网络地图平台的基础上，增加户型平面图和室内全景图。相比于效果图与沙盘模型等传统的宣传方式，网络地图平台一方面能够将多维度信息高度整合，方便消费者浏览，同时实景化的表达也能避免房地产商对其产品的后期美化，高度还原产品原貌。

　　（3）应用于实施乡村振兴战略。把实景三维网络地图平台作为建设与改造方案的展示平台，让片区的居民群众及时地了解并参与到当地政府的项目中，引导居民积极参与乡村、街道改进。同时，对日后从事古建筑保护与修缮、城市更新设计项目，都积累了信息技术应用的宝贵经验。

　　五、尚待解决的问题

　　（1）自旋翼无人机续航持续时间较短，对建模面积带来一定的限制。[7]市面上较为普及的民用无人机类型为电力驱动的自旋翼无人机，此类无人机单个航程时间在20～30分钟范围内，根据飞行高度的不同，单一航程的覆盖面积大约控制在500～600平方米上下，此类无人机并不适合城市尺度的大范围倾斜摄影使用。

　　（2）Smart 3D软件生成的三维模型较大，虽然本机能较为轻松地加载，但仍要经过其他软件后期压缩才能在浏览器上加载。本次尝试使用了RHINO 与 3DS MAX 这两款软件，前者虽然能支持大批量导入obj文件，但导出的模型与贴图信息不能匹配，导致浏览器贴图加载错误。后者虽然不支持大批量导入obj文件，但压缩后导出的模型文件贴图正常。由于初始模型过于庞大，需要经历多次压缩后方可在浏览器上加载，成果精度较低。

　　本文为相关行业的从业者提供了一种新的可行的解决方案，但该方案仍需进一步完善与提升，为消费者提供一种全新的、优质的地图使用体验。[8]

　　参考文献：

　　[1]韩光辉，王春，朱林，等.中国实景地图服务的现状与思考[J].资源开发与市场，2015（1）：100-102，48，封4.

　　[2]江明明.基于倾斜摄影测量技术的三维数字城市建模[J].测绘与空间地理信息，2017（3）：189-190.

　　[3]朱涛，黎恒明，杜延峰，等.基于Skyline的三维实景地图创建[J].现代计算机，2017（13）：42-45，50.

　　[4]罗日才，韦艳梅.校园实景地图的设计与实现[J].科技视界，2014（12）：40-41.

　　[5]李隆方，张著豪，邓晓丽，等.基于无人机影像的三维模型构建技术[J].测绘工程，2013，22（4）：85-89.

　　[6]曹培国，姚磊，李奎英，等.三维实景地图生产与应用[J].山东国土资源，2018，34（9）：87-91.

　　[7]李红炜.倾斜摄影测量技术探讨[J].低碳世界，2019，9（1）：78-79.

　　[8]黎华，吴浩，尹章才.三维电子地图服务平台的关键技术研究[J].安徽农业科学，2014（10）：3083-3085.

　　[基金项目：本文系2018年国家大学生创新创业训练项目“基于倾斜摄影技术的4D信息地图体系建设与研究” （项目编号：201811845034）研究成果。]

　　冯鸿斌　刘旭红　郭鹏燕　杨艺

关注读览天下微信， 100万篇深度好文， 等你来看……