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性能，所以在性能上還會更優化一些，所以建議在添加模型的時候，用添加實體的方式。