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

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

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

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

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

怎么弄呢&＃xff1f;

思路是这样的&＃xff1a;
1、构造一个矩形图元&＃xff08;Cesium.Primitive&＃xff09;&＃xff0c;此图元范围就是卫星云图的四个角&＃xff1b;离地30万米&＃xff0c;怕未&＃xff1f;
2、该图元的材质&＃xff08;Material&＃xff09;是卫星云图
3、将图元加到地图中

代码如下&＃xff1a;

var rectangle &＃61; 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 &＃61; new Cesium.Material({fabric: {type: "Image",uniforms: {image: "./images/cloud.png",alpha:0.7 //透明度},components : {diffuse : &＃39;texture2D(image, fract(repeat * materialInput.st)).rgb&＃39;,alpha : &＃39;texture2D(image, fract(repeat * materialInput.st)).a * alpha&＃39;//设置透明度不可或缺的一句} },translucent : true
});


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

谨记。

参考文章&＃xff1a;
https://sandcastle.cesium.com/?src&＃61;Materials.html
https://github.com/CesiumGS/cesium/issues/2484

2020.08.07
这样看效果更明显