Cesium开发-添加实体

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

你可能感兴趣的:(3D)