cesium滑塊控制模型透明度-cesium滑塊控制模型透明度…的簡單介紹

本文目錄一覽：

• 1、Cesium快速上手3-Billboard Label PointPrimitives圖元使用講解
• 2、cesium如何改變地圖gamma某一塊區域的透明度
• 3、Cesium的擴展工具包-EarthSDK使用指南1

Cesium快速上手3-Billboard Label PointPrimitives圖元使用講解

面朝屏幕的圖片

;label=Development

//鏈式返回，new Cesium.BillboardCollection() 生成一個對象，這個對象是另一個scene.primitives.add的參數

//position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883)

//position 空間直角坐標系，由經緯度坐標轉換而來；這裡的經緯度省略了Z的參數

// 可以增加一句 var height = Cesium.defaultValue(444444);

// position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883,height )

sizeInMeters : true, //圖像的尺寸被指定成圖像實際的尺寸，不隨地圖的縮放而變換大小

一次創建多個

//scaleByDistance 設置屏幕像素縮放比，150米的時候放大一倍，150000米的時候，縮放到0.5

//Cesium.NearFarScalar四個值，最近的距離，最遠的距離，縮放比例範圍

translucencyByDistance 改動透明度，地球縮放到很小時，透明度增大

pixelOffset : new Cesium.Cartesian2(0.0, -facilityHeight), //在原位置上偏移，防止疊在一起看不到了

pixelOffsetScaleByDistance : new Cesium.NearFarScalar(1.0e3, 1.0, 1.5e6, 0.0), //隨着距離改變偏移量

translucencyByDistance : new Cesium.NearFarScalar(1.0e3, 1.0, 1.5e6, 0.1)//隨着距離改變透明度

添加點的公告牌

增加marker的公告牌

在框架體系中增加廣告牌，平移旋轉縮放，全部圍繞着billboards.modelMatrix

平移到某一點後，旋轉X軸轉到朝東，Y轉到朝北，z軸轉到正上方。

billboards.modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(center);

特點：

始終面朝屏幕，即使旋轉也面朝屏幕

注意創建的集群對象 Cesium.BillboardCollection

為什麼不能創建單個Billboard？Entity來解決此問題

面朝屏幕的文字

;label=Development

特點：

始終朝向屏幕

注意創建的是集群對象 Cesium.LabelCollection()

Label對象只能用在LabelCollection當中

;label=Development

cesium如何改變地圖gamma某一塊區域的透明度

場景色調透明度設置。

fxaa確實能夠改善文本和圖片的清晰度，API文檔上fxaa屬性的介紹：Whentrue，enablesFastApproximateAnti-aliasingevenwhenorderindependenttranslucencyisunsupported。即開啟fxaa能夠啟用圖片抗鋸齒的功能，但是不知道為啥會導致圖片模糊，關掉之後會清晰很多。

直接用canvas繪製圖片或者文本圖形比直接調用Cesium接口繪製要清晰很多。

Cesium的擴展工具包-EarthSDK使用指南1

Cesium作為三維GIS和BIM應用的主力引擎，目前已經受到越來越多的開發者的青睞。這兩年筆者也一直做Cesium相關的開發工作，真切地感受到Cesium的強大，其豐富的API、豐富的示例為開發三維GIS/BIM應用提供了極大的便利。

為了進一步豐富Cesium的開發生態，我們把之前在Cesium基礎上開發的功能，以及大量的改良功能，封裝成若干個獨立的js包。這樣也避免開發者重複造輪子。對於大屏展示、C端替代等直接本地部署Cesium的應用場景，可以直接免費使用我們封裝的EarthSDK擴展包。

EarthSDK中主要包括XbsjEarth.js和XbsjCesium.js兩個js包。

XbsjCesium.js用來擴展Cesium所不具備的三維可視化功能，例如視頻融合、分析工具、模型壓平等。

XbsjEarth.js則主要目標在於封裝出更加易於使用的API接口，儘可能屏蔽掉前端開發工程師所不熟悉的圖形學、GIS相關內容。會在Cesium的基礎上封裝好一些複雜的交互操作，並提供極其簡單的API接口方便調用。

EarthSDK從前端開發者的角度考慮設計API，大部分類的屬性都是響應式設計，通過簡單操作即可監控相應的屬性變化，通過bind方便可以實現屬性的相互綁定。特別針對Vue的開發者，實現了和vue的響應式屬性的無縫融合。具體可以參考這篇文章的介紹： 三維應用的響應式設計探索 。

之前使用過ECharts的同學可能對ECharts的操作簡單印象深刻。ECharts相當於把大量的API轉成配置式，真正使用時，只需要通過setOptions來進行一個大JSON對象的配置，即可完成圖表的創建。

EarthSDK的API設計也是受ECharts的啟發，會盡量減少不需要的API，減輕開發者的記憶負擔。只需要通過一個大JSON配置，就可以完成整個場景的搭建。

而且，EarthSDK比ECharts更進一步，可以直接修改相應的屬性，即可完成三維場景的動態變化。而ECharts則需要不停地調用setOption來進行配置。以後的文章中會詳細說明此特性。

EarthSDK創建場景後，內置viewer和scene對象，用戶可以通過viewer或者scene來向場景中添加Cesium的原生對象，和調用所有原生的Cesium API函數。

為了更易於理解EarthSDK的使用，我們開發了一個樣例程序 XbsjEarthUI(這個程序也同時集成到了CesiumLab中)。此樣例程序已經開源放在Github和Gitee上，基於MIT協議，用戶可以任意修改。

XbsjEarthUI在github上的地址：

XbsjEarthUI在gitee上的地址：

EarthSDK可以加載百度地圖、高德地圖等三十多種地圖數據，並可以做到實時糾偏。

交通安防領域需要用到的視頻監控、視頻融合功能。可以將視頻映射到傾斜攝影、BIM模型上（3dtiles模型），視頻會覆蓋到非平面物體上，不會出現閃爍等現象。

針對模型位置、姿態進行編輯。方便進行多個模型數據組合使用。並且這裡的模型位置編輯可以很方便的在全球任意位置拖放。

結合CesiumLab數據生產，使用EarthSDK調整數據後期亮度，可以做出較好的特效。方便進行大屏展示。

可以指定模型數據顯示在某一個視口，方便進行方案對比等操作。

Cesium的地面本身不能做到透明顯示，我們進行改進，使得透明度可以實時調節。

動態實現視域分析效果。

可以對路徑進行編輯，編輯好的路徑，可以用於控制相機的漫遊，也可以控制物體的移動。

對原始Cesium的標籤效果進行改進，並可以使用類似html5標籤增加onClick屬性，來自動執行自定義操作。