【WebGIS平台】传统聚落建筑科普数字化建模平台

GISer_Jinger 2024-07-22 16:03:02 阅读 81

        基于上述概括出建筑单体的特征部件,本文利用互联网、三维建模和地理信息等技术设计了基于浏览器/服务器(B/S)的传统聚落建筑科普数字化平台。该平台不仅实现了对传统聚落建筑风貌从基础到复杂的数字化再现,允许用户轻松在线构建从简约到精细的三维建筑模型,更通过其直观的操作界面和丰富的交互功能,极大地提升了用户体验。用户可以在此平台上浏览各类传统聚落建筑的三维模型,无论是欣赏其独特的建筑风格,还是深入了解其构造细节,都能获得身临其境般的感受。同时,平台还支持用户与模型进行互动操作,如旋转、光照渲染、建筑部件炸开等,进一步增强了学习的趣味性和互动性,为传统聚落建筑文化的传播与普及开辟了一条数字化路径。

9d42a18ba2eb4a7c9922b339f8f24a2c.png

                                   (a)平台首页                       (b)模型故事页面

ff70d91d933c4d25b83ea1a7c0325c65.png

(c)模型浏览交互页面

图6 传统聚落建筑科普数字化建模平台部分页面

 

2.2.2模型构建、浏览与交互

传统聚落建筑科普数字化平台支持简约(初级)和精细(高级)模型的在线构建。初级模型的在线构建平台是基于上述建筑单体特征,用户仅需要选择屋顶、屋身(包括屋脸、墙面、门、窗、外柱和内柱等部件)和台基(包括地基、护栏和台阶等部件)各个特征部件的样式,平台将自动生成指定样式的传统聚落建筑三维模型。生成过后的模型平台还支持用户与模型进行互动操作,如建筑部件拆分、旋转和光照渲染等。

d240775f716a423fb7f3e8127181343c.png

  

              (a)屋顶部件样式选择页面                                          (b)屋身部件样式选择页面

118c8b5fcaf64b46bbaef677e6943f4f.png

(c)台基部件样式选择页面

图7 传统聚落建筑模型的构建

  

7e559c7f608e4a5eba85cf8ff2963cd1.png

                        (a)自动生成的传统建筑模型            (b)部件拆分后传统模型

图7  传统聚落建筑模型的模型浏览与交互

实现核心技术:

Node.js

Node.js学习(一)-CSDN博客

Node.js学习路线-CSDN博客

Node.js的语法主要基于JavaScript,但它在服务器端环境中运行,提供了许多额外的模块和功能,如文件系统操作、网络请求处理等。以下是对Node.js语法的详细概述:

1. 变量与数据类型

变量定义:Node.js支持三种变量定义方式:<code>const、varlet

const:用于定义常量,定义时必须初始化,之后值不可改变。var:定义的变量可以修改,如果不初始化会输出undefined,且存在变量提升现象。let:块级作用域变量,定义后只能在块级作用域内访问,且不存在变量提升。数据类型:Node.js支持JavaScript的所有基本数据类型,包括NumberStringBooleanNullUndefined,以及ES6新增的SymbolBigInt。此外,Node.js还提供了对象(Object)和特殊对象如ArrayDate等。

2. 控制流语句

Node.js支持JavaScript的所有控制流语句,包括条件语句(if...elseswitch)、循环语句(forwhiledo...while)、try...catch异常处理等。

3. 函数

匿名函数:可以定义没有名称的函数。箭头函数:ES6引入的简洁函数写法,不绑定自己的thisargumentssuper,或new.target高阶函数:可以接受函数作为参数或返回函数的函数。

4. 模块系统

Node.js使用CommonJS模块规范,通过require()函数来引入模块,通过module.exportsexports对象来导出模块。

5. 核心模块

Node.js提供了许多核心模块,这些模块提供了丰富的功能,如文件操作、网络请求、路径处理等。

fs模块:用于文件系统的操作,如读取文件、写入文件、创建目录等。path模块:用于处理文件和目录的路径。http/https模块:用于创建HTTP/HTTPS服务器和客户端。url模块:用于解析URL和将URL对象转换回字符串。querystring模块:用于解析和字符串化查询字符串。

6. 异步编程

Node.js是异步的,支持多种异步编程模型,如回调函数、Promise、async/await等。

回调函数:传统的异步编程方式,通过函数作为参数传递给另一个函数,并在操作完成时调用。Promise:ES6引入的异步编程解决方案,提供了一种更优雅的方式来处理异步操作。async/await:基于Promise的语法糖,使得异步代码看起来像同步代码一样。

7. 事件循环与回调函数

Node.js使用事件循环和回调函数来处理非阻塞I/O操作。当Node.js执行输入/输出操作时(如读取文件、网络请求等),它不会等待操作完成,而是将回调函数放入事件队列,并在适当的时候调用它们。

8. 第三方模块

Node.js有一个庞大的生态系统,包含成千上万的第三方模块,这些模块可以通过npm(Node Package Manager)进行安装和管理。使用第三方模块可以极大地提高开发效率,减少重复造轮子。

9. 严格模式

Node.js支持JavaScript的严格模式,通过在脚本或函数顶部添加"use strict";语句来启用。严格模式有助于捕获一些常见的编码错误,并强制更严格的语义。

10. ES6+新特性

Node.js自6.0版本开始全面支持ES6,并随着版本的更新不断支持更多的ES6+新特性,如模板字符串、解构赋值、类、模块等。

综上所述,Node.js的语法以JavaScript为基础,但扩展了服务器端特有的功能,并引入了模块系统、异步编程等概念。随着JavaScript和Node.js的不断发展,新的语法特性和最佳实践不断涌现,开发者需要不断学习和掌握这些新内容以提高开发效率和代码质量。

Bootstrap

Bootstrap是一个基于HTML、CSS和JavaScript的开源前端框架,由Twitter的设计师Mark Otto和Jacob Thornton合作开发。它以其简洁、灵活和响应式的特点,成为了最受欢迎的Web开发框架之一。以下是对Bootstrap的详细解析:

一、Bootstrap的基本特点

移动设备优先:从Bootstrap 3开始,框架就融入了移动设备优先的理念,这意味着所有的样式和组件都是为移动设备首先设计的,然后扩展到平板和桌面设备。这种设计方式使得Bootstrap能够轻松应对各种屏幕尺寸和分辨率。

响应式设计:Bootstrap的响应式CSS能够自适应于台式机、平板电脑和手机,为开发人员创建接口提供了一个简洁统一的解决方案。它包含了功能强大的内置组件,这些组件可以根据设备的屏幕尺寸和分辨率自动调整布局和样式。

易于上手:只要具备HTML和CSS的基础知识,就可以开始学习Bootstrap。它提供了一套预定义的样式和组件,开发人员只需要编写HTML结构,并添加Bootstrap的固定class样式,就可以轻松实现各种效果。

跨浏览器兼容性:Bootstrap支持所有主流浏览器,包括IE7及以上版本、Chrome、Firefox、Safari等。

二、Bootstrap的核心组件

栅格系统:Bootstrap提供了一套响应式的栅格系统,该系统将页面布局划分为最多12列,并允许通过不同的类名来控制元素的列宽和偏移。这使得开发人员可以轻松地创建复杂的页面布局,并确保这些布局在不同设备上都能保持良好的显示效果。

内置组件:Bootstrap提供了丰富的内置组件,包括按钮、导航条、轮播图、表单控件等。这些组件都经过精心设计,并提供了多种样式和变体,以满足不同的开发需求。

JavaScript插件:Bootstrap还包含了一系列的JavaScript插件,这些插件提供了丰富的交互功能,如模态框、下拉菜单、折叠面板等。这些插件都基于jQuery编写,并具有良好的扩展性和可定制性。

三、Bootstrap的使用方式

下载与引入:首先,需要从Bootstrap的官方网站或CDN服务上下载Bootstrap的压缩包或链接。然后,在HTML文件中通过<link>标签引入Bootstrap的CSS文件,以及通过<script>标签引入Bootstrap的JavaScript文件和jQuery库(因为Bootstrap的JavaScript插件依赖于jQuery)。

编写HTML结构:在HTML文件中,按照Bootstrap的规范编写页面结构。这包括使用Bootstrap的栅格系统来布局页面元素,以及使用Bootstrap的内置组件和类名来添加样式和交互功能。

自定义样式:虽然Bootstrap提供了一套预定义的样式和组件,但开发人员仍然可以通过自定义CSS来覆盖或扩展这些样式。此外,Bootstrap还提供了基于LESS或Sass的定制工具,允许开发人员更灵活地定制框架的样式和组件。

四、Bootstrap的最新版本

Bootstrap目前已经发展到了多个版本,每个版本都引入了新的特性和改进。最新版本的Bootstrap(截至当前时间,即2024年7月)在保持原有优点的基础上,进一步优化了性能、增加了新的组件和样式,并提高了与现代Web技术的兼容性。

总之,Bootstrap是一个功能强大、易于上手且广泛应用的前端框架。它以其简洁的语法、丰富的组件和灵活的响应式设计能力,为Web开发人员提供了极大的便利和高效的开发体验。

三维建模(CityEngine Python库)

CityEngine的Python接口提供了丰富的库与方法,使得用户能够通过编写Python脚本来自动化和控制CityEngine中的许多任务。以下是一些常见的CityEngine Python库与方法概述:

一、常见的库

虽然CityEngine本身并不直接提供传统意义上的“库”(如Python中的库文件),但它通过其Python API暴露了一系列函数和对象,这些可以视为在CityEngine环境中使用的“库”。这些函数和对象允许用户执行各种操作,如选择对象、修改属性、创建几何体等。

二、常见的方法

选择与获取对象

ce.getObjectsFrom(ce.scene): 获取场景中的所有对象。ce.getObjectsFrom(ce.scene, ce.withName("name")): 根据名称获取场景中的对象。ce.setSelection(...): 设置当前选中的对象。

修改对象属性

ce.setAttribute(object, attributeName, value): 设置对象的属性值。ce.getAttribute(object, attributeName): 获取对象的属性值。

创建与修改几何体

ce.addGraphLayer(...): 添加图层。ce.createGraphSegments(...): 在图层中创建线段。ce.fitStreetWidths(...): 调整街道宽度。

导入与导出

ce.importFile(...): 导入文件,如Shapefile。导出功能通常通过CityEngine的GUI或CGA规则来实现,但Python API也支持通过修改对象属性来间接影响导出结果。

场景操作

ce.delete(...): 删除对象。ce.setName(...): 修改对象的名称。

CGA规则

ce.setRuleFile(objects, cgaPath): 为对象设置CGA规则文件。ce.setStartRule(object, ruleName): 设置对象的起始规则。ce.generateModels(objects): 根据CGA规则生成模型。

其他工具函数

ce.toFSPath(...): 将CityEngine内部的路径转换为文件系统路径。ce.print(...): 在CityEngine的控制台中打印信息。

# 假设我们要选择所有名称中包含"Broadway"的场景元素

ce.setSelection(ce.getObjectsFrom(ce.scene, ce.withName("*Broadway*")))

# 遍历选中的元素,并修改它们的某个属性

for obj in ce.selection():

# 假设我们要修改的属性名为"/ce/street/streetWidth"

currentWidth = ce.getAttribute(obj, "/ce/street/streetWidth")

newWidth = currentWidth + 5 # 假设我们想要将宽度增加5

ce.setAttribute(obj, "/ce/street/streetWidth", newWidth)

 

 



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。