Entity创建盒子

创建view容器

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Use correct character set. -->
  <meta charset="utf-8" />
  <!-- Tell IE to use the latest, best version. -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  <title>添加图形</title>
  <script src="../Build_1.100/Cesium/Cesium.js"></script>
  <style>
    @import url(../Build_1.100/Cesium/Widgets/widgets.css);

    html,
    body,
    #cesiumContainer {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div id="credit"></div>
  <div id="cesiumContainer"></div>
  <script type="text/javascript" src="../js/jq/1.9.1/jquery.js"></script>
  <script>
    //地球窗口配置
    let cesiumViewerConfig = {
      //位置查找工具
      geocoder: false,
      //视角返回初始位置
      homeButton: false,
      //模式选择 3D 2D 哥伦布视图
      sceneModePicker: false,
      //图层选择器，选择显示的图层和地形服务
      baseLayerPicker: false,
      //导航按钮
      navigationHelpButton: false,
      //动画空间，控制视图动画播放速度
      animation: false,
      // 版权显示
      creditContainer: "credit",
      //时间轴控件
      timeline: false,
      // 全屏按钮
      fullscreenButton: false,
      // vr模式按钮
      vrButton: false,
    }  
    var viewer = new Cesium.Viewer('cesiumContainer', cesiumViewerConfig);   
  </script>
</body>

</html>

配置Entity

    //Entity图形配置
    let entityConfig = {
      //此对象的唯一标识符。如果未提供，则会生成 GUID。
      id: "1",
      //向用户显示的人类可读名称。它不必是唯一的。
      name: "",
      //指定实体位置的属性
      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.withAlpha(0.5),
        //盒子边框线
        outline: false,
        //盒子边框线颜色
        outlineColor: Cesium.Color.BLACK
      }
    }
    var redBox = viewer.entities.add(entityConfig);
    //缩放到图形
    viewer.zoomTo(viewer.entities);

效果如下：

Entity一般用于加载模型

CZML数据添加图形

CZML是什么

        CZML是一种JSON数据格式，Cesium团队为了描述动态场景专门制定了CZML数据格式，这是一种JSON数据格式，不仅方便交互，而且具有时间属性，其既可以用于绘制各种几何图形，给定颜色、材质、透明度等也可以根据实际的场景需求，放入动态的模型数据，是的场景更加生动。除此以外还可以让CZML中的属性跟随时间变化，如：画面中的小车，给其定义了两个不同时间的位置，通过CZML得差值算法，画面上可以准确地显示车在两个时间点的运动过程。CZML的结构可以更加高效的传输数据，在显示场景之前，不需要加载整个场景数据，可随着时间变化不断加载数据到场景中。

        CZML还是一个开放的格式，支持在其基础上进一步扩展功能和特性。下面是一个最基础的CZML数据，它至少要包含两个对象，每一个对象都是一个CZML的数据包。

        其中第一个对象，是用于声明它是CZML格式，主要在其中填入一些固定的数值。id属性固定是document,name属性值可以根据加载的数据自己命名，version用于设定CZML版本号，暂时只有1.0版本。
        第二个对象存放的就是场景内的几何模型数据了，每一个几何模型对象都有唯一的id属性用于标识，如果id没有指定，cesium会自动生成一个，但是在后续开发中我们无法对其进行引用，如添加数据等，所以id我们要提前设定好，且在CZML中是唯一的。这里的name属性属于可选配置，可以自定义名称。position用于存放模型位置信息，它定义了一个caetographicDegrees对象，其中三个数据分别设定的是经纬度和高度。box用于指定我们绘制的几何体是盒状的，dimensions存放了尺寸信息，他的cartesuan对象设定了长宽高的数值，material则用于设置几何体的材质颜色。

怎么加载CZML

var czml = [
      {
        "id": "document",
        "name": "box",
        "version": "1.0"
      },
      {
        "id": "shape2",
        "name": "Red box with black outline",
        "position": {"cartographicDegrees": [-107.0, 40.0, 300000.0]},
        "box": {
          "dimensions":{"cartesian": [400000.0, 300000.0, 500000.0]},
          "material":{"solidColor":{"color":{"rgba": [255, 0, 0, 128]}}},
          "outline": true,
          "outlineColor":{"rgba": [0, 0, 0, 255]}
        }
      }];
    //1.通过Cesium.CzmlDataSource的load方法加载数据
    var dataSourcePromise = Cesium.CzmlDataSource.load(czml);
    //2.使用viewer.dataSources的add方法将加载好的数据添加到viewer的数据源中
    viewer.dataSources.add(dataSourcePromise);
    //3.缩放是视角到图形位置
    viewer.zoomTo(dataSourcePromise);

效果如下：