Cesium学习笔记(12)

200 阅读2分钟

材质属性(materialProperty)

查看Entity中的rectangle的material属性,它属于MaterialProperty对象。MaterialProperty是抽象类,不能直接创建实例。它是表示表示材质的所有属性对象(比如颜色color)的接口。 image.png

颜色材质

MaterialProperty的子类ColorMaterialProperty表示颜色的材质属性

//创建一个红色颜色材质属性对象
let material=new Cesium.ColorMaterialProperty(new Cesium.Color(1,0,0,1));
let rec=viewer.entititity({
    rectangle:{
        coordinates:Cesium.Rectangle.fromDegrees(
            -90.0,
            39.0,
            -85,
            42
        ),
        material:material,
    }
})

image.png

图片材质

MaterialProperty的子类ImageMaterialProperty表示图片的材质属性

  rectangle.rectangle.material=new Cesium.ImageMaterialProperty({
    image: "src/assets/dog.png",
  });
  //也可以直接写url
  //rectangle.rectangle.material="src/assets/dog.png";

image.png

棋盘材质

MaterialProperty的子类CheckerboardMaterialProperty表示棋盘的材质属性

rectangle.rectangle.material=new Cesium.CheckerboardMaterialProperty({
    //第一个颜色
    evenColor:Cesium.Color.RED,
    //第二个颜色
    oddColor:Cesium.Color.BLUE,
    //重复次数  也就是4*4个瓦片
    repeat:new Cesium.Cartesian2(4,4),
  })

image.png

条纹材质

MaterialProperty的子类StripeMaterialProperty表示条纹的材质属性

rectangle.rectangle.material=new Cesium.StripeMaterialProperty({
    evenColor:Cesium.Color.RED,
    oddColor:Cesium.Color.BLUE,
    //条纹数量
    repeat:10,
  })

image.png image.png

格网材质

MaterialProperty的子类GridMaterialProperty表示条纹的材质属性

ectangle.rectangle.material=new Cesium.GridMaterialProperty({
    //网格颜色
    color:Cesium.Color.RED,
    //单元格的透明度
    cellAlpha:0.5,
    //网格线的数量  也就是多少条竖线(7-1) 多少横线(8-1)
    lineCount:new Cesium.Cartesian2(7,8),
    //网格线的宽度(单位像素)
    lineThickness:new Cesium.Cartesian2(6,2),
    //网格线沿着轴的偏移量(改变数字大小 好像没啥区别)
    lineOffset:new Cesium.Cartesian2(0,0),
  })

image.png

线材质属性

虚线材质

    let polylinematerial= new Cesium.PolylineDashMaterialProperty({
    //间隔颜色
    // gapColor:Cesium.Color.WHEAT,
    //线颜色
    color:Cesium.Color.RED,
    //线长
    dashLength:20,
    //虚线模式 ????
    // dashPattern:200,
  })
  let polyline = viewer.entities.add({
    polyline:{
      //多线段的折点的经纬度
      positions: Cesium.Cartesian3.fromDegreesArray([-75,35,-125,35]),
      width:10,
      material:polylinematerial,
    }
  })

image.png

箭头线材质

//箭头线材质
  polyline.polyline.material=new Cesium.PolylineArrowMaterialProperty(Cesium.Color.RED)
  //这个类只有一个参数  就是Color

image.png

发光飞线材质

  //发光飞线材质 (glow:发光)
  polyline.polyline.material=new Cesium.PolylineGlowMaterialProperty({
    //发光亮度
    glowPower:0.1,
    //线锥形效果  就是线的宽度会越来越小   类型有一个尾巴
    // 0.5表示  线锥形效果的占比(50%的线有锥形效果)
    taperPower:0.5,
    color:Cesium.Color.RED,
  })

image.png