【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.pswp.cn/web/42661.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/42661.shtml
英文地址，請注明出處：http://en.pswp.cn/web/42661.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

Linux 利用命名空間創建一個自己的“容器“

Linux 利用命名空間創建一個自己的“容器“

Linux 利用命名空間創建一個自己的"容器" 前置條件 創建一個目錄存放容器mkdir /myapp準備靜態編譯busybox&#xff0c;操作系統自帶的往往是依賴動態庫的(本文使用的debian apt install busybox-static) 開始 使用unshare起一個獨立命名空間.# 進入后/myapp目錄…
閱讀更多...
Python中生成隨機數：一種簡單而強大的方法

Python中生成隨機數：一種簡單而強大的方法

簡介&#xff1a; 在編程中&#xff0c;我們經常需要生成隨機數來模擬各種情況&#xff0c;比如游戲、統計模擬、機器學習數據集的劃分等。Python通過其內置的random模塊提供了一個簡單而強大的方式來生成隨機數。本文將介紹如何使用random模塊來生成各種類型的隨機數&#xff…
閱讀更多...
【RESTful】前后端的通信方式 REST

【RESTful】前后端的通信方式 REST

前后端的通信方式 REST 1.初識 REST1.1 什么是 REST1.2 REST 的特征 2.HTTP 方法與 CRUD 動作映射3.實現 REST 風格的 CRUD 1.初識 REST 1.1 什么是 REST REST 是軟件架構的規范體系結構&#xff0c;它將 資源的狀態 以適合客戶端的形式從服務器端發送到客戶端&#xff08;或…
閱讀更多...
小型簡易GIT服務器搭建和使用

小型簡易GIT服務器搭建和使用

搭建GIT服務器的文章有很多&#xff0c;多數在管理的時候都使用了gitosis作為管理工具&#xff0c;但是作為一個小團隊(人數少于50人)&#xff0c;我覺得完全可以使用公鑰驗證的方式&#xff0c;這樣會簡單不少&#xff0c;下面來看看簡易的搭建方法吧。 服務器版本:ubuntu 16…
閱讀更多...
Unix\Linux 執行shell報錯：“$‘\r‘: 未找到命令” 解決

Unix\Linux 執行shell報錯：“$‘\r‘: 未找到命令” 解決

linux執行腳本sh xxx.sh報錯&#xff1a;$xxx\r: 未找到命令 原因&#xff1a;shell腳本在Windows編寫導致的換行問題&#xff1a; Windows 的換行符號為 CRLF&#xff08;\r\n&#xff09;&#xff0c;而 Unix\Linux 為 LF&#xff08;\n&#xff09;。 縮寫全稱ASCII轉義說…
閱讀更多...
第二證券：ppi指數是什么，ppi指數下降對股市有什么影響？

第二證券：ppi指數是什么，ppi指數下降對股市有什么影響？

PPI全稱Producer Price Index&#xff0c;PPI指數即“出產者價格指數”&#xff0c;反映的是一守時期內出產者購買中心產品和原材料價格的改動趨勢和改動程度。 了解ppi指數&#xff1a; 簡單了解便是&#xff0c;計算出出產者的本錢改動狀況&#xff0c;然后反映到價格上。 …
閱讀更多...
windows@windows設備之間遠程命令行控制方案@windows設備間使用OpenSSH

windows@windows設備之間遠程命令行控制方案@windows設備間使用OpenSSH

文章目錄 abstract為什么考慮命令行連接討論主題 powershell遠程控制使用PowerShell遠程管理前提條件&#xff1a;步驟&#xff1a;1. 啟用WinRM服務2. 配置信任主機3. 測試連接4. 創建遠程會話5. 運行遠程命令6. 關閉會話 例子小結 SSH方案基礎連接免密自動登錄修改配置文件在…
閱讀更多...
【自學網絡安全】：安全策略與用戶認證綜合實驗

【自學網絡安全】：安全策略與用戶認證綜合實驗

實驗拓撲圖&#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; 這里也要想辦…
閱讀更多...
mysql怎么調整緩沖區大小

mysql怎么調整緩沖區大小

MySQL中調整緩沖區大小是數據庫性能優化的重要一環。緩沖區大小直接影響了數據庫的讀寫性能和響應速度。以下是一些常見的MySQL緩沖區及其調整方法&#xff1a; 一、InnoDB緩沖池&#xff08;InnoDB Buffer Pool&#xff09; InnoDB緩沖池是InnoDB存儲引擎用來緩存表數據和索…
閱讀更多...
代碼隨想錄第7天 454 、 383 、15、18

代碼隨想錄第7天 454 、 383 、15、18

代碼隨想錄第7天 454. 四數相加 II 思路就是先統計nums1和num2各個元素之和出現的次數&#xff0c;然后遍歷num3和nums4各個元素之和&#xff0c;看其相反數是否在map中&#xff0c;若在加上出現次數 class Solution { public: int fourSumCount(vector<int> &num…
閱讀更多...
nginx.conf配置文件

nginx.conf配置文件

1、全局模塊 worker_processes 1; 工作進程數&#xff0c;一般設置成服務器內核數的2倍&#xff08;一般不超過8個&#xff0c;超過8個反而會降低性能&#xff0c;一般是4個&#xff0c;1-2個也可以&#xff09; 處理進程的過程必然涉及配置文件和展示頁面&#xff0c;也就是…
閱讀更多...
高斯過程的定義

高斯過程的定義

高斯過程 1. 高斯過程的定義2. 協方差矩陣的構建3. 協方差矩陣的性質3.1. 計算挑戰3.2. 解決方法 1. 高斯過程的定義 高斯過程可以看作是對函數的分布&#xff0c;它假定任何有限數量的函數值的集合服從一個多元高斯分布。給定輸入數據點集合 { x 1 , x 2 , … , x n } \left…
閱讀更多...
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("請輸入字符串&…
閱讀更多...
最新文章

Copyright @ 2022~2023