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

发表于

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

在这里插入图片描述

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

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

在这里插入图片描述

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

在这里插入图片描述

怎么弄呢？

思路是这样的：

1、构造一个矩形图元（Cesium.Primitive），此图元范围就是卫星云图的四个角；离地30万米，怕未？

2、该图元的材质（Material）是卫星云图

3、将图元加到地图中

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
js复制代码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…

github.com/CesiumGS/ce…

2020.08.07

这样看效果更明显

在这里插入图片描述

本文转载自: 掘金

开发者博客 – 和开发相关的 这里全都有

0%