标签：entities viewer var Cesium Color 使用 cesium new

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,
        ]),
        width: 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
        // ),
      },
    });

   

标签：entities,viewer,var,Cesium,Color,使用,cesium,new
来源： https://www.cnblogs.com/ly1368489670/p/14697103.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。