Cesium 系列1 - 簡介及源碼下載發佈

1.簡介

cesium 一個開源的javascript三維虛擬地球/地圖可視化框架,目標是動態數據可視化的虛擬地球領導者,盡一切可能去優化性能、精度、效果,易用性、平臺支撐、內容

cesium特點:

• 基於HTML5標準,無插件,跨平臺
• 無法獨立運行,依賴於瀏覽器(CesiumLab基於Electron架構)
• 瀏覽器又是基於HTTP協議的,所以Cesium要正確運行必須有HTTP Server
• 但是HTTP Server的實現不限於開發語言和服務器,學Cesium可以不用nodejs

2.官方資料

   cesium官網  行業案例  cesium gitbub地址

3.中文學習網站 

cesium中文社區  

cesium中文網

fuckgiser 博客

cumtzheNo1的博客

開源中國博客

優秀網址

資料大全

4.數據處理工具

cesiumlab

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>

 

將不定期更新資源,歡迎持續關注


想獲得更多的學習知識請關注微信公衆號:西北碼農或掃下方二維碼

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章