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

        基于上述概括出建筑单体的特征部件，本文利用互联网、三维建模和地理信息等技术设计了基于浏览器/服务器（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支持三种变量定义方式：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的基本特点

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

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

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

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

二、Bootstrap的核心组件

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

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

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

三、Bootstrap的使用方式

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

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

  3. 自定义样式：虽然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环境中使用的“库”。这些函数和对象允许用户执行各种操作，如选择对象、修改属性、创建几何体等。

二、常见的方法

  1. 选择与获取对象

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

  2. 修改对象属性

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

  3. 创建与修改几何体

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

  4. 导入与导出

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

  5. 场景操作

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

  6. CGA规则

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

  7. 其他工具函数

    • 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)

 

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/42661.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Linux 利用命名空间创建一个自己的“容器“

Linux 利用命名空间创建一个自己的“容器“

Linux 利用命名空间创建一个自己的"容器" 前置条件 创建一个目录存放容器mkdir /myapp准备静态编译busybox&#xff0c;操作系统自带的往往是依赖动态库的(本文使用的debian apt install busybox-static) 开始 使用unshare起一个独立命名空间.# 进入后/myapp目录…
阅读更多...
【自学网络安全】：安全策略与用户认证综合实验

【自学网络安全】：安全策略与用户认证综合实验

实验拓扑图&#xff1a; 实验任务&#xff1a; 1、DMZ区内的服务器&#xff0c;办公区仅能在办公时间内(9:00-18:00)可以访问&#xff0c;生产区的设备全天可以访问 2、生产区不允许访问互联网&#xff0c;办公区和游客区允许访问互联网 3、办公区设备10.0.2.10不允许访问Dmz区…
阅读更多...
新闻资讯整合平台：一站式满足企业信息需求

新闻资讯整合平台：一站式满足企业信息需求

摘要&#xff1a; 面对信息爆炸的时代&#xff0c;企业如何在海量数据中快速获取有价值资讯&#xff0c;成为提升竞争力的关键。本文将探讨如何通过一站式新闻资讯整合平台&#xff0c;实现企业信息需求的全面满足&#xff0c;提升决策效率&#xff0c;同时介绍实用工具推荐&a…
阅读更多...
Redis数据类型和数据队列

Redis数据类型和数据队列

一.Redis数据类型 参考资料&#xff1a;http://www.redis.cn/topics/data-types.html 相关命令参考: http://redisdoc.com/ Redis 是一种基于内存的开源数据结构存储系统&#xff0c;支持多种数据类型&#xff0c;每种数据类型都有自己特定的操作命令。 String&#xff08;字…
阅读更多...
Games101学习笔记 Lecture17 Materials and Appearances

Games101学习笔记 Lecture17 Materials and Appearances

Lecture17 Materials and Appearances 材质 BRDF一、Diffuse/Lambertian Material二、Glossy Material三、Ideal reflective/ refractive Material (BSDF)1.镜面反射2.镜面折射3.菲涅尔项 Fresnel 四、Microfacet BRDF 微表面五、Isotropic / Anisotropic Materials (BRDFs)An…
阅读更多...
博客标题：C++中的继承：构建面向对象的基石

博客标题：C++中的继承：构建面向对象的基石

目录 ​编辑 引言 继承的基本形式 示例1&#xff1a;基本继承 继承的类型 示例2&#xff1a;不同类型的继承 多重继承 示例3&#xff1a;多重继承 继承与多态性 示例4&#xff1a;继承与多态 结论 结尾 引言 在面向对象编程&#xff08;OOP&#xff09;中&#xff…
阅读更多...
【持续集成_03课_Linux部署Sonar+Gogs+Jenkins】

【持续集成_03课_Linux部署Sonar+Gogs+Jenkins】

一、通过虚拟机搭建Linux环境-CnetOS 1、安装virtualbox&#xff0c;和Vmware是一样的&#xff0c;只是box更轻量级 1&#xff09;需要注意内存选择&#xff0c;4G 2、启动完成后&#xff0c;需要获取服务器IP地址 命令 ip add 服务器IP地址 通过本地的工具&#xff0c;进…
阅读更多...
新手教学系列——crontab 使用不当引发的服务器性能问题

新手教学系列——crontab 使用不当引发的服务器性能问题

起因及症状 最近，我们的一台服务器随着运行时间的增加，逐渐出现了压力过大的问题。具体表现为数据库连接数飙升至 4000+，Redis 频繁超时，系统报错文件打开数过多等。针对这些问题，我们逐一检查了数据库连接池、Redis 连接池以及系统的 ulimit 配置，但都未能找到问题的根…
阅读更多...
第241题｜ 确定极限中参数问题 | 武忠祥老师每日一题

第241题｜ 确定极限中参数问题 | 武忠祥老师每日一题

解题思路&#xff1a;确定极限中的参数的方法是求这个极限&#xff1b;求极限根据类型选方法。 形可以用到三种方法&#xff1a;洛必达&#xff0c;等价&#xff0c;泰勒。 先观察题目&#xff0c;将看成一个整体&#xff0c;同时,并令,整理之后如下&#xff1a; 这里也要想办…
阅读更多...
nginx.conf配置文件

nginx.conf配置文件

1、全局模块 worker_processes 1; 工作进程数&#xff0c;一般设置成服务器内核数的2倍&#xff08;一般不超过8个&#xff0c;超过8个反而会降低性能&#xff0c;一般是4个&#xff0c;1-2个也可以&#xff09; 处理进程的过程必然涉及配置文件和展示页面&#xff0c;也就是…
阅读更多...
2024.7.9作业

2024.7.9作业

1、提示并输入一个字符串&#xff0c;统计该字符串中字母、数字、空格以及其他字符的个数 #include <stdio.h> #include <string.h> int main(int argc,const char *argv[]) { char arr[30]{0}; int zm0,kg0,sz0,qt0; printf("请输入字符串&…
阅读更多...
智慧光伏一站式解决方案

智慧光伏一站式解决方案

光伏电站智慧化管理平台&#xff0c;将现代先进的数字信息技术、通信技术、互联网技术、云计算技术、大数据挖掘技术与光伏技术高度融合而形成。可以满足光伏企业对电站的高发电量、低初始投资、低运维成本等需求&#xff0c;从开发到运维的25年生命周期内&#xff0c;实现高收…
阅读更多...
使用clion刷leetcode

使用clion刷leetcode

如何优雅的使用clion刷leetcode 安装插件&#xff1a;LeetCode Editor) 插件配置&#xff1a; 这样我们每打开一个项目&#xff0c;就会创建类似的文件 我们的项目结构&#xff1a; 我们在题解文件中导入头文件myHeader.h并将新建的文件添加到cmakelists.txt文件&#xff0c;…
阅读更多...
2024前端面试真题【JS篇】

2024前端面试真题【JS篇】

DOM DOM&#xff1a;文本对象模型&#xff0c;是HTML和XML文档的编程接口。提供了对文档的结构化的表述&#xff0c;并定义可一种方式可以使从程序中对该结构进行访问&#xff0c;从而改变文档的结构、样式和内容。 DOM操作 创建节点&#xff1a;document.createElement()、do…
阅读更多...
了解PPO算法（Proximal Policy Optimization）

了解PPO算法（Proximal Policy Optimization）

Proximal Policy Optimization (PPO) 是一种强化学习算法&#xff0c;由 OpenAI 提出&#xff0c;旨在解决传统策略梯度方法中策略更新过大的问题。PPO 通过引入限制策略更新范围的机制&#xff0c;在保证收敛性的同时提高了算法的稳定性和效率。 PPO算法原理 PPO 算法的核心…
阅读更多...
【docker 把系统盘空间耗没了！】windows11 更改 ubuntu 子系统存储位置

【docker 把系统盘空间耗没了！】windows11 更改 ubuntu 子系统存储位置

系统&#xff1a;win11 ubuntu 22 子系统&#xff0c;docker 出现问题&#xff1a;系统盘突然没空间了&#xff0c;一片红 经过排查&#xff0c;发现 AppData\Local\packages\CanonicalGroupLimited.Ubuntu22.04LTS_79rhkp1fndgsc\ 这个文件夹竟然有 90GB 下面提供解决办法 步…
阅读更多...
Spring-AOP（二）

Spring-AOP（二）

作者&#xff1a;月下山川 公众号&#xff1a;月下山川 1、什么是AOP AOP&#xff08;Aspect Oriented Programming&#xff09;是一种设计思想&#xff0c;是软件设计领域中的面向切面编程&#xff0c;它是面向对象编程的一种补充和完善&#xff0c;它以通过预编译方式和运行期…
阅读更多...
【课程总结】Day13（下）：人脸识别和MTCNN模型

【课程总结】Day13（下）：人脸识别和MTCNN模型

前言 在上一章课程【课程总结】Day13（上）：使用YOLO进行目标检测，我们了解到目标检测有两种策略，一种是以YOLO为代表的策略：特征提取→切片→分类回归；另外一种是以MTCNN为代表的策略：先图像切片→特征提取→分类和回归。因此，本章内容将深入了解MTCNN模型，包括：MTC…
阅读更多...
使用jdk11运行javafx程序和jdk11打包jre包含javafx模块

使用jdk11运行javafx程序和jdk11打包jre包含javafx模块

我们都知道jdk11是移除了javafx的，如果需要使用javafx，需要单独下载。 这就导致我们使用javafx开发的桌面程序使用jdk11时提示缺少javafx依赖。但这是可以通过下面的方法解决。 一，使用jdk11运行javafx程序 我们可以通过设置vmOptions来使用jdk11运行javafx程序 1,添加j…
阅读更多...
【RAG KG】GraphRAG开源：查询聚焦摘要的图RAG方法

【RAG KG】GraphRAG开源：查询聚焦摘要的图RAG方法

前言 传统的 RAG 方法在处理针对整个文本语料库的全局性问题时存在不足&#xff0c;例如查询&#xff1a;“数据中的前 5 个主题是什么&#xff1f;” 对于此类问题&#xff0c;是因为这类问题本质上是查询聚焦的摘要&#xff08;Query-Focused Summarization, QFS&#xff09…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023