3.Entity和CZML添加图形

目录

Entity创建盒子

创建view容器

配置Entity

​编辑CZML数据添加图形

CZML是什么

 怎么加载CZML

---

Entity创建盒子

创建view容器

配置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);

效果如下： 

更多效果可以参考示例里面的这个分类，如果有帮助到您还请为我点个赞