填充材料

  • 填充包括四种，分别是图片、棋盘、网格、条纹
    • 图片：直接从源文件中加载；
    • 棋盘、条纹：设置奇偶颜色分别是什么以及实体范围内有多少个棋盘或条纹，其中棋盘是一个二维数组，条纹是条纹的个数；
    • 网格：直接设置网格的数量（二维）以及网格边框颜色及网格颜色；
1
2
3
4
5
6
7
8
9
10
11

var viewer = new Cesium.Viewer('cesiumContainer');

var entity = viewer.entities.add({
	position : Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
	ellipse : {
		semiMinorAxis : 250000.0,
		semiMajorAxis : 400000.0,
		material : Cesium.Color.BLUE.withAlpha(0.5)
	}
});
1
var ellipse = entity.ellipse;
1
2
//填充图片
ellipse.material = './Source/14.jpg';
1
2
3
4
5
6
//填充棋盘
ellipse.material = new Cesium.CheckerboardMaterialProperty({
	evencolor : Cesium.Color.WHITE,
	oddcolor : Cesium.Color.BLACK,
	repeat : new Cesium.Cartesian2(4, 4)	//二维里面重复4*4
});
1
2
3
4
5
6
7
8
//填充条纹
ellipse.material = new Cesium.StripeMaterialProperty({
	evenColor : Cesium.Color.WHITE,
	oddColor : Cesium.color.BLACK,
	repeat : 32,	//一维里面重复32个
	//offset : 3,
	//orientation : VERTICAL
});	
1
2
3
4
5
6
7
//填充网格
ellipse.material = new Cesium.GridMaterialProperty({
	color : Cesium.Color.YELLOW,
	cellAlpha : 0.2,
	lineCount : new Cesium.Cartesian2(8, 8),
	lineThickness : new Cesium.Cartesian2(2.0, 2.0)
});
1
viewer.zoomTo(viewer.entities);

相机控制

  • 分为两种控制方式：zoomTo和flyTo

  • zoomTo(target, offset)

    • tartget为目标值，offset为heading、pitch、range
    • 异步设置摄像机以查看提供的一个或多个实体或数据源。如果数据源仍在加载过程中，或者可视化仍在加载中，则此方法在执行缩放之前等待数据准备就绪。
    • 偏移是在以边界球的中心为中心的局部**东-北-上参考系中的航向/俯仰/范围**。航向角和俯仰角是在局部的东北上参考系中定义的。航向是从y轴到x轴的角度。间距是从xy平面开始的旋转。正俯仰角在平面上方。负俯仰角在平面下方。范围是到中心的距离。如果范围为零，则将计算范围，以使整个边界球都可见。
    • 在2D模式下，必须有一个俯视图。相机将被放置在俯视目标上方。目标上方的高度将是范围。航向将根据偏移量确定。如果无法从偏移量确定航向，则航向将为北。

  • flyTo(target, option)

    • tartget为目标值，offset为duration、maximumHeight、offset

    • duration为飞行持续时间；

    • maximumHeight为飞行最大高度

    • offset同上

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
29
30
31
32
33
34
35
36
37
38
39
40
41
var viewer = new Cesium.Viewer('cesiumContainer');

//添加一个多边形
var wyoming = viewer.entities.add({
	name : 'Wyoming',
	polygon : {
	    hierarchy : Cesium.Cartesian3.fromDegreesArray([
			-109,45,
			-105,45,
			-104,44,
			-104,43,
			-104,41,
			-105,40,
			-107,41,
			-109,40,
			-111,40,
			-111,42,
			-111,44,
			-111,45    
		]),
		minimumPixelSize : 800,
        maximumScale : 1000,
		height : 0,
		material : Cesium.Color.RED.withAlpha(0.5),
		outline : true,
		outlineColor : Cesium.Color.BLACK
	}
});

var heading = Cesium.Math.toRadians(90);
var pitch = Cesium.Math.toRadians(-30);



viewer.zoomTo(wyoming, new Cesium.HeadingPitchRange(heading, pitch));

viewer.flyTo(wyoming).then(function(){
	if(result){
		viewer.selectedEntity = wyoming;
	}
});

Points，Billboards, and labels

  • Points就是一个点，按照添加实体点来设置参数即可；
  • Billboards是一个标签，先确定点之后，然后在该点的位置加载一个标签图片即可；
  • 在设置label的时候，text的相关参数类似于实体，位置可以是以点作为参考系；

兴趣点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//Points，Billboards, and labels
//Cesium中用于表示兴趣点

var viewer = new Cesium.Viewer('cesiumContainer');
var OlympicPark = viewer.entities.add({
	name : 'Beijing Olympic Park',
	position : Cesium.Cartesian3.fromDegrees(116.396, 39.993),
	point : {
		pixelSize : 5,
		color : Cesium.Color.RED,
		outlinColor : Cesium.Color.WHITE,
		outlineWidth : 2
	},
	label : {
		text : 'Beijing Olympic Park',
		font : '14pt monospace',
		style : Cesium.LabelStyle.FILL_AND_OUTLINE,
		outlineWidth : 2,
		verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
		pixelOffset : new Cesium.Cartesian2(0, -9)
	}
});

viewer.zoomTo(viewer.entities);

标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var OlympicPark = viewer.entities.add({
	//name : 'Beijing Olympic Park',
	position : Cesium.Cartesian3.fromDegrees(116.396, 39.993),
	billboard : {
		image : 'https://store-images.s-microsoft.com/image/apps.19467.14562462990742545.f75ad677-b304-4b69-b837-c12e4f56eb06.3c421dde-9529-47fb-85f3-5c3ffb33bf77?w=1399&h=787&q=90&format=jpg',
		width : 64, 
		height : 64
	},
	label : {
		//text : 'Beijing Olympic Park',
		font : '15pt monospace',
		style : Cesium.LabelStyle.FILL_AND_OUTLINE,
		outlineWidth : 1,
		verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
		pixelOffset : new Cesium.Cartesian2(0, 100)
	}
});