学习 Cesium (四)：绘制基本图形

学习 Cesium (四)：绘制基本图形

方法一：通过 Entity 绘制图形

// 绘制一个红色黑边的盒子
var redBox = viewer.entities.add({
  name : 'Red box with black outline',
  position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0), // 定义经纬度及中心高度
  box : {
    dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0), // 长：400km 宽：300km 高：500km
    material : Cesium.Color.RED.withAlpha(0.5),// 透明度0.5
    outline : true,// 绘制边线
    outlineColor : Cesium.Color.BLACK // 边线颜色黑色
  }
});

viewer.zoomTo(viewer.entities); // 观察器拉近至实体对象

这种方法是通过代码的方式绘制图形。

方法二：通过 CZML 绘制图形

// 采用 CZML 绘制一个椭球体
var czml = [{
  "id" : "document",
  "name" : "box",
  "version" : "1.0"
  },
  {
  "id" : "shape2",
  "name" : "Cyan ellipsoid with black outline",
  "position" : {
    "cartographicDegrees" : [-100.0, 40.0, 300000.0]
  },
  "ellipsoid" : {
    "radii" : {
      "cartesian": [200000.0, 300000.0, 400000.0]
    },
    "material" : {
      "solidColor" : {
        "color" : {
          "rgba" : [0, 255, 255, 128]
        }
      }
    },
    "outline" : true,
    "outlineColor" : {
      "rgba" : [0, 0, 0, 255]
    }
  }
}];

// 载入椭球体 json 数据，并将观察器拉近至数据源
var dataSourcePromise = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSourcePromise);
viewer.zoomTo(dataSourcePromise);

这种方法先定义一个 json 格式的数据源，再载入数据源进行绘制。

参考文章

1. http://cesium.xin/wordpress/archives/102.html