1.簡介
cesium 一個開源的javascript三維虛擬地球/地圖可視化框架,目標是動態數據可視化的虛擬地球領導者,盡一切可能去優化性能、精度、效果,易用性、平臺支撐、內容
cesium特點:
• 基於HTML5標準,無插件,跨平臺
• 無法獨立運行,依賴於瀏覽器(CesiumLab基於Electron架構)
• 瀏覽器又是基於HTTP協議的,所以Cesium要正確運行必須有HTTP Server
• 但是HTTP Server的實現不限於開發語言和服務器,學Cesium可以不用nodejs
2.官方資料
3.中文學習網站
4.數據處理工具
5.cesium功能
- 使用3d tiles 格式流式加載各種不同的3d數據,包含傾斜攝影模型、三維建築物、CAD和BIM的外部和內部,點雲數據。並支持樣式配置和用戶交互操作。
- 全球高精度地形數據可視化,支持地形誇張效果、以及可編程實現的等高線和坡度分析效果。
- 支持多種資源的圖像圖層,包括WMS,TMS,WMTS以及時序圖像。圖像支持透明度疊加、亮度、對比度、GAMMA、色調、飽和度都可以動態調整。支持圖像的捲簾對比。
- 支持標準的矢量格式KML、GeoJSON、TopoJSON,以及矢量的貼地效果。
- 三維模型支持gltf2.0標準的PBR材質、動畫、蒙皮和變形效果。貼地以及高亮效果。
- 使用CZML支持動態時序數據的展示。
- 支持各種幾何體:點、線、面、標註、公告牌、立方體、球體、橢球體、圓柱體、走廊(corridors)、管徑、牆體
- 可視化效果包括:基於太陽位置的陰影、自身陰影、柔和陰影。
- 大氣、霧、太陽、陽光、月亮、星星、水面。
- 粒子特效:煙、火、火花。
- 地形、模型、3d tiles模型的面裁剪。
- 對象點選和地形點選。
- 支持鼠標和觸摸操作的縮放、渲染、慣性平移、飛行、任意視角、地形碰撞檢測。
- 支持3d地球、2d地圖、2.5d哥倫布模式。3d視圖可以使用透視和正視兩種投影方式。
- 支持點、標註、公告牌的聚集效果。
6.源碼下載
7.離線API和案例發佈
IIS發佈,操作如下:
(1)打開iis服務器,添加網站
(2)填好網站名稱和物理地址 端口也可自定義,注意端口衝突問題,填好後如下所示
(3)點擊預覽如下所示即可實現本地化API和官網案例
8,使用HttpServer啓動項目 (使用httpserver 和開發軟件vccode簡單啓動,也可以使用webstrom hbuilder 等其他編碼軟件,再此簡單介紹一款耗內存小的啓動方式)
(1)安裝NodeJS
- npm install -- 安裝cesium開發和運行中依賴的第三方nodejs包
- npm run release – 把cesium各模塊源碼打包壓縮生成統一cesium.js 命令深度解釋
- npm start – 開啓cesium的測試Http Server
(2)安裝http-server插件
npm install -g http-server
http-server 簡單http服務器
(3)vscode 免費開源的開發軟件
(4)新建目錄,新建index.html,複製官網的一個例子下來
如下
修改自己的token,和將在線的cesium地址改成自己本地化且用IIS發佈後的地址,啓動項目即實現了自己的第一個cesium demo
<!DOCTYPE html>
<html lang="en">
<head>
<!-- <script src="https://cesiumjs.org/releases/1.52/Build/Cesium/Cesium.js"></script>
<link href="https://cesiumjs.org/releases/1.52/Build/Cesium/Widgets/widgets.css" rel="stylesheet"> -->
<script src="http://localhost:91/Build/CesiumUnminified/Cesium.js"></script>
<link href="http://localhost:91/Build/CesiumUnminified/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<div id="cesiumContainer" style="width: 700px; height:400px"></div>
<script>
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2N2YwMjFlNi1hMTg2LTRkNTctYjNlYS04ODg1OTgwNmMyY2QiLCJpZCI6NDU3NCwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0MTEyODAzM30.LwNvzpTYeRZohw0mU682yK1WaShQyMsmek3LTgR9_g4';
var viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider: Cesium.createWorldTerrain()
});
var tileset = viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({
url: Cesium.IonResource.fromAssetId(3827)
})
);
viewer.zoomTo(tileset);
</script>
</body>
</html>
將不定期更新資源,歡迎持續關注
想獲得更多的學習知識請關注微信公衆號:西北碼農或掃下方二維碼