cesium 点位事件 点位创建、点位销毁、点位闪烁、点位飞入

export default class point {
  constructor() {}
  /**
   * 根据数据源名称获取自定义数据源,如果不存在则创建
   * @param {string} sourceName 数据源名称
   */
  getCustomDataSourceByName(sourceName) {
    const sourceNameString = sourceName + '';
    let customDataSourceList = viewer.dataSources.getByName(sourceNameString);
    if (customDataSourceList.length > 0) {
      return customDataSourceList[0];
    }
    let customDataSource = new Cesium.CustomDataSource(sourceNameString);
    viewer.dataSources.add(customDataSource);
    return customDataSource;
  }
  /**
   * 根据数据源名称删除数据源
   * @param {string} sourceName 数据源名称
   * @param {Boolean} destroy 删除数据源外是否还要销毁数据源
   */
  deleteCustomDataSourceByName(sourceName, destroy = false) {
    const sourceNameString = sourceName + '';
    viewer.dataSources.remove(
      viewer.dataSources.getByName(sourceNameString)[0],
      destroy
    );
  }
  /**
   * @description: 数据源创点方法
   * @return {*}
   * @Date: 2023-08-10 17:35:31
   * @author: yang shao tang
   */
  dataSourcePoint(
    params = {
      position: [],
      image: null,
      id: null,
      customData: '',
      type: null,
      label: {
        text: '',
        color: 'WHITE',
        x: null,
        y: null,
      },
      textType,
      pointType: null,
    }
  ) {
    // console.log(params.label);
    params.label = params.label ? params.label : {};
    // const clock = new THREE.Clock()

    const position = params.position || [
      params.longitude,
      params.latitude,
      params.height || 0,
    ];
    // 初始化一个用于存储heightReference的变量
    let groundTd = '';
    // 如果params.position存在,则设置heightReference为NONE
    if (params.position) {
      groundTd = Cesium.HeightReference.NONE;
    } else {
      // 如果params.position不存在,则设置heightReference为CLAMP_TO_GROUND
      groundTd = Cesium.HeightReference.CLAMP_TO_GROUND;
    }

    let a = Cesium.Cartesian3.fromDegrees(...position);
    // 根据参数中的displayDistance来显示label
    if (!params.displayDistance) {
      params.displayDistance = 100000;
    }

    const entity = new Cesium.Entity({
      id: params.id,
      popupType: params.type,
      pointType: params.pointType || '', //鼠标划过提示
      customData: params.customData,
      position: a,
      textType: params.textType,
      billboard: {
        image: params.image,
        width: params.width || 38,
        height: params.height || 51,
        disableDepthTestDistance: Number.POSITIVE_INFINITY,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        heightReference: groundTd, // 设置label的heightReference属性为之前设置的heightReference变量
        // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
      },
      label: {
        text: params.label.text || '',
        disableDepthTestDistance: Number.POSITIVE_INFINITY,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        font: 'bold 16px 仿宋',
        fillColor: Cesium.Color.fromCssColorString(
          params.label.color || 'WITHE'
        ),
        pixelOffset: new Cesium.Cartesian2(
          params.label.x || 0,
          params.label.y || -80
        ),
        showBackground: params.label.showBackground || false,
        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
          0,
          params.displayDistance
        ),
        heightReference: groundTd, // 设置label的heightReference属性为之前设置的heightReference变量
        // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        backgroundColor: Cesium.Color.fromCssColorString('#000').withAlpha(0.5),
      },
    });

    // 点位闪烁判断
    entity.billboard.scale = new Cesium.CallbackProperty((time) => {
      if (window.currentFlashPointId == entity.id) {
        return 0.6 + Math.abs(Math.sin(time.secondsOfDay * 2) / 3); // 闪烁 1+0~0.5
      }

      return 1; // 不闪烁为1
    }, false);

    // 点位文字换行
    entity.label.text = new Cesium.CallbackProperty((result) => {
      let text = params.label.text;
      //文字长度处理
      if (text.length > 7) {
        let a = text.slice(0, 7);
        let b = text.slice(7);
        result = a + '\n' + b;
      } else {
        result = text;
      }
      return result;
    }, false);
    return entity;
  }

  /**
   * 创建Entity广告牌(点位)对象
   * @param {Object} params 点位对象数据
   * @returns Entity
   */
  createPoint(
    params = {
      position: [],
      image: null,
      id: null,
      customData: '',
      type: null,
      label: {
        text: '',
        color: 'WHITE',
        x: null,
        y: null,
      },
      width: null,
      height: null,
      pointType: null,
    }
  ) {
    // 可接受一个包含参数的对象params作为输入,根据参数创建点位并返回点位entity对象
    // 参数params的结构如上所示
    // 如果params.label不存在,则初始化为空对象
    params.label = params.label ? params.label : {};
    // const clock = new THREE.Clock()
    // 处理position参数
    const position = params.position || [
      params.longitude,
      params.latitude,
      params.height || 0,
    ];
    // 初始化一个用于存储heightReference的变量
    let groundTd = '';
    // 如果params.position存在,则设置heightReference为NONE
    if (params.position) {
      groundTd = Cesium.HeightReference.NONE;
    } else {
      // 如果params.position不存在,则设置heightReference为CLAMP_TO_GROUND
      groundTd = Cesium.HeightReference.CLAMP_TO_GROUND;
    }
    // 根据经纬度生成一个Cartesian3对象
    let a = Cesium.Cartesian3.fromDegrees(...position);
    // 如果params.displayDistance不存在,则设置为默认值5000
    if (!params.displayDistance) {
      params.displayDistance = 5000;
    }
    const entity = earth.czm.viewer.entities.add({
      id: params.id, // 设置entity的id
      popupType: params.type, // 设置entity的弹窗类型属性
      pointType: params.pointType || '', //鼠标划过提示
      customData: params.customData, // 设置entity的数据存储属性
      position: a, // 设置entity的position位置属性为之前生成的Cartesian3对象
      billboard: {
        image: params.image, // 设置billboard的图像
        width: params.width, // 设置billboard的宽度,默认为38
        height: params.height, // 设置billboard的高度,默认为51
        disableDepthTestDistance: Number.POSITIVE_INFINITY, // 设置billboard的disableDepthTestDistance属性为无穷大,即不进行深度测试
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 设置billboard的verticalOrigin属性为BOTTOM
        heightReference: groundTd, // 设置billboard的heightReference属性为之前设置的heightReference变量
        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
          0,
          params.displayDistance
        ), // 设置label的distanceDisplayCondition属性,控制在指定距离内显示label
      },
      label: {
        backgroundColor: Cesium.Color.fromCssColorString('#000').withAlpha(0.3),
        scale: 1,
        text: params.label.text || '', // 设置label的文本,默认为空字符串
        disableDepthTestDistance: Number.POSITIVE_INFINITY, // 设置label的disableDepthTestDistance属性为无穷大,即不进行深度测试
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        font: 'bold 16px 仿宋',
        fillColor: Cesium.Color.fromCssColorString(
          params.label.color || 'WITHE' // 设置label的填充颜色,默认为WHITE
        ),
        // outlineWidth: 100,
        // outlineColor: Cesium.Color.fromCssColorString('#e5af73'),
        // style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        pixelOffset: new Cesium.Cartesian2(
          params.label.x || 0,
          params.label.y || -80
        ), // 设置label的pixelOffset属性,控制label的位置偏
        showBackground: params.label.showBackground || false, // 设置label的showBackground属性,控制是否显示背景
        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
          0,
          params.displayDistance
        ), // 设置label的distanceDisplayCondition属性,控制在指定距离内显示label
        heightReference: groundTd, // 设置label的heightReference属性为之前设置的heightReference变量
      },
    });

    // 点位闪烁判断
    entity.billboard.scale = new Cesium.CallbackProperty((time) => {
      // 设置一个回调函数作为billboard的scale属性,实现点位闪烁效果
      if (window.currentFlashPointId == entity.id) {
        // 如果当前点位id等于window.currentFlashPointId,则进行闪烁效果
        return 0.6 + Math.abs(Math.sin(time.secondsOfDay * 2) / 3); // 闪烁 1+0~0.5 通过正弦函数控制缩放值的变化,实现闪烁效果
      }

      if (
        params.label.text.includes('昂欠') ||
        params.label.text.includes('驻寺干部')
      ) {
        return 0.6; // 不闪烁为1
      }
    }, false);
    // 点位文字换行
    entity.label.text = new Cesium.CallbackProperty((result) => {
      let text = params.label.text;
      if (text.length > 7) {
        let a = text.slice(0, 7);
        let b = text.slice(7);
        result = a + '\n' + b;
      } else {
        result = text;
      }
      return result;
    }, false);
    return entity;
  }
  /**
   * 删除点位
   * @param {*} id id
   * @returns TRUE | FALSE
   */
  removePointById(id) {
    return earth.czm.viewer.entities.removeById(id);
  }
  /**
   * @description: 修改点位图片
   * @return {*}
   */
  changePointImg(id, image) {
    let point = earth.czm.viewer.entities.getById(id);
    if (point) {
      point.billboard._image._value = image;
    }
  }
  /**
   * 点位闪烁
   * @param {*} id 点位id,或空(设置空为不闪烁)
   */
  pointFlash(id) {
    window.currentFlashPointId = id;
  }
  /*******
   * @description: 点位上图 并添加至数据源
   * @return {*}
   */
  getOnePoint(data, type) {
    // 获取当前是否存在数据源
    const dataSources = earth.czm.viewer.dataSources.getByName(type)[0];
    if (dataSources) {
      dataSources.entities.removeAll();
    }
    // 创建数据源
    let customDataSource =
      earth.czm.viewer.dataSources.getByName(type)[0] ||
      new Cesium.CustomDataSource(type);
    // 遍历创建点位
    data.forEach((item) => {
      // 将实体点位加入到数据源中
      customDataSource.entities.add(item);
    });
    if (!dataSources) {
      // 将数据源加入到场景中
      earth.czm.viewer.dataSources.add(customDataSource);
    }
  }
  /** *****
   * @description: earthSDK flyTo方法
   * @param {Array} position 位置
   * @param {Number} viewDistance 相机距目标多少米处停下
   * @param {Number} duration 飞行时间
   * @param {Array} rotation 飞入后的从什么角度观察目标
   * @return {*}
   */
  flyTo(
    position,
    viewDistance,
    duration,
    rotation = [2.2159897460256714, -17.04989276484489, 0.002547557326123572]
  ) {
    let RadiansPosition = [
      Cesium.Math.toRadians(position[0]),
      Cesium.Math.toRadians(position[1]),
      position[2],
    ];
    let RadiansRotation = rotation.map((e) => Cesium.Math.toRadians(e));
    earth.camera.flyTo(
      RadiansPosition,
      viewDistance,
      RadiansRotation,
      duration
    );
  }
  /** *****
   * @description: 修改点位坐标方法
   * @param {Number} id 位置
   * @param {Number} newPosition 点位新坐标
   * @return {*}
   */
  updatePoint(id, newPosition) {
    let point = earth.czm.viewer.entities.getById(id);
    point.position = Cesium.Cartesian3.fromDegrees(...newPosition);
  }
}

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值