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

冷不防 2023-03-03 06:22 1阅读 0赞

在平面GIS开发中，有时会装下逼，在地图上贴一张卫星云图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70]  
作为二维生物，没有高度的概念，卫星云图与下面的地图融为一体，没有高下之分。

但在三维GIS中，如果贴个卫星云图，还紧紧地贴在地面上，仿佛膏药似的，就体现不出立体的优势了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70 1]  
当然啦，云层应该就是离地面不到万米而已，贴上去，也看不出什么垂直高度。但为了看出效果，不妨夸张一点，让卫星云图漂浮在地球上面的太空，形成戴森球。这样才过瘾。楚帮场，丁炸桥，孔过瘾。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70 2]  
怎么弄呢？

思路是这样的：  
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的值居然是一长串咒语更是匪夷所思。

谨记。

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

--------------------

2020.08.07  
这样看效果更明显  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70]: /images/20230208/b6ba8415d48245a6b490fbd6e6934536.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70 1]: /images/20230208/cbc6dbea6e764fc39825a7b8ff63ff48.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70 2]: /images/20230208/6ece9f06dc49486bb0010c6a117e2f86.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70 3]: /images/20230208/debbd473830444b5ae8b3598c88a3395.png