空间数据可视化
Cesium提供Entity API来绘制空间数据,例如点、标记、标签、线、3D模型、形状、立体形状(volume)。
Entity API简介
Cesium提供两类API:
- (1)面向图形开发人员的底层API,通常称为“Primitive API”。该API暴露最小限度的抽象,使用图形学术语,具有很大的灵活性,需要具有图形学编程的知识
- (2)高级别的数据驱动的API,称为“Entity API”。该API使用一致性设计的、高级别的对象来管理一组相关性的可视化对象,其底层使用Primitive API
下面是Entity API的简单例子,用红色半透明区域标记出美国怀俄明州:
var viewer = new Cesium.Viewer('cesiumContainer'); //创建一个查看器(Viewer widget)
var wyoming = viewer.entities.add({ //添加一个实体,仅需要传递一个简单JSON对象,返回值是一个Entity对象
name : 'Wyoming',
polygon : {
hierarchy : Cesium.Cartesian3.fromDegreesArray([//一组地理坐标
-109.080842,45.002073,
-105.91517,45.002073,
-104.058488,44.996596,
-104.053011,43.002989,
-104.053011,41.003906,
-105.728954,40.998429,
-107.919731,41.003906,
-109.04798,40.998429,
-111.047063,40.998429,
-111.047063,42.000709,
-111.047063,44.476286,
-111.05254,45.002073]),
material : Cesium.Color.RED.withAlpha(0.5), //材质
outline : true, //是否显示轮廓
outlineColor : Cesium.Color.BLACK //轮廓的颜色
}
});
viewer.zoomTo(wyoming);//缩放、平移视图使实体可见
形状与立体(Shapes and Volumes)
支持的形状与立体列表
(1) 立方体(Boxes):
var blueBox = viewer.entities.add({
name : 'Blue box',
//中心的位置
position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
box : {
//长宽高
dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
material : Cesium.Color.BLUE
}
});
var redBox = viewer.entities.add({
name : 'Red box with black outline',
position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
box : {
dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
material : Cesium.Color.RED,
outline : true, //显示轮廓
outlineColor : Cesium.Color.BLACK
}
});
var outlineOnly = viewer.entities.add({
name : 'Yellow box outline',
position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 300000.0),
box : {
dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
fill : false, //不显示填充
outline : true,
outlineColor : Cesium.Color.YELLOW
}
});
(2) 圆和椭圆 (Circles Ellipses)
var viewer = new Cesium.Viewer('cesiumContainer');
//浮空的绿色圆形
var greenCircle = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-111.0, 40.0, 150000.0),
name : 'Green circle at height',
ellipse : {
semiMinorAxis : 300000.0,
semiMajorAxis : 300000.0,
height: 200000.0, //浮空
material : Cesium.Color.GREEN
}
});
//红色椭圆形,位于地表,带轮廓
var redEllipse = viewer.entities.add({
//不带高度
position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
name : 'Red ellipse on surface with outline',
ellipse : {
semiMinorAxis : 250000.0,
semiMajorAxis : 400000.0,
material : Cesium.Color.RED.withAlpha(0.5),
outline : true,
outlineColor : Cesium.Color.RED
}
});
//蓝色椭圆柱,旋转了角度
var blueEllipse = viewer.entities.add({
positi