在自己的项目中利用Cesiumjs在项目中添加3D或者2D的实体。
首先将压缩文件中的Build文件夹放到项目中去,像Apps文件夹下的HelloWorld.html中在一个网页中添加主要的四条语句,运行后如下图所示,则说明成功。
代码如下,在创建3D的球的同时设置界面的信息,其中的选项都是可选的。更加详细的配置信息,可以查官方API
var viewer = new Cesium.Viewer('cesiumContaine', {
animation : false, //是否显示动画控件(左下方那个)
baseLayerPicker : false, //是否显示图层选择控件
geocoder : true, //是否显示地名查找控件
timeline : false, //是否显示时间线控件
sceneModePicker : true, //是否显示投影方式控件
navigationHelpButton : false, //是否显示帮助信息控件
scene3DOnly : true,
infoBox : true, //是否显示点击要素之后显示的信息
});
在Cesium API中可以添加自带的立方体,圆和椭圆,走廊,圆柱和圆锥,多边形,多段线,多段线体,矩形,球和椭球,墙等基本的形状,也可以添加自己的3D模型,但必须为gltf格式的3D模型。
添加自带实体的代码:
//添加立方体
var Box = viewer.entities.add({
name : '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,
fill : false, //不显示填充
outline : true, //显示轮廓
outlineColor : Cesium.Color.BLACK
}
});
//添加圆
var greenCircle = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-111.0, 40.0, 150000.0),
name : 'circle',
ellipse : {
semiMinorAxis : 300000.0,
semiMajorAxis : 300000.0,
height: 200000.0, //浮空
material : Cesium.Color.GREEN
outline : true,
outlineColor : Cesium.Color.RED,
}
});
//添加椭圆
var blueEllipse = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-95.0, 40.0, 100000.0),
name : 'Blue translucent, rotated, and extruded ellipse',
ellipse : {
semiMinorAxis : 150000.0,
semiMajorAxis : 300000.0,
extrudedHeight : 200000.0, //拉伸
rotation : Cesium.Math.toRadians(45), //旋转
material : Cesium.Color.BLUE.withAlpha(0.7),
outline : true
}
});
//添加圆柱
var greenCylinder = viewer.entities.add({
name : 'Green cylinder with black outline',
position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 200000.0),
cylinder : { //圆柱
length : 400000.0,
topRadius : 200000.0,
bottomRadius : 200000.0,
material : Cesium.Color.GREEN,
outline : true,
outlineColor : Cesium.Color.DARK_GREEN
}
});
//添加圆锥
var redCone = viewer.entities.add({
name : 'Red cone',
position: Cesium.Cartesian3.fromDegrees(-105.0, 40.0, 200000.0),
cylinder : {//圆锥
length : 400000.0,
topRadius : 0.0,
bottomRadius : 200000.0,
material : Cesium.Color.RED
}
});
另外的实体不再一一类出,可以看https://blog.gmem.cc/cesium-study-note这篇文中,已经一一列出。
每个实体中的属性都是可选的,可以设置也可以不设置。其中:
1)fill :布尔型,用于指定目标形状是否被填充
2)outline:布尔型,用于指定是否绘制形状的边缘
3)material:如果fill设置为true,该属性可以控制填充的材料类型
一个例外是多段线,可以设置outlineWidth 、outlineColor、glowPower 等属性。
需要注意:Cesium总是使用米、弧度、秒为度量单位。
添加自己的3D模型,但是只能添加gltf的格式,代码如下
var viewer = new Cesium.Viewer('cesiumContainer');
var entity = viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706),
model : {
uri : '../../SampleData/models/CesiumGround/Cesium_Ground.gltf' //uri为3D模型在项目中的位置。也可以是个外链。
}
});
viewer.trackedEntity = entity;
这是以实体的形式添加进项目。也可以用另外一种的形式添加进形如 代码如下:
var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
Cesium.Cartesian3.fromDegrees(-75.62898254394531, 40.02804946899414, 0.0));
var model = scene.primitives.add(Cesium.Model.fromGltf({
url : '../Apps/SampleData/models/CesiumGround/Cesium_Ground.gltf',
modelMatrix : modelMatrix,
minimumPixelSize : 512,
maximumScale : 200000
}));
但是这样添加模的型没有自带的动画效果,还得再给模型添加动画效果
Cesium.when(model.readyPromise).then(function(model) {
model.activeAnimations.addAll({
//永久重复
loop : Cesium.ModelAnimationLoop.REPEAT
});
});
用实体方式创建因为在用GeometryInstance会进行一个分类处理,能够充分利用GPU性能,所以在性能上还会更优化一些,所以建议在添加模型的时候,用添加实体的方式。