gisthreemap/src/Cesium/SubClass/EntitysEffect.js

基于webGL的三维api

import Entitys from './Entitys'
/**
 * entitys 特效实体类
 * 管理实体模型
 * 创建
 * 销毁
 */
class EntitysEffect extends Entitys {

  constructor(viewer, dataSource) {
    super(viewer, dataSource)
  }

  generateRandomPosition(position, num) {
    let list = []
    for (let i = 0; i < num; i++) {
      // random产生的随机数范围是0-1，需要加上正负模拟
      let lon = position[0] + Math.random() * 0.04 * (i % 2 == 0 ? 1 : -1)
      let lat = position[1] + Math.random() * 0.04 * (i % 2 == 0 ? 1 : -1)
      list.push([lon, lat])
    }
    return list
  }
  /**
   * 道路发光穿梭线
   * @param {*} polyline 线坐标
   * @param {*} duration  动画间隔
   * @param {*} image  图片地址
   * @param {*} Additional  额外参数
   * @returns
   */
  createSpriteline(
    polyline,
    duration,
    image,
    Additional = {
      entityAdditional: {
        _name: '',
        show: true
      },
      // 默认二维管线
      polylineAdditional: {
        includeHeight: false,
        _name: '',
        width: 500,
      }
    }
  ) {
    const entity = this.createEntity()
    // 挂载额外参数
    for (let key in Additional.entityAdditional) {
      entity[key] = Additional.entityAdditional[key]
    }
    // 存在半径则为三维管线，不存在则为二维
    if (Additional.polylineAdditional.radius) {
      // 挂载三维线
      entity.polylineVolume = this.getPolylineVolume(polyline, Additional.polylineAdditional)
      // 道路穿梭线纹理
      entity.polylineVolume.material = new Cesium.Spriteline1MaterialProperty(duration, image)
    } else {
      // 挂载线
      entity.polyline = this.getPolyline(polyline, Additional.polylineAdditional)
      // 道路穿梭线纹理
      entity.polyline.material = new Cesium.Spriteline1MaterialProperty(duration, image)
    }

    entity.eid = Additional.entityAdditional.hasOwnProperty('eid') ? Additional.entityAdditional.eid : `polyline_${Math.random()}`
    // entity.id = Additional.entityAdditional.hasOwnProperty('eid') ? Additional.entityAdditional.eid : `polyline_${Math.random()}`
    let entityPolyline = this.add(entity)
    return entityPolyline
  }


  /**
   * 道路发光穿梭线
   * @param {*} polyline 线坐标
   * @param {*} duration  动画间隔
   * @param {*} image  图片地址
   * @param {*} Additional  额外参数
   * @returns
   */
  createTrailline(
    polyline,
    duration,
    image,
    color = Cesium.Color.RED,
    Additional = {
      entityAdditional: {
        _name: '',
        show: true
      },
      // 默认二维管线
      polylineAdditional: {
        includeHeight: false,
        _name: '',
        width: 500,
      }
    }
  ) {
    const entity = this.createEntity()
    // 挂载额外参数
    for (let key in Additional.entityAdditional) {
      entity[key] = Additional.entityAdditional[key]
    }
    // 存在半径则为三维管线，不存在则为二维
    if (Additional.polylineAdditional.radius) {
      // 挂载三维线
      entity.polylineVolume = this.getPolylineVolume(polyline, Additional.polylineAdditional)
      // 流动线纹理
      entity.polylineVolume.material = new Cesium.PolylineTrailLinkMaterialPropertyRoad1(image,
        color,
        duration)
    } else {
      // 挂载线
      entity.polyline = this.getPolyline(polyline, Additional.polylineAdditional)
      // 流动线纹理
      entity.polyline.material = new Cesium.PolylineTrailLinkMaterialPropertyRoad1(image,
        color,
        duration)
    }

    entity.eid = Additional.entityAdditional.hasOwnProperty('eid') ? Additional.entityAdditional.eid : `polyline_${Math.random()}`
    // entity.id = Additional.entityAdditional.hasOwnProperty('eid') ? Additional.entityAdditional.eid : `polyline_${Math.random()}`
    let entityPolyline = this.add(entity)
    return entityPolyline
  }

  createWallDiffuse(position, _num, eid, LineFlowMaterial = {
    color: new Cesium.Color(1.0, 1.0, 0.0, 0.8),
    speed: 15 * Math.random(),
    percent: 0.1,
    gradient: 0.01
  }) {
    let _positions = this.generateRandomPosition(_center, _num)
    _positions.forEach(item => {
      // 经纬度
      let start_lon = item[0]
      let start_lat = item[1]

      let startPoint = new Cesium.Cartesian3.fromDegrees(start_lon, start_lat, 0)

      // 随机高度
      let height = 5000 * Math.random()
      let endPoint = new Cesium.Cartesian3.fromDegrees(start_lon, start_lat, height)
      let linePositions = []
      linePositions.push(startPoint)
      linePositions.push(endPoint)
      this.add({
        id: eid || `lineFlow_${Math.random()}`,
        eid: eid || `lineFlow_${Math.random()}`,
        polyline: {
          positions: linePositions,
          material: new Cesium.LineFlowMaterialProperty(LineFlowMaterial)
        }
      })
    })
  }

  createSpriteline(
    polyline,
    duration,
    image,
    Additional = {
      entityAdditional: {
        _name: '',
        show: true
      },
      // 默认二维管线
      polylineAdditional: {
        includeHeight: false,
        _name: '',
        width: 500,
      }
    }
  ) {
    const entity = this.createEntity()
    // 挂载额外参数
    for (let key in Additional.entityAdditional) {
      entity[key] = Additional.entityAdditional[key]
    }
    // 存在半径则为三维管线，不存在则为二维
    if (Additional.polylineAdditional.radius) {
      // 挂载三维线
      entity.polylineVolume = this.getPolylineVolume(polyline, Additional.polylineAdditional)
      // 道路穿梭线纹理
      entity.polylineVolume.material = new Cesium.Spriteline1MaterialProperty(duration, image)
    } else {
      // 挂载线
      entity.polyline = this.getPolyline(polyline, Additional.polylineAdditional)
      // 道路穿梭线纹理
      entity.polyline.material = new Cesium.Spriteline1MaterialProperty(duration, image)
    }

    entity.eid = Additional.entityAdditional.hasOwnProperty('eid') ? Additional.entityAdditional.eid : `polyline_${Math.random()}`
    // entity.id = Additional.entityAdditional.hasOwnProperty('eid') ? Additional.entityAdditional.eid : `polyline_${Math.random()}`
    let entityPolyline = this.add(entity)
    return entityPolyline
  }



  /**
   *
   * @param {*} _center 起点
   * @param {*} _positions 终点坐标集合
   * @param {*} _num // 抛物线上的飞线数量
   * @param {*} height // 抛物线高度
   * @param {*} LineFlowMaterial // 飞线材质
   * @param {*} linecolor // 抛物线颜色
   */
  createparabolaFlow(_center, _positions = [
    [113.8236839, 22.528061],
    [114.0236839, 22.528061],
    [113.9236839, 22.428061],
    [113.9236839, 22.628061],
    [113.8236839, 22.428061],
    [114.0236839, 22.628061],
    [113.8236839, 22.628061],
    [114.0236839, 22.428061]
  ], _num, height = 5000, LineFlowMaterial = {
    color: Cesium.Color.fromCssColorString('rgba(11, 255, 244)'),
    speed: 15 * Math.random(),
    percent: 0.1,
    gradient: 0.01
  }, linecolor = 'rgba(11, 255, 244,0.2)') {
    debugger
    _positions.forEach(item => {
      let _siglePositions = this.parabola(_center, item, height)
      // 创建飞线
      for (let i = 0; i < _num; i++) {
        this.add({
          polyline: {
            positions: _siglePositions,
            material: new Cesium.LineFlowMaterialProperty(LineFlowMaterial)
          },
        });
      }
      // 创建轨迹线
      this.add({
        polyline: {
          positions: _siglePositions,
          material: Cesium.Color.fromCssColorString(linecolor),
        }
      })
    })
  }

  /**抛物飞线 */
  parabola(
    startPosition,
    endPosition,
    height = 0,
    count = 50
  ) {
    //方程 y=-(4h/L^2)*x^2+h h:顶点高度 L：横纵间距较大者
    let result = []
    height = Math.max(+height, 100)
    count = Math.max(+count, 50)
    let diffLon = Math.abs(startPosition[0] - endPosition[0])
    let diffLat = Math.abs(startPosition[1] - endPosition[1])
    let L = Math.max(diffLon, diffLat)
    let dlt = L / count
    if (diffLon > diffLat) {
      //base on lon
      let delLat = (endPosition[1] - startPosition[1]) / count
      if (startPosition[0] - endPosition[0] > 0) {
        dlt = -dlt
      }
      for (let i = 0; i < count; i++) {
        let h =
          height -
          (Math.pow(-0.5 * L + Math.abs(dlt) * i, 2) * 4 * height) /
          Math.pow(L, 2)
        let lon = startPosition[0] + dlt * i
        let lat = startPosition[1] + delLat * i
        let point = new Cesium.Cartesian3.fromDegrees(lon, lat, h);
        result.push(point);
      }
    } else {
      //base on lat
      let delLon = (endPosition[0] - startPosition[0]) / count
      if (startPosition[1] - endPosition[1] > 0) {
        dlt = -dlt
      }
      for (let i = 0; i < count; i++) {
        let h =
          height -
          (Math.pow(-0.5 * L + Math.abs(dlt) * i, 2) * 4 * height) /
          Math.pow(L, 2)
        let lon = startPosition[0] + delLon * i
        let lat = startPosition[1] + dlt * i
        let point = new Cesium.Cartesian3.fromDegrees(lon, lat, h);
        result.push(point);
      }
    }
    return result
  }

  createcircleDiffuse(center, eid, speed = 12, color = 'rgba(11, 255, 244.0.2)') {
    // 扩散圆特效
    this.add({
      position: Cesium.Cartesian3.fromDegrees(center[0], center[1]),
      eid: eid || `circleDiffuse_${Math.random()}`,
      id: eid || `circleDiffuse_${Math.random()}`,
      ellipse: {
        semiMinorAxis: 1000.0,
        semiMajorAxis: 1000.0,
        material: new Cesium.CircleDiffuseMaterialProperty({
          color: Cesium.Color.fromCssColorString(color),
          speed,
        })
      }
    })
  }
  // 发光线圈
  createdScanline(position, color, radius, duration, eid) {
    this.add({
      // id: _this.id,
      eid: eid || `Scanline_${Math.random()}`,
      id: eid || `Scanline_${Math.random()}`,
      position: Cesium.Cartesian3.fromDegrees(
        position[0],
        position[1],
        position[2]
      ),
      ellipse: {
        semiMinorAxis: new Cesium.CallbackProperty(function (n) {
          return radius
        }, false),
        semiMajorAxis: new Cesium.CallbackProperty(function (n) {
          return radius
        }, false),
        material: new Cesium.ScanlineMaterialProperty(
          new Cesium.Color.fromCssColorString(color),
          duration
        ),
        classificationType: Cesium.ClassificationType.BOTH,
      },
    })
  }

  /** 六角星 */
  createHexagonSpread(position, color, radius, duration, eid) {
    let currentRadius = 1
    this.add({
      //   id: _this.id,
      eid: eid || `HexagonSpread_${Math.random()}`,
      id: eid || `HexagonSpread_${Math.random()}`,
      position: Cesium.Cartesian3.fromDegrees(
        position[0],
        position[1],
        position[2]
      ),
      ellipse: {
        semiMajorAxis: new Cesium.CallbackProperty(function (n) {
          currentRadius += (1000 / duration) * 50
          if (currentRadius > radius) {
            currentRadius = 1
          }
          return currentRadius
        }, false),
        semiMinorAxis: new Cesium.CallbackProperty(function (n) {
          return currentRadius
        }, false),
        material: new Cesium.HexagonSpreadMaterialProperty(
          new Cesium.Color.fromCssColorString(color)
        ),
      },
    })
  }

  /**雷达平扫 */
  createRadarScan(position, color, outlineColor, radius, duration, eid) {
    // 雷达扫描
    this.add({
      position: Cesium.Cartesian3.fromDegrees(position[0], position[1]),
      eid: eid || `RadarScan_${Math.random()}`,
      id: eid || `RadarScan_${Math.random()}`,
      ellipse: {
        semiMinorAxis: new Cesium.CallbackProperty(function (n) {
          return radius
        }, false),
        semiMajorAxis: new Cesium.CallbackProperty(function (n) {
          return radius
        }, false),
        material: new Cesium.RadarScanMaterialProperty({
          color: new Cesium.Color.fromCssColorString(color),
          speed: duration,
        }),
        height: position[2],
        heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
        outline: true,
        outlineColor: new Cesium.Color.fromCssColorString(outlineColor)
      }
    })
  }

  /**
   *
   * @param {*} position 中心点
   * @param {*} color  颜色
   * @param {*} radii  椭球半径
   * @param {*} duration  速度
   */
  createellispoid(position, color, radii, duration, eid) {
    // 轨迹球体
    this.add({
      position: Cesium.Cartesian3.fromDegrees(position[0], position[1]),
      eid: eid || `Ellispoid_${Math.random()}`,
      id: eid || `Ellispoid_${Math.random()}`,
      ellipsoid: {
        radii: new Cesium.Cartesian3(radii[0], radii[1], radii[2]),
        material: new Cesium.EllipsoidTrailMaterialProperty({
          color: new Cesium.Color.fromCssColorString(color),
          speed: duration
        })
      }
    })
  }

  /**
   * 电弧球体
   * @param {*} position 中心点
   * @param {*} color  颜色
   * @param {*} radii  椭球半径
   * @param {*} duration  速度
   */
  createElectellispoid(position, color, radii, duration, eid) {
    // 轨迹球体
    this.add({
      position: Cesium.Cartesian3.fromDegrees(position[0], position[1]),
      eid: eid || `Ellispoid_${Math.random()}`,
      id: eid || `Ellispoid_${Math.random()}`,
      ellipsoid: {
        radii: new Cesium.Cartesian3(radii[0], radii[1], radii[2]),
        material: new Cesium.EllipsoidElectricMaterialProperty({
          color: new Cesium.Color.fromCssColorString(color),
          speed: duration
        })
      }
    })
  }
  //
  createWallDiffuse(positions,height,color,eid) {
    this.add({
      name: "立体墙效果",
      eid: eid || `Ellispoid_${Math.random()}`,
      wall: {
        positions: positions,
        // 设置高度
        maximumHeights: new Array(positions.length).fill(height),
        minimunHeights: new Array(positions.length).fill(0),
        // 扩散墙材质
        material: new Cesium.WallDiffuseMaterialProperty({
          color: new Cesium.Color.fromCssColorString(color)
        })
      }
    })

  }
}


export default EntitysEffect