vue3中cesium画点线面和实现面的闪动效果

面：

let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
let positions = [] // 用于存储点的位置数据数组
// 调用点击地图的方法
handler.setInputAction(function (movement) {
	let ray = viewer.camera.getPickRay(movement.position);
    let cartesian = viewer.scene.globe.pick(ray, viewer.scene);
    let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
    // 拿到经纬度
    let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度
    let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
    let alt = cartographic.height; // 高度

    positions.push(Cesium.Cartesian3.fromDegrees(lng, lat, alt))
    
    if (positions.length < 1) return;
    viewer.entities.add({
            name: "面",
            polygon: {
                hierarchy: positions,	// 点位置数组
                material: new Cesium.Color.fromCssColorString("#FFD700").withAlpha(.2),
                height:'3',//高度
                // 面颜色
            },
        });
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

线：

let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
let positions = [] // 用于存储点的位置数据数组
handler.setInputAction(function (movement) {
	let ray = viewer.camera.getPickRay(movement.position);
    let cartesian = viewer.scene.globe.pick(ray, viewer.scene);
    let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
    let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度
    let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
    let alt = cartographic.height; // 高度

    positions.push(Cesium.Cartesian3.fromDegrees(lng, lat, alt))
    
    if (positions.length < 1) return;
    viewer.entities.add({
	    name: "线",
        polyline: {
        	positions: positions,  // 点位置数组
            width: 5.0,				// 线宽度
            material: new Cesium.PolylineGlowMaterialProperty({
            	color: new Cesium.Color.fromCssColorString('#000'),
            }),						// 颜色
            depthFailMaterial: new Cesium.PolylineGlowMaterialProperty({
                color: new Cesium.Color.fromCssColorString('#ccc'),
            }),						// 被地形覆盖的虚线颜色
            clampToGround: true,	// 是否贴和地型

        }
   });
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

点：

let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (movement) {
	// 点击时获取经纬度
	let ray = viewer.camera.getPickRay(movement.position);
    let cartesian = viewer.scene.globe.pick(ray, viewer.scene);
    let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
    let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度
    let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
    let alt = cartographic.height; // 高度

    viewer.entities.add({
        name: "点",
        position: Cesium.Cartesian3.fromDegrees(lng, lat, alt), // 点生成的位置
        point: {
            color: Cesium.Color.DEEPSKYBLUE,	// 点颜色
            outlineColor: Cesium.Color.SKYBLUE,	// 点边框颜色
            pixelSize: 10,						// 点大小
            outlineWidth: 2,					// 点边框大小
            disableDepthTestDistance: Number.POSITIVE_INFINITY,		 // 受地形遮挡
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 生成在地形表面
        }
    });
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

实现面的一闪一闪的效果

// 
function ombre(num1: any, num2: any, num3: any) {
  let x = 1;
  let flog = true;
  return new Cesium.ColorMaterialProperty(
    new Cesium.CallbackProperty(function () {
      if (flog) {
        x = x - 0.005;
        if (x <= 0) {
          flog = false;
        }
      } else {
        x = x + 0.005;
        if (x >= 1) {
          flog = true;
        }
      }
      var color = new Cesium.Color(num1, num2, num3);
      return color.withAlpha(x);
    })
  );
}


   let entityActive = Globe.viewer.entities.add({
        polygon: {
          hierarchy: Cesium.Cartesian3.fromDegreesArray(result),
          material:ombre(1,1,0)
        }
})