官方案例: sandcastle.cesium.com/?src=Globe%…
此功能需要的版本较高!
注:官方示例中提供的根据参数变动进行实时更新的方法与vue不同.使用vue根据参数进行实时更新时未实现.
透明:地图层透明.透明后可以看到地心处的颜色.可以根据需要对其进行更改. 透明度:设置地图层的透明度.1为不透明,0为全透明. 透明渐变:此时设置透明度不生效.该属性为true时,效果为:根据视野的远近透明度不同.随着视野更远,透明度更低.
init(){
//在init方法中,初始设置--相关参数方法可以在官网中查看.此处不进行赘述.
this._viewer.scene.globe.showGroundAtmosphere = false;//地球表面
this._viewer.scene.globe.translucency.enabled = false;
this._viewer.scene.globe.undergroundColor = new Cesium.Color(0, 0, 0, 0.5);
this._viewer.scene.globe.baseColor = new Cesium.Color(0, 0, 0, 0);
this._viewer.scene.globe.depthTestAgainstTerrain = true;//开启深度探测
this._viewer.scene.screenSpaceCameraController.enableCollisionDetection = false//相机能否入地
this._viewer.scene.globe.translucency.frontFaceAlphaByDistance = new Cesium.NearFarScalar(100.0, 0.0, 1000.0, 1.0)
this._viewer.scene.globe.translucency.frontFaceAlphaByDistance.farValue = 1.0 ;
//在init方法中,根据官方示例对参数设置进行追踪.
Cesium.knockout.track(this.info);//此处添加参数的配置对象
const toolbar = document.getElementById("toolbar");
Cesium.knockout.applyBindings(this.info, toolbar);
for (const name in this.info) {
if (this.info.hasOwnProperty(name)) {
this.name = name
Cesium.knockout.getObservable(this.info, name).subscribe(this.update);
}
}
},
//根据自定义的透明度及渐变更新
update(){
const Cesium = this.cesium
const viewer = this._viewer;
const scene = viewer.scene;
const globe = scene.globe;
globe.translucency.enabled = this.info.isTrancency;
let alpha = Number(this.info.alpha);
alpha = !isNaN(alpha) ? alpha : 1.0;
alpha = Cesium.Math.clamp(alpha, 0.0, 1.0);
globe.undergroundColor = this.info.isTrancency ? Cesium.Color.LIGHTSLATEGRAY : undefined;//设置地心处的颜色
this._viewer.scene.screenSpaceCameraController.enableCollisionDetection = this.info.isTrancency ? undefined : false ;//相机能否入地
this._viewer.scene.globe.undergroundColorAlphaByDistance = this.info.isTrancency ? new Cesium.NearFarScalar(1000.0,0.0,1000000.0,1.0) : undefined
globe.translucency.frontFaceAlphaByDistance.nearValue = alpha;
globe.translucency.frontFaceAlphaByDistance.farValue = this.info.isFaded
? 1.0
: alpha;
},
