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

GISer_Jinger

已于 2024-07-09 21:50:05 修改

阅读量1.2k

点赞数 27

分类专栏： WebGIS 项目文章标签： javascript 前端

于 2024-07-09 21:33:36 首次发布

本文链接：https://blog.csdn.net/m0_55049655/article/details/140307106

版权

项目同时被 2 个专栏收录

59 篇文章 1 订阅

订阅专栏

WebGIS

33 篇文章 6 订阅

订阅专栏

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

（a）平台首页（b）模型故事页面

（c）模型浏览交互页面

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

2.2.2模型构建、浏览与交互

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

（a）屋顶部件样式选择页面（b）屋身部件样式选择页面

（c）台基部件样式选择页面

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

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

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

实现核心技术：

Node.js

Node.js学习（一）-CSDN博客

Node.js学习路线-CSDN博客

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

1. 变量与数据类型

变量定义：Node.js支持三种变量定义方式：const、var、let。
- const：用于定义常量，定义时必须初始化，之后值不可改变。
- var：定义的变量可以修改，如果不初始化会输出undefined，且存在变量提升现象。
- let：块级作用域变量，定义后只能在块级作用域内访问，且不存在变量提升。
数据类型：Node.js支持JavaScript的所有基本数据类型，包括Number、String、Boolean、Null、Undefined，以及ES6新增的Symbol和BigInt。此外，Node.js还提供了对象（Object）和特殊对象如Array、Date等。

2. 控制流语句

Node.js支持JavaScript的所有控制流语句，包括条件语句（if...else、switch）、循环语句（for、while、do...while）、try...catch异常处理等。

3. 函数

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

4. 模块系统

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

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)