cesium添加填充_Cesium开发-添加实体-Go语言中文社区

在自己的项目中利用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, //是否显示点击要素之后显示的信息

});

在3D球型中添加实体

在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性能，所以在性能上还会更优化一些，所以建议在添加模型的时候，用添加实体的方式。