cesium张贴卫星云图离地30万米形成戴森球效果

在平面GIS开发中，有时会装下逼，在地图上贴一张卫星云图

作为二维生物，没有高度的概念，卫星云图与下面的地图融为一体，没有高下之分。

但在三维GIS中，如果贴个卫星云图，还紧紧地贴在地面上，仿佛膏药似的，就体现不出立体的优势了。

当然啦，云层应该就是离地面不到万米而已，贴上去，也看不出什么垂直高度。但为了看出效果，不妨夸张一点，让卫星云图漂浮在地球上面的太空，形成戴森球。这样才过瘾。楚帮场，丁炸桥，孔过瘾。

怎么弄呢？

思路是这样的：
1、构造一个矩形图元（Cesium.Primitive），此图元范围就是卫星云图的四个角；离地30万米，怕未？
2、该图元的材质（Material）是卫星云图
3、将图元加到地图中

代码如下：

var rectangle = viewer.scene.primitives.add(
	new Cesium.Primitive({
		geometryInstances: new Cesium.GeometryInstance({
			geometry: new Cesium.RectangleGeometry({
			  rectangle: Cesium.Rectangle.fromDegrees(w,s,e,n),
			  //vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
			  height: 300000
			}),
		}),
		appearance: new Cesium.EllipsoidSurfaceAppearance({
			aboveGround: true,
		}),
	})
);			
rectangle.appearance.material = new Cesium.Material({
	fabric: {
	    type: "Image",
	    uniforms: {
			image: "./images/cloud.png",
			alpha:0.7 //透明度
	    },
	    components : {
		  diffuse : 'texture2D(image, fract(repeat * materialInput.st)).rgb',
		  alpha : 'texture2D(image, fract(repeat * materialInput.st)).a * alpha'//设置透明度不可或缺的一句
	    }      
	},
	translucent : true
});		
复制代码

原理并不复杂，代码也挺简单。主要是如何设置透明度这里，例子不好找。因为一般给出的例子，都只有一个属性：translucent，半透明，但出来的效果，就是卫星云图基本上不透明，没能透视出下面的地球。这个components是做啥用的，目前我还不清楚；设置透明度的时候，alpha的值居然是一长串咒语更是匪夷所思。

谨记。

参考文章：
sandcastle.cesium.com/?src=Materi…
https://github.com/CesiumGS/cesium/issues/2484

2020.08.07
这样看效果更明显