Cesium学习笔记（10）

标签与广告牌

//广州塔
var position=Cesium.Cartesian3.fromDegress(113.264321, 23.129167, 700);

//添加一个点（Entity）
var point =viewer.entites.add({
    position:position,
    point:{
        color:Cesium.Color.RED,
        pixelSize:5,
        outlineWidth:2
    }
})

//添加标签和广告牌
var label=viewer.entities.add({
      position:Cesium.Cartesian3.fromDegrees(113.3191,23.109,700),
    label:{
      text:"广州塔",  //标签文本
      font:"24px sans-serif", //字体 大小和字体样式
      fillColor:Cesium.Color.WHITE, // 字体填充颜色
      outlineColor:Cesium.Color.BLACK, //字体轮廓颜色
      outlineWidth:4, //字体轮廓宽度（像素）
      style:Cesium.LabelStyle.FILL_AND_OUTLINE,   //字体显示样式  FILL（正常填充） OUTLINE（轮廓文字 内部为空）  FILL_AND_OUTLINE（有填充和轮廓）
      pixelOffset:new Cesium.Cartesian2(0,-24),  //文字偏移量
      horizontalOrigin:Cesium.HorizontalOrigin.CENTER,   //水平对齐方式（水平靠左）
      verticalOrigin:Cesium.VerticalOrigin.BOTTOM,  //垂直对齐方式（垂直靠下）
    }，
    billboard:{
      image:"./Assets/Images/gzt.png",
      width:50,
      height:50,
      verticalOrigin:Cesium.VerticalOrigin.TOP,  
      horizontalOrigin:Cesium.HorizontalOrigin.CENTER,
    }
  })

使用Entity添加几何体

Entity更专注于数据可视化，而Primitive更专注于图形底层的实现。

添加多边形

  const p = viewer.entities.add({
    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: 10000,
      //多边形的填充颜色
      material: Cesium.Color.RED.withAlpha(0.5),
      outline: true,
      //边框颜色
      outlineColor: Cesium.Color.BLACK,
      //这里宽度设置不起效果
      outlineWidth:20,
    },
  })

  viewer.zoomTo(p)

添加BOX

  const blueBox=viewer.entities.add({
    name: "Blue BOX",
    //   10000  指的是距离地球表面的高度
    position: Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 10000),
    box: {
      //维度  也就是box的长宽高
      dimensions: new Cesium.Cartesian3(100000.0, 100000.0, 5000.0),
      //填充颜色
      material: Cesium.Color.BLUE.withAlpha(0.5),
      //是否显示轮廓
      outline: true,
      //轮廓颜色
      outlineColor: Cesium.Color.RED,
    },
  })
  viewer.zoomTo(blueBox)

  const outlineOnly=viewer.entities.add({
    name: "Outline Only",
    position:Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 10000),
    box: {
      dimensions: new Cesium.Cartesian3(100000.0, 100000.0, 5000.0),
      //box的面填充是否显示   false  不显示
      fill:false,
      outline: true,
      outlineColor: Cesium.Color.RED,
    },
  })
  viewer.zoomTo(outlineOnly)

添加圆

const gC=viewer.entities.add({
  position:Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 10000),
  name:"GC",
  //椭圆
  ellipse:{
     //长半轴
    semiMinorAxis:30000,
    //短半轴    两个半轴相等时就是圆
    semiMajorAxis:30000,
    height:20000,
    material:Cesium.Color.GREEN,
    outline:true
  }
})
viewer.zoomTo(gC);

const ell=viewer.entities.add({
  position:Cesium.Cartesian3.fromDegrees(112.3191, 23.109, 10000),
  name:"GC",
  //椭圆
  ellipse:{
    semiMinorAxis:30000,
    semiMajorAxis:50000,
    height:20000,
    material:Cesium.Color.GREEN,
    //椭圆的拉伸面相对于椭球体表面的高度    相当于是椭圆体的高度
    extrudedHeight:20000,
    outline:true
  }
})

const ell1=viewer.entities.add({
  position:Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 10000),
  name:"GC",
  //椭圆
  ellipse:{
    semiMinorAxis:30000,
    semiMajorAxis:50000,
    height:20000,
    material:Cesium.Color.GREEN,
    //椭圆的拉伸面相对于椭球体表面的高度    相当于是椭圆体的高度
    extrudedHeight:20000,
    //逆时针旋转 45°  旋转轴为北
    rotation: Cesium.Math.toRadians(45),
    outline:true
  }
})
viewer.zoomTo(ell1);

添加走廊

const corrider=viewer.entities.add({
  name:"corrider",
  corridor:{
      //经纬度数组   三个位置对应图中的三个点
    positions:Cesium.Cartesian3.fromDegreesArray([
    -100.0, 40.0, -105.0, 40.0, -105.0, 35.0,
    ]),
    width:200000,
    material:Cesium.Color.RED,
  }

})
viewer.zoomTo(corrider);

const corrider=viewer.entities.add({
  name:"corrider",
  corridor:{
    positions:Cesium.Cartesian3.fromDegreesArray([
    -100.0, 40.0, -105.0, 40.0, -105.0, 35.0,
    ]),
    width:200000,
    //距离地球表面高度
    height:20000,
    //拐角类型   MITERED  尖角类型  ROUNDED  圆角类型  BEVELED  斜角类型 默认圆角类型
    cornerType:Cesium.CornerType.MITERED,
    material:Cesium.Color.RED,
  }

})
viewer.zoomTo(corrider);

const corrider=viewer.entities.add({
  name:"corrider",
  corridor:{
    positions:Cesium.Cartesian3.fromDegreesArray([
    -100.0, 40.0, -105.0, 40.0, -105.0, 35.0,
    ]),
    width:200000,
    //距离地球表面高度
    height:20000,
    //走廊体的高度
    extrudedHeight:100000,
    //拐角类型   MITERED  尖角类型  ROUNDED  圆角类型  BEVELED  斜角类型
    cornerType:Cesium.CornerType.BEVELED,
    material:Cesium.Color.RED,
  }

})
viewer.zoomTo(corrider);