Cesium Cesium3DTileset 随距离透明效果实现

Cesium3DTileset 随距离透明效果实现

在Cesium.Cesium3DTileset中没有找到关于随距离透明的相关函数 如translucencyByDistance

查看Api后发现能用Cesium3DTileStyle实现

代码

var helper = new Cesium.EventHelper();
//相机变化事件
helper.add(viewer.camera.changed, function (a) {
	     console.log(viewer.camera.positionCartographic.height)
	     //如果相机高度小于300 则取消倾斜摄影模型展示
        if (viewer.camera.positionCartographic.height < 300) {
          this._tileset.show=false
        }
        //如果相机高度大于300且小于1000 则设置透明度
        else if(viewer.camera.positionCartographic.height < 1000)
        {
        	//当前距离透明度计算  
          console.log("color('rgba(255,255,255,"+(1-(1000-viewer.camera.positionCartographic.height)/700)+")')")
          this._tileset.show=true
          let style= new Cesium.Cesium3DTileStyle({
            color: "color('rgba(255,255,255,"+(1-(1000-viewer.camera.positionCartographic.height)/700)+")')",
          });;
          // style.translucencyByDistance.evaluate(feature);
          this._tileset.style=style
        }
        //相机高度大于1000  还原设置
        else {
          this._tileset.show=true
          let style= new Cesium.Cesium3DTileStyle({
            color: "color('rgba(255,255,255,1)')",
          });;
          // style.translucencyByDistance  //此方法似乎只能作用于点
          this._tileset.style=style
}
      ,this)

在Vue中如果将大对象比如 viewer 放在Data ， 需要在变量名前加_, _viewer ，否则Vue会对变量进行数据劫持，会很卡