CesiumJS 導(dǎo)出快速上手:截圖、錄像、數(shù)據(jù)三種交付方式【免費下載鏈接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:項目地址: https://gitcode.com/GitHub_Trending/ce/cesium你調(diào)好的 3D 場景,可以變成三種能交付的東西:一張圖片、一段能播放的視頻、一份能進其他系統(tǒng)的地理要素文件。 本文按 CesiumJS 導(dǎo)出的實際使用順序,把三者的選擇邏輯、常用參數(shù)和坑一次講清,看完就能直接上手。 整個過程只需要瀏覽器和項目自帶文件,不用額外搭環(huán)境。 先想清楚要導(dǎo)出什么:三種交付物各適合什么場景動手前先選對交付物,選錯方式比參數(shù)沒調(diào)好更浪費時間:一張圖:放進報告、郵件附圖、匯報配圖,選截圖。一段運動畫面:相機飛越、實體動畫、時間動態(tài)效果,選錄像。可復(fù)用的要素信息:坐標、屬性、時間序列要進別的系統(tǒng)或項目下一版,選數(shù)據(jù)文件。很多導(dǎo)出問題,本質(zhì)是交付物選錯了:只想分享場景外觀,一張圖就夠;想把數(shù)據(jù)帶出去,就別錄十分鐘視頻。 截圖:把當(dāng)前視角存成圖片原理一句帶過:場景每幀都畫在畫布上,想存圖時調(diào)用toDataURL把當(dāng)前幀轉(zhuǎn)成 PNG 數(shù)據(jù)字符串,再落成文件即可,不需要手動配置。截圖前必做的一件事等場景加載完再拍。瓦片鋪滿、模型貼圖顯示出來、動畫跑到目標幀,再動手,不然很容易拿到一幀半加載的畫面。質(zhì)量上盯三點:分辨率跟著畫布走:畫布拉滿整窗,圖就大;想要小圖,先縮小畫布尺寸再截。視角定好再截:截圖只認當(dāng)前幀,構(gòu)圖事后補不了,先轉(zhuǎn)好相機再導(dǎo)出。文件名帶信息:場景名、視角編號、日期一起寫上,多視角時編號補零,方便排序。底層渲染與截圖的入口在 Scene.js,想改截圖行為可以從這里讀起。 錄像:把相機運動存成視頻錄像的實質(zhì)是把逐幀變化的畫面交給瀏覽器的MediaRecorder編碼成視頻文件。錄進視頻的就是屏幕上的內(nèi)容:相機運動、實體動畫、時間動態(tài)效果會一起被記下來。錄像幀率怎么定幀率先取 30,體積和流暢度最穩(wěn),多數(shù)飛越、演示都夠用。畫面變化慢(如緩慢平移),24 也能用,體積更小。相機運動快、畫面刷新猛,試 60;嫌文件大再降回 30。分辨率按投放位置定:網(wǎng)頁里用就匹配畫布實際尺寸,匯報材料里用,1080p 足夠。體積大致等于時長、幀率、分辨率三者相乘,任意兩項讓步,第三項就能省。兩個實用點:長鏡頭分段錄:整條飛越拆成幾段分別導(dǎo)出,比一次錄完翻車后重錄省事。卡頓先降分辨率:機器編碼能力有限,先降分辨率,再動幀率。 數(shù)據(jù)導(dǎo)出:把地理要素帶出項目這里導(dǎo)出的不是渲染出來的像素,而是項目里存著的要素信息:坐標、屬性字段、樣式、時間序列。這是數(shù)據(jù)導(dǎo)出和截圖、錄像的根本區(qū)別。三種數(shù)據(jù)格式怎么選GeoJSON:點、線、面等幾何要素,通用度最高;只要幾何加屬性,優(yōu)先它。CZML:數(shù)據(jù)帶時間維度(位置隨時變、實體做動畫),選這個。KML:要拿給 Google Earth 或第三方工具打開,優(yōu)先這個,兼容性有保障。結(jié)構(gòu)清晰的數(shù)據(jù),先定格式再導(dǎo)出,別想著先倒出來再改,格式轉(zhuǎn)換的成本通常比認真導(dǎo)一次更高。這類數(shù)據(jù)源的實現(xiàn)可以看 KmlDataSource.js,同一目錄下還有 GeoJSON 和 CZML 對應(yīng)的處理文件。? 效率與避坑:批量、時機、體積一起算批量截圖靠流程,不靠按鈕:用腳本讓相機依次飛位,每個視角等畫面穩(wěn)定再截一張;文件名按場景 視角號 日期來,編號補零,避免覆蓋和亂序。時機統(tǒng)一等加載:場景沒加載完、時鐘沒到目標時間,都不動手;等十秒,比重導(dǎo)一次便宜得多。體積控制的順序:截圖控畫布尺寸,導(dǎo)出后再壓縮;錄像先降分辨率再降幀率;數(shù)據(jù)先刪字段,只留要用的。正式導(dǎo)出前先試跑:用小尺寸、短時長出一次樣,確認構(gòu)圖和格式?jīng)]問題,再跑正式版本。記住三句話就夠了:先定交付物:單幀截圖,運動錄像,可復(fù)用要素走文件。場景加載完再導(dǎo)出,文件統(tǒng)一帶上場景 視角 日期。體積大就先降分辨率和幀率,別急著換格式。【免費下載鏈接】cesiumAn open-source JavaScript library for world-class 3D globes and maps :earth_americas:項目地址: https://gitcode.com/GitHub_Trending/ce/cesium創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考