谢润桦;白玉龙
【摘 要】城市建筑物阴影是三维虚拟地理环境表达的重要组成要素,传统的城市建筑物阴影大多依赖第三方商业软件进行模拟,需要大量人工参与过程.本文针对建筑物阴影三维可视化技术复杂、三维建筑物模型生产更新过程慢等问题,研究一种轻量级、能适应大规模城市建筑物三维阴影快速可视化方法.通过对传统常见的二维建筑物平面数据处理,结合三维WebGIS和OSMBuildings技术,实现一套高效的城市建筑物阴影快速可视化原型系统,为当前建筑物阴影模拟及三维展示提供新思路. 【期刊名称】《北京测绘》
【年(卷),期】2018(032)002
【总页数】6页(P233-238)
【关键词】建筑物仿真;阴影模拟;可视化;HTML5
【作 者】谢润桦;白玉龙
【作者单位】北京建筑大学测绘与城市空间信息学院,北京102616;方正国际软件(北京)有限公司,北京100080
【正文语种】中 文
【中图分类】P208
0 引言
近年来,随着我国城市化的速度越来越快,土地快速消耗导致建筑用地紧张,许多不合理住宅建筑设计使得楼宇间阳光遮挡问题日益严重。同时,随着人们生活品质提高,住宅的日照条件逐渐成为人们衡量居住环境舒适程度的重要标准[1]。因此,建筑物阴影如何高效、快速对建筑物阴影进行可视化表达,在建筑设计、城市规划、三维仿真、建筑阴影评估等方面有重要应用意义[2]。
国外对日照阴影研究较多,许多三维模型制作软件诸如SketchUP、3ds Max、Skyline等均
提供日照阴影模拟分析功能[3][4]。国内软件研发普遍基于AutoCAD二次开发进行建筑物阴影模拟可视化,例如SUN日照分析软件,清华建筑日照分析软件SUNSHINE-V3.0。以上软件以AutoCAD为主,不能承载大量的建筑物属性信息,且与现有城市空间框架数据不能实现平滑集成,无法满足工作的现实需要。美国Esri公司的CityEngine产品可以利用传统二维数据快速生成三维场景,对ArcGIS较好支持,可以进行建筑物阴影可视化[5]。但是CityEngine产品需要预先配置大量CGA规则及相应参数。这些方法需要大量的数据生产、参数制定的繁琐过程,受限于各自商业软件及数据格式,往往造成建筑物建模时间长,在现实场景中应用缺乏等问题。因此,现有建筑物三维可视化及阴影光照计算软件具有较大的可视化技术难度。
随着HTML5的快速发展,尤其是Canvas、WebGL及CSS3的三维功能,能有效快速地渲染出三维图像。本系统通过结合WebGL和WebGIS技术,实现大规模城市建筑的阴影快速渲染及三维可视化表达。本系统具体优势表现在以下几点:多功能蒸汽电熨刷
首先,系统架构于B/S框架下运行,在HTML5标准支持下实现加载切片地图、建筑物及建筑物阴影生成,具备轻量级、无需插件、跨平台运行等优势。其次,简化三维建模的数据生产过程,利用传统的ArcGIS二维建筑物图层数据快速生成三维空间建筑物数据,大幅降低大规模微生物检查
三维建筑的数据生产难度,加快数据更新周期。最后,区别于传统的伪3维建筑物及其阴影仿真,系统结合WebGL技术及阴影生成数学模型,实现建筑物阴影的真3维模拟,让使用者可在虚拟地理空间自由旋转、缩放、漫游,查看建筑实时阴影模拟效果等功能。
综上,本文以北京市西城区北京建筑大学及周边建筑为例,主要讨论基于HTML5的城市大规模建筑阴影快速可视化,对三维空间建筑物信息以易于网络传输的GeoJSON和OBJ格式进行数据管理,可扩展性强。
1 建筑物阴影模拟模型
建筑物阴影模拟模型通过经纬度和时间计算北京地区在某一时刻的太阳高度角和方位角,然后根据建筑物高度计算出投影到地面的具体坐标值。建筑物阴影快速构建的核心流程如图 1所示:
图1 阴影计算模型
(1)计算太阳高度角和方位角的核心公式:
sin h=sin φ*sin δ+cos φ*cos δ*cos Ω
钢水取样器(1)
(2)
其中,h为太阳高度角,A为太阳方位角,φ为观测点地理纬度,δ为太阳赤纬角,Ω为太阳时角;
(2) 计算空间投影点的坐标:
导布辊由于太阳表面与地球表面的平均距离远大于地球直径,因此可以将太阳光视为平行光线[6]。空中一点S(x,y,H)经过太阳照射,对应的在投影面上投影点坐标为S′(x′,y′,H′),如图2所示。投影点坐标的计算公式如下:
x′=x+(H-H0)cot hsin A
(3)
y′=y+(H-H0)cot hcos A
(4)
H′=H0
(5)
其中,h为太阳的高度角;A为太阳的方位角;其中H为建筑物高程,H0为承影面高程;图2中,L为建筑物影长,E为建筑物高度。
图2 空间投影示意图
2 建筑物阴影快速可视化系统设计
压铸机料筒的设计2.1 设计路线
本系统主要技术路线是采用HTML5+GeoJSON+OSMBuildings+WebGIS。HTML5已得到市面主流浏览器的支持,此外,HTML5还增加了Canvas、WebGL、地理位置定位等新属性和功能;GeoJSON是一种JSON对象子集,对各种地理数据实现结构化编码,具有轻量级、适于网络传输、解析过程简单等优点,非常适合作为WebGIS应用的矢量数据格式。系统在阴影可视化模块中主要使用开源插件OSMBuildings,加载瓦片地图服务,GeoJSON和OBJ格式的建筑物数据,最终实现城市大规模三维建筑物阴影快速可视化。
2.2 功能设计
城市大规模三维建筑物阴影快速可视化系统的核心包括数据预处理、阴影生成模块以及建筑物模型可视化三个部分,具体框架描述如图3所示。
图3 城市建筑物阴影快速可视化系统功能描述
(1) 数据预处理。主要负责地图数据加载,可选择服务器发布的切片地图或本地切片地图文件,另外将传统多边形面状图层文件快速转换成适用于系统加载的GeoJSON格式数据。
(2) 阴影生成模块。主要实现建筑的阴影实时模拟。功能首先包括可在任意时刻、任意角度建筑物的阴影快速可视化,其次对大规模建筑物按高度进行不同颜的分类渲染,最后在加载建筑方案后在网页端进行方案调整,对建筑物进行位移、高度调整,查看建筑物阴影在不同方案下的影响。
(3) 建筑物模型可视化。主要实现建筑物的三维仿真模拟,使得用户可在网页端、手机端流畅体验三维虚拟地理环境带来的视觉冲击。功能2包括自有三维模型数据如OBJ文件加载,GeoJSON数据加载,OSMBuildings网络资源建筑物数据加载。
2.3 系统关键技术
2.3.1 Canvas绘图
HTML5中新添加的Canvas标签可以替代原有的Image标签实现对于栅格数据的显示。矢量图形相较之下渲染难度较大,但是更容易实现与用户的交互,常用语动态标注、路径规划、空间分析结果等空间数据的展示[7]。在Canvas中使用beginPath()、moveTo()、lineTo()、arc()、quadraticCurveTo()、closePath()等一系列路径方法用于绘制矢量数据。在实际开发中我们需要使用向对象化的思想将这些函数进行二次封装,构建出point、line、polygon等类。
HTML5Canvas能够较好的支持WebGIS矢量要素的绘制,通过绘图API可以在Canvas画布中绘制WebGIS中样式繁多的点、线、面、文字等,因此在本文中使用HTML5Canvas绘制出了西城区建筑物底面轮廓、建筑物侧面效果、建筑物阴影等面状要素,可兼容IE11、Chrome、Firefox等主流PC浏览器,具备放大、缩小、平移等常见地图功能,操作地图也十分流畅。
2.3.2 GeoJSON数据技术
GeoJSON是一种轻量级的网络数据传输格式,实质是面向地理数据的JSON拓展。相比与XML数据,其简单、易于读写、占用带宽小,支持多种服务器端语言的特点让GeoJSON应用十分广泛[8]。
GeoJSON对象可以表示地理几何(Polygon)、特征(Feature)或者特征集合(FeatureCollection)。GeoJSON支持的几何类型比较丰富,包含:点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征(Feature)包含一个几何类型对象和其他特征属性,特征集合(FeatureCollection)则表示特征集。以下是本文用到的多边形例子。
{"type":"FeatureCollection",
"features":[{"id":1,
