表2 屏幕對應(yīng)的類前綴

因此, 系統(tǒng)很好的解決了諸多不同瀏覽器和不同尺寸屏幕的兼容性問題, 提高了用戶在不同場景下瀏覽網(wǎng)站的體驗(yàn)度. 同時, 系統(tǒng)根據(jù)瀏覽器的當(dāng)前硬件環(huán)境、網(wǎng)絡(luò)環(huán)境的不同, 對網(wǎng)頁的顯示進(jìn)行相應(yīng)的調(diào)整布局. 特別是在移動數(shù)據(jù)訪問環(huán)境下, 用戶訪問地質(zhì)標(biāo)本的圖片、三維數(shù)據(jù)或網(wǎng)站視頻前, 系統(tǒng)將為提示用戶當(dāng)前的網(wǎng)絡(luò)環(huán)境.

3.2 海量地質(zhì)標(biāo)本的存儲管理

目前, 海量數(shù)據(jù)的存儲管理方式主要有文件系統(tǒng)、關(guān)系型數(shù)據(jù)庫、關(guān)系型數(shù)據(jù)庫+文件系統(tǒng)3種存儲管理方式[10]. 但由于系統(tǒng)涉及到諸多的數(shù)據(jù)格式, 如文字、圖片、圖表、音頻、PDF、三維數(shù)據(jù)等, 采用某一種的存儲方式都不能很好地兼顧這些數(shù)據(jù)的存儲.因此, 系統(tǒng)依據(jù)數(shù)據(jù)特點(diǎn)采用不同的數(shù)據(jù)存儲方式混合存儲.

地質(zhì)標(biāo)本的描述數(shù)據(jù)(如名稱、類別、顏色、物理性質(zhì)、化學(xué)性質(zhì)等)存儲到數(shù)據(jù)庫中的樣品公共屬性表和五大類別個性屬性表. 標(biāo)本圖片、PDF、音頻等因其數(shù)據(jù)大而以文件的方式進(jìn)行物理存儲, 其物理地址以數(shù)據(jù)表的形式存儲到數(shù)據(jù)庫中. 地質(zhì)標(biāo)本的大小、結(jié)構(gòu)狀況不同導(dǎo)致掃描后獲取的地質(zhì)標(biāo)本三維數(shù)據(jù)的數(shù)據(jù)量不同, 因此以統(tǒng)一的文件命名規(guī)則(地質(zhì)標(biāo)本編碼+名稱)存放在計算機(jī)(或服務(wù)器)上. 一方面避免海量數(shù)據(jù)的上傳, 耗費(fèi)帶寬和時間; 另一方面有利于數(shù)據(jù)的遷移、備份, 加強(qiáng)了地質(zhì)標(biāo)本三維數(shù)據(jù)的管理. 依據(jù)系統(tǒng)涉及到的數(shù)據(jù)特點(diǎn), 采用不同的數(shù)據(jù)存儲方式,能夠充分合理地存儲、使用數(shù)據(jù), 提高數(shù)據(jù)的使用效率.

3.3 縮略圖的處理

地質(zhì)標(biāo)本的圖片在系統(tǒng)的多個界面(樣品檢索、樣品詳細(xì)信息、圖片庫等)都會用到, 但每個界面對圖片的尺寸要求不同. 為了提高系統(tǒng)的響應(yīng)速度, 系統(tǒng)采用縮略圖的呈現(xiàn)方式在網(wǎng)頁中更加迅速地載入圖片.系統(tǒng)設(shè)置了5種尺寸, 分別為100 px*100 px、150 px*150 px、200 px*200 px、450 px*450 px、原始圖片尺寸. 系統(tǒng)在后臺管理中對地質(zhì)標(biāo)本的圖片進(jìn)行上傳的時, 調(diào)用編寫后的thumbnail類進(jìn)行縮略圖的生成和保存. 地質(zhì)標(biāo)本的圖片展示根據(jù)不同的網(wǎng)頁環(huán)境讀取不同尺寸的的圖片, 在地質(zhì)標(biāo)本的瀏覽排行中調(diào)用100 px*100 px的圖片, 在樣品的搜索界面中調(diào)用150 px*150 px的圖片, 在首頁、圖片庫界面中調(diào)用200 px*200 px的圖片, 在樣品的詳細(xì)界面中調(diào)用450*450 px的圖片, 在查看樣品圖片界面中調(diào)用原始圖片. 雖然使用縮略圖會占用較多的存儲空間, 但在一定程度上提高了系統(tǒng)的響應(yīng)速度, 當(dāng)同時瀏覽人數(shù)眾多時, 不會影響用戶的使用體驗(yàn).

3.4 三維可視化顯示

系統(tǒng)主要采用WebGL技術(shù)[11,12]對掃描后的地質(zhì)標(biāo)本三維模型進(jìn)行加載顯示. WebGL是一套跨平臺、開放、無插件的底層3D圖形JavaScriptAPI, 它通過HTML5 Canvas元素作為DOM接口訪問來實(shí)現(xiàn)三維渲染和web交互. 因此, 程序可以在瀏覽器里執(zhí)行而不必安裝任何其他特殊的插件, 省去了用戶不必要的操作.另一方面, 它借助計算機(jī)顯卡進(jìn)行圖形渲染, 使瀏覽器展示三維模型更加順暢. 其中, Three.js[13]是一款對WebGL封裝很好的優(yōu)秀的第三方開源庫, 使得開發(fā)人員能夠在無需掌握繁冗的圖形學(xué)知識的情況下, 也能用簡單的代碼實(shí)現(xiàn)三維場景的渲染.

地質(zhì)標(biāo)本的三維數(shù)據(jù)主要是通過3D激光掃描技術(shù)掃描生成統(tǒng)一標(biāo)準(zhǔn)的3D模型文件格式(.obj), 這有利于對三維數(shù)據(jù)的管理和讀取顯示. 地質(zhì)標(biāo)本三維可視化的實(shí)現(xiàn)的主要步驟如下:

(1) 加載相關(guān)的Javascript引用庫three.js、OBJLoader.js、MTLLoader.js等;

(2) 定義場景、相機(jī)、渲染環(huán)境;

(3) 先加載材質(zhì), 后加載3D模型;

(4) 場景更新.

在實(shí)現(xiàn)的過程中, 為了更好地真實(shí)準(zhǔn)確的進(jìn)行地質(zhì)標(biāo)本的三維觀察, 有必要對場景的顏色、相機(jī)的角度、光源環(huán)境等進(jìn)行調(diào)整設(shè)置.

3.5 用戶行為分析

地質(zhì)標(biāo)本的數(shù)量多, 且與之相關(guān)的知識繁多, 學(xué)生對每一種地質(zhì)標(biāo)本及其相關(guān)知識的掌握程度不一樣.因此, 以用戶在訪問網(wǎng)站的過程中產(chǎn)生的所有數(shù)據(jù)(包括點(diǎn)擊率、點(diǎn)擊量、訪問率、訪問模塊、頁面停留時間)為基礎(chǔ)進(jìn)行整理、統(tǒng)計, 通過對每個模塊的點(diǎn)擊率、點(diǎn)擊量進(jìn)行網(wǎng)站數(shù)據(jù)分析, 調(diào)整網(wǎng)站布局, 通過對用戶訪問停留時間、訪問量、地域等進(jìn)行用戶基本動作的分析, 了解用戶操作習(xí)慣和關(guān)注點(diǎn), 并實(shí)時優(yōu)化系統(tǒng)功能和內(nèi)容更新, 方便學(xué)生的學(xué)習(xí).

系統(tǒng)設(shè)計了“用戶操作”日志管理功能[14-16], 如圖3,當(dāng)訪問用戶點(diǎn)擊某張地質(zhì)標(biāo)本圖片或?yàn)g覽某個頁面時,系統(tǒng)進(jìn)行相關(guān)數(shù)據(jù)的收集、整理, 然后根據(jù)需求進(jìn)行統(tǒng)計分析并以圖表的方式展示出來.

圖3 用戶行為分析流程

通過日志管理的方式記錄學(xué)生關(guān)注哪些地質(zhì)標(biāo)本、地質(zhì)知識, 然后采用統(tǒng)計圖表的方式統(tǒng)計和分析用戶行為, 依據(jù)分析結(jié)果對網(wǎng)站內(nèi)容的布局和地質(zhì)教學(xué)提過一定的參考.

4 系統(tǒng)應(yīng)用實(shí)例

本研究以長江大學(xué)作為系統(tǒng)的開發(fā)與應(yīng)用單位,該高校地質(zhì)標(biāo)本實(shí)驗(yàn)室有上百種地質(zhì)標(biāo)本, 上萬個地質(zhì)標(biāo)本, 供四個學(xué)院的教學(xué)使用. 系統(tǒng)前端界面主要有首頁、樣品檢索、圖片庫、科普園地、技能訓(xùn)練、統(tǒng)計數(shù)據(jù)等多個欄目. 該系統(tǒng)遵循HTML5協(xié)議, 支持IE9.0、Chrome、Firefox等主流瀏覽器, 適應(yīng)PC、平板、手機(jī)等多種不同分辨率, 不同尺寸的設(shè)備, 如圖4所示. 虛擬仿真教學(xué)平臺樣品檢索界面. 如圖5所示, 用戶可以通過界面左側(cè)的五大樣品庫或類別檢索樹、右側(cè)頂部的名稱、編號等進(jìn)行樣品檢索. 樣品詳細(xì)界面依據(jù)樣品所在庫內(nèi)容會有相應(yīng)調(diào)整, 如圖6為長石詳細(xì)界面圖, 所在庫為巖石樣品庫, 主要包括樣品簡介、樣品描述、核心性質(zhì)、物理性質(zhì)、化學(xué)性質(zhì)、形成過程、與開采技術(shù)有關(guān)的特點(diǎn)、鑒定方法、用途. 圖7為雌黃的三維界面圖, 經(jīng)測試, 不同地質(zhì)標(biāo)本, 掃描后的三維數(shù)據(jù)量不同, 因此在讀取三維數(shù)據(jù)時, 網(wǎng)頁的數(shù)據(jù)加載時長也不同(表3). 在進(jìn)行地質(zhì)標(biāo)本三維掃描時, 控制標(biāo)本的體積和復(fù)雜程度后, 網(wǎng)頁基本上能正常快速地進(jìn)行三維數(shù)據(jù)的顯示、放大、旋轉(zhuǎn)等操作.

圖4 不同屏幕下首頁效果圖

5 結(jié)束語

本文在當(dāng)前軟硬件技術(shù)發(fā)展的背景下, 充分考慮地質(zhì)標(biāo)本特點(diǎn)、用戶和性能需求后, 采用成熟的三層架構(gòu)體系, 設(shè)計和實(shí)現(xiàn)了地質(zhì)標(biāo)本的樣品檢索、屬性查詢、二三維瀏覽等仿真學(xué)習(xí)功能以及跨平臺、數(shù)據(jù)存儲、三維顯示等系統(tǒng)建設(shè)經(jīng)驗(yàn). 經(jīng)實(shí)際應(yīng)用表明, 該系統(tǒng)有助于對地質(zhì)標(biāo)本進(jìn)行規(guī)范、有序存放和科學(xué)管理, 為教師的實(shí)驗(yàn)教學(xué)和學(xué)生的專業(yè)學(xué)習(xí)創(chuàng)造了一個多樣化的教學(xué)平臺環(huán)境.

圖5 樣品檢索界面

圖6 長石詳細(xì)界面

圖7 雌黃三維界面

表3 三維數(shù)據(jù)量對應(yīng)的加載時長

1劉光鼎. 論地球科學(xué). 地學(xué)前緣, 1998, 5(1-2): 2–9.

2祝智庭, 賀斌. 智慧教育: 教育信息化的新境界. 電化教育研究, 2012, (12): 5–13.

3Lavoué G, Chevalier L, Dupont F. Streaming compressed 3D data on the web using JavaScript and WebGL. Proc. 18th International Conference on 3D Web Technology. New York, NY, USA. 2013. 19–27.

4王穎, 路紫. 我國巖礦化石數(shù)據(jù)庫的類型劃分及省級模式設(shè)計——以河北省巖礦化石數(shù)據(jù)庫建設(shè)為例. 山東師范大學(xué)學(xué)報(自然科學(xué)版), 2008, 23(3): 103–105, 109.

5霍宏旭. 國家?guī)r礦化石標(biāo)本資源信息網(wǎng)站設(shè)計與應(yīng)用[碩士學(xué)位論文]. 北京: 中國地質(zhì)大學(xué)(北京), 2006.

6祖強(qiáng), 魏永軍. 國家級虛擬仿真實(shí)驗(yàn)教學(xué)中心建設(shè)現(xiàn)狀探析. 實(shí)驗(yàn)技術(shù)與管理, 2015, 32(11): 156–158. [doi: 10.3969/j.issn.1002-4956.2015.11.042]

7方如康. 我國的自然資源及其合理利用. 北京: 科學(xué)出版社, 1985.

8胡迎松, 彭利文, 池楚兵. 基于.NET的Web應(yīng)用三層結(jié)構(gòu)設(shè)計技術(shù). 計算機(jī)工程, 2003, 29(8): 173–175.

9Bootstrap中文網(wǎng). http://www.bootcss.com/.

10郭跟成, 劉勇, 鄭金甫. 軟件開發(fā)中文件或數(shù)據(jù)庫系統(tǒng)的選擇策略. 河南科技大學(xué)學(xué)報(自然科學(xué)版), 2005, 26(6):40–42.

11Parisi T. WebGL: Up and running. Sebastopol, CA: O’Reilly Media, Inc., 2012.

12Parisi T. Programming 3D applications with HTML5 and WebGL: 3D animation and visualization for web pages.Sebastopol, CA: O’Reilly Media, Inc., 2014.

13Dirksen J. Three.js開發(fā)指南. 李鵬程譯. 北京: 機(jī)械工業(yè)出版社, 2015.

14余少華, 關(guān)勇, 戴一奇. 數(shù)據(jù)挖掘在日志管理中的應(yīng)用. 計算機(jī)工程與應(yīng)用, 2004, 40(15): 178–181. [doi: 10.3321/j.issn:1002-8331.2004.15.056]

15趙志學(xué). 基于.net的三層架構(gòu)B/S工作日志管理系統(tǒng)設(shè)計與實(shí)現(xiàn). 電腦學(xué)習(xí), 2009, (4): 41–43.

16劉明月. 基于Web日志的用戶行為分析[碩士學(xué)位論文]. 北京: 北京交通大學(xué), 2008.

Geological Specimens Virtual Simulation Learning Platform

QI Zhi-Wu, LI Gong-Quan, LIU Huan
(College of Earth Sciences, Yangtze University, Wuhan 430000, China)

The identification of geological specimens is a basic skill that must be possessed by students of geoscience.However, due to the great variety, different attributes and scarcity of geological specimens, it is very difficult for students to study in full. In this paper, from the perspective of software engineering, the characteristics of geological specimens are presented as the starting point to determine the basic functional requirements of the platform. The paper designs the system architecture and function modules, discusses the main technologies and characteristics of the system, and finally carries out the system. Through the construction of the virtual simulation platform of geological specimens, the advanced software and hardware technology can be used to realize the retrieval of geological specimens, attribute browsing, threedimensional display and other functions, to provide students with a new learning method to improve their identification skills. Practical application shows that the system can effectively enrich the students' understanding of geological specimens and improve the students' ability of discrimination.

geological specimens; education informatization; specimen retrieval; WebGL; software engineering

李功權(quán), E-mail: 195648169@qq.com

祁志武,李功權(quán),劉歡.地質(zhì)標(biāo)本虛擬仿真學(xué)習(xí)平臺.計算機(jī)系統(tǒng)應(yīng)用,2017,26(7):110–115. http://www.c-s-a.org.cn/1003-3254/5876.html

2016-11-10; 收到修改稿時間: 2017-01-04