cesiumjs壁紙的簡單介紹

本文目錄一覽：

• 1、Cesiumjs可以載入傾斜攝影的OSGB數據嗎
• 2、cesium上如何綁定地球圖片添加點擊事件
• 3、cesium 和 Three.js有什麼區別，以及二者與WebGL 的關係
• 4、cesium截圖不顯示繪製元素

Cesiumjs可以載入傾斜攝影的OSGB數據嗎

可以！

不過不是載入原始的OSGB格式的數據，必須經過轉換（OSGB2B3DM.exe），轉換後為b3dm格式，是cesium支持的切片模型載入的格式。

——————–cesium載入b3dm代碼——

var model=_teemo_scene.primitives.add(new Cesium.Cesium3DTileset({

id: o.id,

url: o.url,

maximumMemoryUsage:1024,//內存使用最大量

skipLevelOfDetail : true,//↓↓↓LOD優化項↓↓↓

baseScreenSpaceError : 1024,

skipScreenSpaceErrorFactor : 16,

skipLevels : 1,

immediatelyLoadDesiredLevelOfDetail : false,

loadSiblings : false,

cullWithChildrenBounds : true

}));

cesium上如何綁定地球圖片添加點擊事件

拾取和選擇

ThingJS 系統內置了很多事件，比點擊滑鼠、鍵盤輸入、層級變化等。用戶可以監聽這些事件，在事件回調中進行相應的業務邏輯處理網頁鏈接

拾取

通過屬性和介面獲取滑鼠拾取（Pick）的物體

當滑鼠在一個物體上懸停時，我們經常希望做一些操作，比如變色等。

我們使用 Picker 類來獲取滑鼠拾取（Pick）的物體，通過 app.picker 得到 Picker 類來實現這個功能，見下例：

//判斷拾取的物體是否改變if(app.picker.isChanged()) {

//通過app.picker.objects 得到當前拾取的物體

console.log(app.picker.objects);

//通過app.picker.previousObjects 得到之前拾取的物體

console.log(app.picker.previousObjects);}  

通過事件獲取滑鼠拾取的物體

可以通過 MouseEnter 和 MouseLeave 來實現 。

// 滑鼠拾取物體顯示邊框app.on(THING.EventType.MouseEnter, ‘.Thing’ ,function(ev) {

ev.object.style.outlineColor = ‘#FF0000′;});// 滑鼠離開物體邊框取消app.on(THING.EventType.MouseLeave,’.Thing’, function(ev) {

ev.object.style.outlineColor = null;});

查看示例

示例效果如下圖所示：

請點擊輸入圖片描述

當 Pick 發生變化時會觸發 PickChange 事件,也可以通過事件的回調參數獲取當前和之前的拾取物體。

app.on(THING.EventType.PickChange,function (ev) {

ev.objects.style.color = ‘#ff0000’;

ev.previousObjects.style.color = null;});

區域 Pick 物體

有時我們通過滑鼠框選一個區域，在區域內的物體我們認為是被 `Pick` 的，如下例：

//由於框選比較消耗性能，因此預先設置框的「候選集」，只在候選集中框選var things = app.query(‘.Thing’);app.picker.areaCandidates = things;//啟動框選 傳入 滑鼠按下時開始框選的屏幕坐標app.picker.startAreaPicking({

x: x,

y: y});//結束框選app.picker.endAreaPicking();

查看示例

pickedResultFunc

可通過 pickedResultFunc 設置拾取對象回調函數，詳見代碼塊，如下圖：

請點擊輸入圖片描述

選擇

選擇物體

滑鼠懸停到物體上，但不代表我選擇它了，比如是我們點擊後才表明我們選擇了它。選擇物體，我們通過 Selection模塊實現，可通過 app.selection 的介面實現該功能，見下例：

//將物體加入到選擇集中app.selection.select(obj);// 判斷對象是否在選擇集中app.selection.has(obj);//將物體從選擇集中刪除app.selection.deselect(obj);//清空選擇集app.selection.clear();

通過屬性和方法，偵測選擇集變化

Selection 通過提供 isChanged 方法獲取選擇集變化，通過 objects 和 previousObjects 獲取當前選擇集和變化之前的選擇集，見下例：

if(app.selection.isChanged()) {

//獲取當前哪些物體被選擇

console.log(app.selection.objects);

//當isChanged時，之前都有哪些物體被選擇

console.log(app.selection.previousObjects);}  

通過事件偵測選擇集變化

可以通過 Select 和 Deselect 事件精確控制物體針對選擇的響應，如下例：

app.on(THING.EventType.Select, ‘.Thing’, function (ev) {

// 選擇集中的物體顏色進行改變

ev.object.style.color = “#ff0000”;});app.on(THING.EventType.Deselect, ‘.Thing’, function (ev) {

// 物體從選擇集中刪除時，清除顏色

ev.object.style.color = null;});

我們也可以通過 SelectionChange 事件。

app.on(THING.EventType.SelectionChange, function (ev) {

console.log(ev.previousObjects+” “+ev.objects);});

cesium 和 Three.js有什麼區別，以及二者與WebGL 的關係

二者都是基於WebGL技術開發的js庫

Threejs受眾面比較廣，是封裝了webgl的一些底層用法，讓初學者更容易上手；例如繪製一個立方體，使用webgl原生api可能要寫50行代碼，包括構建坐標點，頂點組織、著色器等信息；在threejs裡面可能只要一句代碼就可以構建(實際上也是調用webgl原生api)，只是做了更大粒度的封裝

Cesium受眾面相對較小，是Gis相關的，也是基於WebGL開發的，它主要是三維地球相關的js庫，可以展示二維地圖服務(百度高德)、傾斜攝影模型；還可以在上面做一些三維分析，可以參考

cesium截圖不顯示繪製元素

排查了下是在初始化的一個屬性造成的

requestRenderMode設為false或者不設置。默認值為false

requestRenderMode減少Cesium渲染新幀總時間並減少Cesium在應用程序中總體CPU使用率在畫面不發生變化的時候，暫停渲染，變化時再渲染。

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

通過Cesium提供的JSAPI，可以實現以下功能：全球級別的高精度的地形和影像服務

矢量以及模型數據

基於時態的數據可視化

多種場景模式（3D，2.5D以及2D場景）的支持，真正的二三維一體化