Cesium 實用總結

Cesium是什麼

Cesium是一款面向三維地球和地圖的，世界級的JavaScript開源產品。它提供了基於JavaScript語言的開發包，方便用戶快速搭建一款零插件的虛擬地球Web應用，並在性能，精度，渲染質量以及多平臺，易用性上都有高質量的保證。

Cesium能做什麼

通過Cesium提供的JS API，可以實現以下功能：

使用 3d tiles格式流加載各種不同的 3d 數據，包含傾斜攝影、人工模型、三維建築物、CAD、BIM，點雲數據等。並支持樣式配置和用戶交互操作。並支持樣式配置和用戶交互操作
全球高精度地形數據可視化，支持誇張效果、以及可編程實現的等高線和坡度分析效果。
支持多種資源的圖像層，包括 WMS，TMS， WMTS以及時序圖像。支持透明度疊加，亮度、對比度、GAMMA、色調、飽和度都可以動態調整。支持圖像的捲簾對比。
支持標準的矢量格式 KML 、GeoJSON、TopoJSON，以及矢量的貼地效果。
三維模型支持 gltf2.0 標準的 PBR 材質、動畫蒙皮和和變形效果。貼地以及高亮。
使用 CZML 支持動態時序數據的展示。
支持各種幾何體：點、線、面、標註、公告牌、立方球、橢球體、圓柱走廊 (corridors)、管徑、牆體
可視化效果包括：基於太陽位置的陰影、自身陰影，柔和陰影。
大氣、霧、太陽、陽光、月亮、星星、水面。
粒子特效：煙、火花。
地形、模型3d tiles模型的面裁剪。
對象點選和地形點選。
支持鼠標和觸摸操作的縮放、渲染、慣性平移、飛行、任意視角、地形碰撞檢測。
支持 3d 地球、 2d 地圖、 2.5d 哥倫布模式。 3d 視圖可以使用透視和正視兩種投影方式。
支持點、標註公告牌的聚集效果。

Github

https://github.com/AnalyticalGraphicsInc/cesium

1.常用配置

1.1 Cesium

const viewer new Viewer('viewport',{ 
    sceneMode: SceneMode.SCENE2D,   //設置場景模式爲2D，默認爲3D
    selectionIndicator : false,    //隱藏選擇控件
    infoBox : false,               //隱藏信息框控件
    animation : false,                 //隱藏動畫速度控制控件
    fullscreenButton : false,      //隱藏全屏控件
    sceneModePicker : false,       //隱藏場景模式選擇控件
    timeline : false,              //隱藏時間軸控件
    navigationHelpButton : false,  //隱藏控制幫助控件
    homeButton : false,            //隱藏返回Home控件
    geocoder : false,              //隱藏定位搜索控件
    navigationInstructionsInitiallyVisible: false,     //navigationHelp初始不顯示
    skyBox : false,                //天空設置，undefined則顯示默認星空
    skyAtmosphere : false,             //不顯示藍色的大氣層
    selectedImageryProviderViewModel : undefined,  //不顯示地圖圖像
    selectedTerrainProviderViewModel : undefined,  //不顯示地形圖像
    globe : false,                                     //不要地球
    shadows : false                                    //不顯示陽光照射下的陰影效果
})
  
viewer.cesiumWidget.creditContainer.style.display = "none"  //去cesium logo 水印
viewer.resolutionScale = window.devicePixelRatio            //dpr優化
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(ScreenSpaceEventType.LEFT_DOUBLE_CLICK)   //取消雙擊默認操作

1.2 3D Tiles

const tileset = new Cesium3DTileset({
    url : uri,                      //3D Tiles json數據文件
    maximumScreenSpaceError : 500, //最大屏幕控件誤差，隨着相機高度的下降，該值越大，渲染更精細圖片的時機越晚
    cullWithChildrenBounds  : false, //優化項
})
  
tileset.readyPromise.then(function(tileset) {
    const boundingSphere = tileset.boundingSphere       //模型的包圍球
    const radius = boundingSphere.radius                //包圍球的半徑
    viewer.zoomTo(tileset, new HeadingPitchRange(0, -90, 700))      //視角轉至該模型，相機以該模型爲中心，以北爲前方，垂直地表向下，高度爲700m
})

1.3 Camera

//相機高度限制
screenSpaceCameraController.minimumZoomDistance = MinimumZoomDistance
screenSpaceCameraController.maximumZoomDistance = MaximumZoomDistance
  
screenSpaceCameraController.enableTilt = false      //限時相機無法傾斜
screenSpaceCameraController.enableZoom = false      //限制相機無法縮放
screenSpaceCameraController.enableRotate = false    //限制相機無法上下左右移動（3D模式下，2D模式下相機的平行移動是translate）

2.事件綁定

2.1 鼠標事件

const eventHandler = new ScreenSpaceEventHandler(viewer.canvas)
//左鍵點擊綁定操作
eventHandler.setInputAction(function(movement) {
    const {x, y} = movement.position
    console.log("click at [x: " + x + ",y: " + y + "]")
}, ScreenSpaceEventType.LEFT_CLICK)
 
 
//鼠標移動綁定操作
eventHandler.setInputAction(function(movement) {
    const {x1, y1} = movement.startPosition
    const {x2, y2} = movement.endPosition
    console.log("start at [x: " + x1 + ",y: " + y1 + "]")
    console.log("start at [x: " + x2 + ",y: " + y2 + "]")
}, ScreenSpaceEventType.MOUSE_MOVE)

2.2 相機事件

viewer.scene.camera.percentageChanged = 0.05  //設置相機變化的識別精度
 
 
//設置相機變化的監聽事件
const removeChanged = camera.changed.addEventListener(percentage => {
    console.log("camera moved " +  percentage + "%")
})
 
removeChanged() // 移除監聽事件

2.3 clock事件

let count = 0
//每幀都會調用的函數，可以在這裏寫動畫控制
viewer.clock.onTick.addEventListener(clock => {
    console.log("tick × " + count++)
})

3. 座標與位置

3.1 座標類型與轉換

Cartesian3：笛卡爾空間直角座標系

new Cesium.Cartesian3(x, y, z)
  
Cartesian3.fromDegrees(longitude, latitude，height)   //經緯度（角度）轉笛卡爾座標
Cartesian3.fromRadians(longitude, latitude, height)   //經緯度（弧度）轉笛卡爾座標
viewer.camera.pickEllipsoid(movement.position)        //屏幕位置轉笛卡爾座標，取與球面相交的點，默認球面爲WGS84爲時 高度一定爲0
viewer.scene.pickPosition(movement.position)          //屏幕位置轉笛卡爾座標，取與模型相交的點
可看作以橢球體中心爲原點建立的xyz空間直角座標系，描述點在世界中的位置

Cartographic：經緯度座標系

以地球經緯度和高度來描述點的位置
經度：參考橢球面上某點的大地子午面與本初子午面間的兩面角。東正西負。
緯度：參考橢球面上某點的法線與赤道平面的夾角。北正南負。

Cesium中爲弧度單位，注意角度與弧度的轉換

new Cesium.Cartographic(longitude, latitude, height)
  
//角度與弧度互相轉換
Cesium.Math.toDegrees(radians)
Cesium.Math.toRadians(degrees)
  
Cartographic.fromCartesian(cartesian3) //笛卡爾座標轉經緯度（弧度）座標

canvas座標（屏幕座標）

鼠標監聽事件獲得的位置座標，爲{x, y}格式的二維座標

new Cartesian2(x,y)
  
SceneTransforms.wgs84ToWindowCoordinates(scene, entityCartesian3Position, position) //將笛卡爾座標轉爲屏幕座標
viewer.scene.cartesianToCanvasCoordinates(cartesian3Position, position)             //轉爲屏幕座標

3.2 座標獲取與設置

const entityCartesian3Position = entity.position.getValue(JulianDate.now())     // 獲取實體當前的位置，與時間點相關，爲笛卡爾座標
entity.position = newCartesian3Position                                         // 設置實體的位置
  
camera.position                                                                 // 獲取相機的位置，爲笛卡爾座標
camera.setView({                                                                // 改變相機的位置
    destination: newCartesian3Position                                         
})

4. Entity

4.1 基本

//添加一個billboard實體
const entity = new Entity({
    id:  0,
    name: "一個billboard實體",
    position: cartesian3Position
    billboard: {
        img: "../images/Cesium_Logo_overlay.png",
        width: 30,
        height: 30,
    }
})
viewer.entities.add(entity)

4.2 更多

5. Primitive

5.1 基本
5.2 自定義幾何體

6.相機

6.1 視錐模型

視錐指的是一個實體形狀，看起來像是一個頂部被平行於地基切除的金字塔。這就是一個透視相機渲染時能看到區域的形狀。下面的思考實驗有助於解釋這個情況的成因。
想象拿着一根直棍子（比如掃帚把手或者鉛筆）的一端對着相機並拍照。如果棍子正對着照片的中心，垂直於相機鏡片，那麼相機上只會看到一個圓；除了棍子的斷點其它部分會被遮擋。如果將棍子向上移，慢慢能看見棍子的遠端，但是將棍子向上翹起又會將遠端隱藏起來。繼續向上移動並向上調整棍子角度，圓形的斷電最終會到達照片的邊緣。在這個點上，現實世界中所有在棍子所在線上方的物體在照片中都不會出現。

棍子也可以簡單的像左、右、下或者水平垂直移動的任意組合。相應調整棍子的角度都可以將棍子在相機中隱藏起來。
這個思考實驗的意義在於，相機圖片中的任何一個點最終對應於現實世界中的一條線，並且只會顯示這條線上的一個點，這條線上所有在這個顯示的點後面的物體都會被遮擋。圖片的外邊界由四個頂點對應的發散線定義。這四條線最終相交於相機位置所在的點。Unity中這個點就是相機的transform位置，被稱爲透視視圖的中心。屏幕頂部和底部中心點彙集到透視視圖中心點的連線形成的角度被稱爲視野（field of view FOV）。
如上面介紹的，所有落在照片邊界對應的發散線以外的事物在相機上是不可見的，同時還有兩外兩個限制。遠近裁切平面平行於相機的XY平面，分別在相機的中心線上設置了一個確定的距離。所有於相機的距離小於近平面的距離或者大於遠平面的距離的物體都不會被渲染。

Cesium 實用總結

Cesium是什麼

Cesium能做什麼

Github

1.常用配置

1.1 Cesium

1.2 3D Tiles

1.3 Camera

2.事件綁定

2.1 鼠標事件

2.2 相機事件

2.3 clock事件

3. 座標與位置

3.1 座標類型與轉換

3.2 座標獲取與設置

4. Entity

4.1 基本

5. Primitive

6.相機

6.1 視錐模型

一個開源且全面的C#算法實戰教程

一款.NET開源、功能強大、跨平臺的繪圖庫 - OxyPlot

CORS error 但是 status code 是200 OK

壓縮上傳的GPU數據的方案

使用skopeo同步鏡像

視頻尺寸時長獲取及截圖 - JavaScript

Promise 併發個數限制

JQuery對象與DOM對象

jQuery中prop和attr的區別

LeetCode之letter-combinations-of-a-phone-number（手機數字鍵中字母組合）- javascript版

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結