【可视化学习】38-cesium基础学习(三)
发表于：2023-09-06 |

前言

本文将继续讲解cesium的基础使用，主要内容为cesium中物体以及材质的使用

添加物体

初始化设置位置

1
2
3
4
5
6
7
8
9
10
11
12
// 广州塔的经纬度
var position2 = Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 2000);

  // flyto,让相机飞往某个地方
  viewer.camera.flyTo({
    destination: position2,
    orientation: {
      heading: Cesium.Math.toRadians(0),
      pitch: Cesium.Math.toRadians(-90),
      roll: 0,
    },
  });

使用cesium添加3d建筑

1
2
3
4
// 添加3D建筑
  const osmBuildings = viewer.scene.primitives.add(
    new Cesium.createOsmBuildings()
  );

效果图

添加一个点

1
2
3
4
5
6
7
8
9
10
11
12
// 创建一个点
  var point = viewer.entities.add({
    // 定位点
    position: Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 700),
    // 点
    point: {
      pixelSize: 10,
      color: Cesium.Color.RED,
      outlineColor: Cesium.Color.WHITE,
      outlineWidth: 4,
    },
  });

效果图

添加文字标签和广告牌

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var label = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 750),
    label: {
      text: "广州塔",
      font: "24px sans-serif",
      fillColor: Cesium.Color.WHITE,
      outlineColor: Cesium.Color.BLACK,
      outlineWidth: 4,
      // FILL填充文字，OUTLINE勾勒标签，FILL_AND_OUTLINE填充文字和勾勒标签
      style: Cesium.LabelStyle.FILL_AND_OUTLINE,
      // 设置文字的偏移量
      pixelOffset: new Cesium.Cartesian2(0, -24),
      // 设置文字的显示位置,LEFT /RIGHT /CENTER
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
      // 设置文字的显示位置
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    },
    billboard: {
      image: "./texture/gzt.png",
      width: 50,
      height: 50,
      // 设置广告牌的显示位置
      verticalOrigin: Cesium.VerticalOrigin.TOP,
      // 设置广告牌的显示位置
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
    },
  });

效果图

添加3d模型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 添加3D模型
  const airplane = viewer.entities.add({
    name: "Airplane",
    position: Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 1500),
    model: {
      uri: "./model/Air.glb",
      // 设置飞机的最小像素
      minimumPixelSize: 128,
      // 设置飞机的轮廓
      silhouetteSize: 5,
      // 设置轮廓的颜色
      silhouetteColor: Cesium.Color.WHITE,
      // 设置相机距离模型多远的距离显示
      distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000),
    },
  });

效果图

创建元素

使用entity创建矩形

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var rectangle = viewer.entities.add({
    rectangle: {
      coordinates: Cesium.Rectangle.fromDegrees(
        // 西边的经度
        90,
        // 南边维度
        20,
        // 东边经度
        110,
        // 北边维度
        30
      ),
      material: Cesium.Color.RED.withAlpha(0.5),
    },
  });

效果图

使用primivite创建矩形

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// primivite创建矩形
  // 01-创建几何体
  let rectGeometry = new Cesium.RectangleGeometry({
    rectangle: Cesium.Rectangle.fromDegrees(
      // 西边的经度
      115,
      // 南边维度
      20,
      // 东边经度
      135,
      // 北边维度
      30
    ),
    // 距离表面高度
    height: 0,
    vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
  });

  // 02-创建几何体实例
  let instance = new Cesium.GeometryInstance({
    geometry: rectGeometry,
    attributes: {
      color: Cesium.ColorGeometryInstanceAttribute.fromColor(
        Cesium.Color.RED.withAlpha(0.5)
      ),
    },
  });

  // 03-设置外观
  let appearance = new Cesium.PerInstanceColorAppearance({
    flat: true,
  });
  // 04-图元
  let primitive = new Cesium.Primitive({
    geometryInstances: instance,
    appearance: appearance,
  });
  // 05-添加到viewer
  viewer.scene.primitives.add(primitive);

  viewer.camera.setView(viewer.entities);

效果图

多个实体在一个primivite

可以创建多个图形，多个实例，然后统一放置在图元上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
// 使用entity创建矩形
 var rectangle = viewer.entities.add({
   rectangle: {
     coordinates: Cesium.Rectangle.fromDegrees(
       // 西边的经度
       90,
       // 南边维度
       20,
       // 东边经度
       110,
       // 北边维度
       30
     ),
     material: Cesium.Color.RED.withAlpha(0.5),
   },
 });

 // primivite创建矩形
 // 01-创建几何体
 let rectGeometry = new Cesium.RectangleGeometry({
   rectangle: Cesium.Rectangle.fromDegrees(
     // 西边的经度
     115,
     // 南边维度
     20,
     // 东边经度
     135,
     // 北边维度
     30
   ),
   // 距离表面高度
   height: 0,
   vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
 });

 // 02-创建几何体实例
 let instance = new Cesium.GeometryInstance({
   geometry: rectGeometry,
   attributes: {
     color: Cesium.ColorGeometryInstanceAttribute.fromColor(
       Cesium.Color.RED.withAlpha(0.5)
     ),
   },
 });

 let rectGeometry1 = new Cesium.RectangleGeometry({
   rectangle: Cesium.Rectangle.fromDegrees(
     // 西边的经度
     140,
     // 南边维度
     20,
     // 东边经度
     160,
     // 北边维度
     30
   ),
   // 距离表面高度
   height: 0,
   vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
 });

 let instance2 = new Cesium.GeometryInstance({
   geometry: rectGeometry1,
   attributes: {
     color: Cesium.ColorGeometryInstanceAttribute.fromColor(
       Cesium.Color.BLUE.withAlpha(0.5)
     ),
   },
 });

 // 03-设置外观
 let appearance = new Cesium.PerInstanceColorAppearance({
   flat: true,
 });
 // 04-图元
 let primitive = new Cesium.Primitive({
   geometryInstances: [instance, instance2],
   appearance: appearance,
 });
 // 05-添加到viewer
 viewer.scene.primitives.add(primitive);

 viewer.camera.setView(viewer.entities);

效果图

修改primivite颜色

给实例添加id

1
2
3
4
5
6
7
8
9
let instance2 = new Cesium.GeometryInstance({
    id: "blueRect",
    geometry: rectGeometry1,
    attributes: {
      color: Cesium.ColorGeometryInstanceAttribute.fromColor(
        Cesium.Color.BLUE.withAlpha(0.5)
      ),
    },
  });

根据id获取实例，动态修改颜色

1
2
3
4
5
6
7
8
9
10
// 动态修改图元颜色
setInterval(() => {
  let attributes = primitive.getGeometryInstanceAttributes("blueRect");
  attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue(
    // Cesium.Color.YELLOW.withAlpha(0.5)
    Cesium.Color.fromRandom({
      alpha: 0.5,
    })
  );
}, 2000);

与primitive物体交互

  • Cesium.ScreenSpaceEventType.LEFT_CLICK 鼠标左键事件
  • setInputAction 鼠标事件监听
  • viewer.scene.pick(movement.position); 根据位置获取物体
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    // 拾取
      var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
      handler.setInputAction(function (movement) {
        // console.log(movement);
        // scene.pick选中物体
        var pickedObject = viewer.scene.pick(movement.position);
        console.log(pickedObject);
        if (Cesium.defined(pickedObject) && typeof pickedObject.id == "string") {
          // console.log(pickedObject.id);
          let attributes = primitive.getGeometryInstanceAttributes(pickedObject.id);
          attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue(
            Cesium.Color.YELLOW.withAlpha(0.5)
          );
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

设置entity材质

设置材质

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var rectangle = viewer.entities.add({
   id: "entityRect",
   rectangle: {
     coordinates: Cesium.Rectangle.fromDegrees(
       // 西边的经度
       90,
       // 南边维度
       20,
       // 东边经度
       110,
       // 北边维度
       30
     ),
     // 设置entity材质，MaterialProperty
     material: material,
   },
 });

普通颜色

1
2
3
let material = new Cesium.ColorMaterialProperty(
    new Cesium.Color(1.0, 1.0, 0.0, 0.5)
);

效果图

棋盘纹理

1
2
3
4
5
let material = new Cesium.CheckerboardMaterialProperty({
  evenColor: Cesium.Color.RED,
  oddColor: Cesium.Color.YELLOW,
  repeat: new Cesium.Cartesian2(2, 2),
});

效果图

条纹纹理

1
2
3
4
5
let material = new Cesium.StripeMaterialProperty({
  evenColor: Cesium.Color.WHITE,
  oddColor: Cesium.Color.BLACK,
  repeat: 8,
});

效果图

网格纹理

1
2
3
4
5
6
let material = new Cesium.GridMaterialProperty({
  color: Cesium.Color.YELLOW,
  cellAlpha: 0.2,
  lineCount: new Cesium.Cartesian2(4, 4),
  lineThickness: new Cesium.Cartesian2(4.0, 4.0),
});

效果图

设置entity折线材质

1
2
3
4
5
6
7
const redLine = viewer.entities.add({
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35]),
      width: 20,
      material: material,
    },
  });

普通颜色

1
let material = Cesium.Color.RED;

效果图

虚线材质

1
2
3
4
5
// 设置虚线材质
  let material = new Cesium.PolylineDashMaterialProperty({
    dashLength: 30,
    color: Cesium.Color.RED,
  });

效果图

箭头材质

1
2
  // 设置箭头材质
let material = new Cesium.PolylineArrowMaterialProperty(Cesium.Color.RED);

效果图

发光飞线材质

1
2
3
4
5
6
7
8
// 设置发光飞线效果
 let material = new Cesium.PolylineGlowMaterialProperty({
   // 设置发光程度
   glowPower: 0.8,
   // 尾椎缩小程度
   taperPower: 0.7,
   color: Cesium.Color.RED,
 });

效果图

外观修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let material1 = new Cesium.Material.fromType("Color", {
    color: Cesium.Color.AQUA.withAlpha(0.5),
  });

  // 设定几何体都是与地球的椭球体平行
  //假定几何体与地球椭球体平行，就可以在计算大量顶点属性的时候节省内存
  // let appearance = new Cesium.EllipsoidSurfaceAppearance({
  //   material: material1,
  //   aboveGround: true,
  // });

  let appearance = new Cesium.MaterialAppearance({
    material: material1,
  });
  // 04-图元
  let primitive = new Cesium.Primitive({
    geometryInstances: [instance, instance2],
    appearance: appearance,
  });

效果图

primitive材质

grid

1
2
3
4
5
6
let material1 = new Cesium.Material.fromType("Grid", {
    color: Cesium.Color.AQUA.withAlpha(0.5),
    cellAlpha: 0.2,
    lineCount: new Cesium.Cartesian2(4, 4),
    lineThickness: new Cesium.Cartesian2(4.0, 4.0),
  });

效果图

water

1
2
3
4
5
let material1 = new Cesium.Material.fromType("Water", {
    baseWaterColor: Cesium.Color.AQUA.withAlpha(0.8),
    distortion: 0.25,
    normalMap: "./Assets/Textures/waterNormals.jpg",
  });

效果图

disffuseMap

1
2
3
let material1 = new Cesium.Material.fromType("DiffuseMap", {
  image: "./texture/logo.png",
});

效果图

image

1
2
3
4
let material1 = new Cesium.Material.fromType("Image", {
    image: "./texture/logo.png",
    repeat: new Cesium.Cartesian2(2.0, 2.0),
  });

效果图

编写自定义材质

czm_material czm_getMaterial这个在老版本可使用，新版本文档已经没有了这个属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 编写着色器修改材质
// https://cesium.com/downloads/cesiumjs/releases/b28/Documentation/
let material1 = new Cesium.Material({
  fabric: {
    uniforms: {
      uTime: 0,
    },
    source: `
      czm_material czm_getMaterial(czm_materialInput materialInput)
      {
        // 生成默认的基础材质
        czm_material material = czm_getDefaultMaterial(materialInput);
        // material.diffuse = vec3(materialInput.st+uTime, 0.0);
        float strength = mod((materialInput.s-uTime) * 10.0, 1.0);
        material.diffuse = vec3(strength, 0.0, 0.0);
        return material;
      }
    `,
  },
});

gsap.to(material1.uniforms, {
  uTime: 1,
  duration: 2,
  repeat: -1,
  ease: "linear",
});

效果图

自定义外观

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
let appearance = new Cesium.EllipsoidSurfaceAppearance({
    fragmentShaderSource: `
    varying vec3 v_positionMC;
    varying vec3 v_positionEC;
    varying vec2 v_st;
    uniform float uTime;

    void main()
    {
        czm_materialInput materialInput;

        gl_FragColor = vec4(v_st,uTime, 1.0);
    }
    `,
  });
  appearance.uniforms = {
    uTime: 0,
  };

  gsap.to(appearance.uniforms, {
    uTime: 1,
    duration: 2,
    repeat: -1,
    yoyo: true,
    ease: "linear",
  });

效果图

自定义materialProperty材质

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
class CustomMaterialPropery {
    constructor() {
      this.definitionChanged = new Cesium.Event();
      Cesium.Material._materialCache.addMaterial("CustomMaterial", {
        fabric: {
          type: "CustomMaterial",
          uniforms: {
            uTime: 0,
          },
          source: `
          czm_material czm_getMaterial(czm_materialInput materialInput)
          {
            // 生成默认的基础材质
            czm_material material = czm_getDefaultMaterial(materialInput);
            material.diffuse = vec3(materialInput.st, uTime);
            return material;
          }

          `,
        },
      });

      this.params = {
        uTime: 0,
      };
      gsap.to(this.params, {
        uTime: 1,
        duration: 2,
        repeat: -1,
        yoyo: true,
      });
    }
    getType() {
      // 返回材质类型
      return "CustomMaterial";
    }
    getValue(time, result) {
      // // console.log(result, time);
      // let t = performance.now() / 1000;
      // t = t % 1;
      // console.log(t);
      // result.uTime = t;
      result.uTime = this.params.uTime;
      // 返回材质值
      return result;
    }
  }

  let material = new CustomMaterialPropery();

  // console.log(material);

  var rectangle = viewer.entities.add({
    id: "entityRect",
    rectangle: {
      coordinates: Cesium.Rectangle.fromDegrees(
        // 西边的经度
        90,
        // 南边维度
        20,
        // 东边经度
        110,
        // 北边维度
        30
      ),
      // 设置entity材质，MaterialProperty
      // material: Cesium.Color.RED.withAlpha(0.5),
      material: material,
    },
  });

效果图

结语

本文就介绍到这里，更多内容，敬请期待

可视化学习 Cesium学习
上一篇:
【可视化学习】39-cesium基础学习(四)
下一篇:
【可视化学习】37-cesium基础学习(二)

    • blog of codesigner