cesium初使用

cesium初使用

var viewer = new Cesium.Viewer('cesiumContainer');
//创建长方形
var wyoming = viewer.entities.add({
  name : 'Wyoming',
  polygon : {
    hierarchy : Cesium.Cartesian3.fromDegreesArray([
                              -109.080842,45.002073,
                              -105.91517,45.002073,
                              -104.058488,44.996596,
                              -104.053011,43.002989,
                              -104.053011,41.003906,
                              -105.728954,40.998429,
                              -107.919731,41.003906,
                              -109.04798,40.998429,
                              -111.047063,40.998429,
                              -111.047063,42.000709,
                              -111.047063,44.476286,
                              -111.05254,45.002073]),
    height : 0,
    material : Cesium.Color.RED.withAlpha(0.5),
    outline : true,
    outlineColor : Cesium.Color.BLACK
  }
});

viewer.zoomTo(wyoming);
//创建一个椭圆
var entity = viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
  ellipse : {
    semiMinorAxis : 250000.0,
    semiMajorAxis : 400000.0,
    material : Cesium.Color.BLUE.withAlpha(0.5)
  }
});

viewer.zoomTo(viewer.entities);
var ellipse = entity.ellipse;  
// ellipse.material = '//cesiumjs.org/tutorials/images/cats.jpg'；//显示图片
//网格显示
ellipse.material = new Cesium.CheckerboardMaterialProperty({
  evenColor : Cesium.Color.WHITE,
  oddColor : Cesium.Color.BLACK,
  repeat : new Cesium.Cartesian2(4, 4)
});
//条纹显示
ellipse.material = new Cesium.StripeMaterialProperty({
  evenColor : Cesium.Color.WHITE,
  oddColor : Cesium.Color.BLACK,
  repeat : 32
});
//网格显示
ellipse.material = new Cesium.GridMaterialProperty({
  color : Cesium.Color.YELLOW,
  cellAlpha : 0.2,
  lineCount : new Cesium.Cartesian2(8, 8),
  lineThickness : new Cesium.Cartesian2(2.0, 2.0)
});
//和 fill属性不太一样，outline没有对应的材质配置，而是用两个独立的属性outlineColor和outlineWidth。
//注意outlineWidth属性仅仅在非windows系统上有效，比如Android, iOS, Linux, 和OS X。

ellipse.fill = false;
ellipse.outline = true;
ellipse.outlineColor = Cesium.Color.YELLOW;
ellipse.outlineWidth = 2.0;

折线
折线是个特例，他没有填充或者边线属性。除了颜色它有专门的材质属性。由于这种特殊材质，折线宽度和折线的边线宽度，在所有系统都有效。
var viewer = new Cesium.Viewer('cesiumContainer');

var entity = viewer.entities.add({
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArray([-77, 35,
                                                        -77.1, 35]),
    width : 5,
    material : Cesium.Color.RED
}});
viewer.zoomTo(viewer.entities);
var polyline = entity.polyline // For upcoming examples
//折线边线
polyline.material = new Cesium.PolylineOutlineMaterialProperty({
    color : Cesium.Color.ORANGE,
    outlineWidth : 3,
    outlineColor : Cesium.Color.BLACK
});
//折线辉光
polyline.material = new Cesium.PolylineGlowMaterialProperty({
    glowPower : 0.2,
    color : Cesium.Color.BLUE
});

//创建立体高空显示得图像
var viewer = new Cesium.Viewer('cesiumContainer');
var wyoming = viewer.entities.add({
  name : 'Wyoming',
  polygon : {
    hierarchy : Cesium.Cartesian3.fromDegreesArray([
                              -109.080842,45.002073,
                              -105.91517,45.002073,
                              -104.058488,44.996596,
                              -104.053011,43.002989,
                              -104.053011,41.003906,
                              -105.728954,40.998429,
                              -107.919731,41.003906,
                              -109.04798,40.998429,
                              -111.047063,40.998429,
                              -111.047063,42.000709,
                              -111.047063,44.476286,
                              -111.05254,45.002073]),
    height : 0,
    material : Cesium.Color.RED.withAlpha(0.5),
    outline : true,
    outlineColor : Cesium.Color.BLACK
  }
});
viewer.zoomTo(wyoming);
//下面代码创建一个从200,000米到 250,000米的体 。也就是说这个体的高度是50000米。
wyoming.polygon.height = 200000;
wyoming.polygon.extrudedHeight = 250000;
var heading = Cesium.Math.toRadians(90);
var pitch = Cesium.Math.toRadians(-30);

viewer.zoomTo(wyoming, new Cesium.HeadingPitchRange(heading, pitch));
viewer.flyTo(wyoming).then(function(result){
    if (result) {
        viewer.selectedEntity = wyoming;
    }
});

wyoming.position = Cesium.Cartesian3.fromDegrees(-107.724, 42.68);
viewer.trackedEntity = wyoming;

viewer.entities.add({
    id : 'uniqueId'
});
var entity = viewer.entities.getById('uniqueId');


//创建一个点或者标注非常简单，只需要设置entity 的 position 属性，以及point 或者label 可视化对象。
//创建一个坐标点显示

var viewer = new Cesium.Viewer('cesiumContainer');

var citizensBankPark = viewer.entities.add({
    name : 'Citizens Bank Park',
    position : Cesium.Cartesian3.fromDegrees(-75.166493, 39.9060534),
    point : {
        pixelSize : 5,
        color : Cesium.Color.RED,
        outlineColor : Cesium.Color.WHITE,
        outlineWidth : 2
    },
    label : {
        text : 'Citizens Bank Park',
        font : '14pt monospace',
        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        outlineWidth : 2,
        verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
        pixelOffset : new Cesium.Cartesian2(0, -9)
    }
});

viewer.zoomTo(viewer.entities);


//获取实体
 
var getByIdBox = viewer.entities.getById('Box');
 
//删除添加的实体
 
错误方法：viewer.entities.remove(boxEntity);
 
正确方法：
 //方法一(针对性删除某一个)
 viewer.entities.remove(redBox);
        
 //方法二（通过id删除）
  viewer.entities.remove(getByIdBox);
 
 //方法三（删除所有实体）
 viewer.entities.removeAll();
 标签方式写法
下拉框
 <select data-bind="options: colorBlendModes, value: colorBlendMode"></select>
滑动框
 <input type="range" min="0.0" max="1.0" step="0.01" data-bind="value: alpha, valueUpdate: 'input'">

相机提供得函数转移视角
camera.lookAt（）绑定飞机视角
camera.lookAtTransform( 参数Cesium.Matrix4.IDENTITY) 解除飞机绑定视角
设置展示出来的数据和可选框或者是下拉，下拉滑动展示
var viewModel = {
  color: "Red",
  colors: ["White", "Red", "Green", "Blue", "Yellow", "Gray"],
  alpha: 1.0,
  colorBlendMode: "Highlight",
  colorBlendModes: ["Highlight", "Replace", "Mix"],
  colorBlendAmount: 0.5,
  colorBlendAmountEnabled: false,
  silhouetteColor: "Red",
  silhouetteColors: ["Red", "Green", "Blue", "Yellow", "Gray"],
  silhouetteAlpha: 1.0,
  silhouetteSize: 2.0,
};

Cesium.knockout.track(viewModel)绑定成响应式
var toolbar = document.getElementById（'toolbar绑定标签'）
Cesium.knockou.applyBindings（viewModel，toolbar） 进行数据绑定展示
3维窗口触发操作 当colorBlendMode变化时候把他的值改成最新的值
Cesium.knockout.getObservable(viewModel,'colorBlendMode‘）.subscribe(
    function(newValue){
        var colorBlendMode = getColorBlendMode(newValue);
        同过viewmode进行之后在这里面来改值
        model.colorBlendMode = colorBlendMode;
        viewModel.colorBlendAmountEnabled = (colorBlendMode === Cesium.ColorBlebd.MIX)
    }
)

var viewer = new Cesium.Viewer("cesiumContainer");
 var entity = viewer.entities.add({
      name: "box",
      position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
      box: {
        show: true,
        dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0), // Cartesian3类型，用于指定框的长度，宽度和高度
        // 指定距实体位置的高度是相对于什么的高度。 default: HeightReference.NONE
        // NONE 位置绝对；CLAMP_TO_GROUND    位置固定在地形上；RELATIVE_TO_GROUND 位置高度是指地形上方的高度。
        heightReference: Cesium.HeightReference.NONE,
        fill: true,
        // MaterialProperty|Color  default:Color.WHITE
        material: Cesium.Color.RED.withAlpha(0.5),
        outline: true,
        // type:Property|Color  default:Color.BLACK
        outlineColor: Cesium.Color.BLACK,
        outlineWidth: 1.0,

        // type:ShadowMode  default:ShadowMode.DISABLED
        // DISABLED 对象不投射或接收阴影；ENABLED  对象投射并接收阴影；CAST_ONLY 对象仅投射阴影；RECEIVE_ONLY 该对象仅接收阴影。
        shadows: Cesium.ShadowMode.DISABLED,
        // type:DistanceDisplayCondition
        // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
        //   1.0e3,
        //   2.0e3
        // ),
      },
    });

    var entity = viewer.entities.add({
      name: "corridor",
      corridor: {
        // show: true,
        // 指定定义走廊中心线的 Cartesian3 位置的数组  type: Cartesian3
        positions: Cesium.Cartesian3.fromDegreesArray([
          -80.0,
          40.0,
          -85.0,
          40.0,
          -84.0,
          35.0,
        ]),
         200000.0,
        height: 200000.0,
        heightReference: Cesium.HeightReference.NONE,
        extrudedHeight: 100000.0,
        extrudedHeightReference: Cesium.HeightReference.NONE,

        // 拐角的样式  type:CornerType  default:CornerType.ROUNDED
        // ROUNDED  角有光滑的边缘；MITERED 拐角点是相邻边的交点；BEVELED  角被修剪
        cornerType: Cesium.CornerType.ROUNDED,
        granularity: Cesium.Math.RADIANS_PER_DEGREE, // 每个纬度和经度之间的距离
        fill: true,
        // 材质  type:MaterialProperty|Color  default:Color.WHITE
        material: Cesium.Color.BLUE.withAlpha(0.5),
        outline: true, // height or extrudedHeight must be set for outlines to display
        outlineColor: Cesium.Color.WHITE,
        outlineWidth: 1.0,
        shadows: Cesium.ShadowMode.DISABLED,
        // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
        //   1.0e3,
        //   2.0e3
        // ),
        // 走廊在地面上时将对地形，3D tiles还是对两者进行分类  type:ClassificationType  default:ClassificationType.BOTH
        // TERRAIN 将仅对地形进行分类;CESIUM_3D_TILE 将仅对3D Tiles进行分类;BOTH    将同时对Terrain和3D Tiles进行分类。
        classificationType: Cesium.ClassificationType.BOTH,
      },
    });

 var entity = viewer.entities.add({
      name: "cylinder",
      position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 200000.0),
      cylinder: {
        // show: true,
        length: 400000.0, // 圆柱体长度
        topRadius: 200000.0, // 圆柱体顶部半径
        bottomRadius: 200000.0, // 圆柱体底部半径
        heightReference: Cesium.HeightReference.NONE,
        fill: true,
        material: Cesium.Color.GREEN.withAlpha(0.5),
        outline: true,
        outlineColor: Cesium.Color.DARK_GREEN,
        outlineWidth: 1.0,
        numberOfVerticalLines: 16, // 沿轮廓的周长绘制的垂直线的数量
        shadows: Cesium.ShadowMode.DISABLED,
        slices: 128, // 圆柱周围的边缘数量
        // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
        //   1.0e3,
        //   2.0e3
        // ),
      },
    });
var entity = viewer.entities.add({
      name: "Circles and Ellipses",
      position: Cesium.Cartesian3.fromDegrees(-9500, 40.0, 100000.0),
      ellipse: {
        show: true,
        semiMajorAxis: 300000.0, // 长半轴距离
        semiMinorAxis: 150000.0, // 短半轴距离

        height: 20000.0,
        heightReference: Cesium.HeightReference.NONE,
        extrudedHeight: 20000.0,
        extrudedHeightReference: Cesium.HeightReference.NONE,

        // rotation: Cesium.Math.toRadians(45), // 从北方逆时针旋转
        stRotation: 0.0, // 纹理从北方逆时针旋转
        granularity: Cesium.Math.RADIANS_PER_DEGREE, // 椭圆上各点之间的角距离
        material: Cesium.Color.BLUE.withAlpha(0.5),
        fill: true,
        outline: true,
        outlineColor: Cesium.Color.DARK_GREEN,
        outlineWidth: 1.0,
        numberOfVerticalLines: 16, // 沿轮廓的周长绘制的垂直线的数量
        shadows: Cesium.ShadowMode.DISABLED,
        // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
        //   1.0e3,
        //   2.0e3
        // ),

        // 在地面上时将对地形，3D tiles还是对两者进行分类  type:ClassificationType  default:ClassificationType.BOTH
        // TERRAIN 将仅对地形进行分类;CESIUM_3D_TILE 将仅对3D瓷砖进行分类;BOTH    将同时对Terrain和3D Tile进行分类。
        classificationType: Cesium.ClassificationType.BOTH,
      },
    });

  var entity = viewer.entities.add({
      name: "Spheres and Ellipsoids",
      position: Cesium.Cartesian3.fromDegrees(-90.0, 40.0, 300000.0),
      ellipsoid: {
        show: true,
        radii: new Cesium.Cartesian3(200000.0, 200000.0, 300000.0), // 椭球半径
        // innerRadii: new Cesium.Cartesian3(0.0, 0.0, 0.0), // 椭球内部半径
        minimumClock: 0.0, // 最小时钟角度
        maximumClock: 2 * Math.PI, // 最大时钟角度
        minimumCone: 0.0, // 最小圆锥角
        maximumCone: Math.PI, // 最大圆锥角
        heightReference: Cesium.HeightReference.NONE,
        fill: true,
        material: Cesium.Color.BLUE.withAlpha(0.5),
        outline: true,
        outlineColor: Cesium.Color.YELLOW,
        outlineWidth: 1.0,

        stackPartitions: 64, // 延纬度线切割的次数
        slicePartitions: 64, // 延经度线切割的次数
        subdivisions: 128, // 每个轮廓环的样本数，确定曲率的粒度

        shadows: Cesium.ShadowMode.DISABLED,
        // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
        //   1.0e3,
        //   2.0e3
        // ),
      },
    });