sdk4.0/src/Obj/Base/WaterSurface/index.js

/**
 * @description 水面
 */
import Dialog from '../../Element/Dialog';
import { html } from "./_element";
import EventBinding from '../../Element/Dialog/eventBinding';
import Base from "../index";
import { syncData } from '../../../Global/MultiViewportMode'
import { setSplitDirection, syncSplitData, setActiveId } from '../../../Global/SplitScreen'
import { setActiveViewer, closeRotateAround, closeViewFollow } from '../../../Global/global'

class WaterSurface extends Base {
  /**
   * @constructor
   * @param sdk 
   * @description 水面
   * @param options {object} 面属性
   * @param options.name=未命名对象 {string} 名称
   * @param options.positions {Array.<{lng:number, lat:number, alt:number}>} 坐标数组
   * @param options.color=rgba(32,67,135,0.5) {string} 颜色
   * @param options.frequency=100 {number} 频率
   * @param options.animationSpeed=0.02 {number} 动画速度
   * @param options.amplitude=10 {number} 振幅
   * @param Dialog {object} 弹框对象
   * @param Dialog.confirmCallBack {function} 弹框确认时的回调
   * */
  constructor(sdk, options = {}, _Dialog = {}) {
    super(sdk, options);
    this.options.name = options.name || '未命名对象'
    this.options.color = options.color || "rgba(32,67,135,0.5)"
    this.options.positions = options.positions || []
    this.options.frequency = options.frequency || 10
    this.options.animationSpeed = options.animationSpeed || 1
    this.options.amplitude = options.amplitude || 10
    this.options.show = (options.show || options.show === false) ? options.show : true
    this.Dialog = _Dialog
    this._EventBinding = new EventBinding()
    this._elms = {};
    this.sdk.addIncetance(this.options.id, this)
    WaterSurface.create(this)
  }

  // 创建水面
  static create(that) {
    let positions = that.options.positions
    let fromDegreesArray = []
    let height = positions[0].alt
    for (let i = 0; i < positions.length; i++) {
      fromDegreesArray.push(positions[i].lng, positions[i].lat)
      if (height < positions[i].alt) {
        height = positions[i].alt
      }
    }
    if (!that.options.height && that.options.height !== 0) {
      that.options.height = height
    }
    that.entity = that.sdk.viewer.scene.primitives.add(new Cesium.Primitive({
      id: that.options.id,
      show: that.options.show,
      // allowPicking: false,
      asynchronous: false,
      releaseGeometryInstances: false,
      geometryInstances: new Cesium.GeometryInstance({
        name: "water-surface",
        geometry: new Cesium.PolygonGeometry({
          polygonHierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(fromDegreesArray)),
          vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
          height: that.options.height,
          // extrudedHeight: 2200,
          // height: 0,
        }),
      }),
      appearance: new Cesium.EllipsoidSurfaceAppearance({
        aboveGroud: true,
        material: new Cesium.Material({
          fabric: {
            type: "Water",
            uniforms: {
              baseWaterColor: Cesium.Color.fromCssColorString(that.options.color),
              normalMap: that.getSourceRootPath() + '/img/water.png',
              //频率速度设置
              frequency: that.options.frequency * 10,
              animationSpeed: that.options.animationSpeed * 0.01,
              amplitude: that.options.amplitude,
            },
          },
        }),
      }),
    }));
    that.entity.id = that.options.id
    that.entity.originalHeight = that.options.height
    syncData(that.sdk, that.options.id)
    if (that.options.show) {

      setSplitDirection(0, that.options.id)
    }
  }

  get color() {
    return this.options.color
  }

  set color(v) {
    this.options.color = v
    this.entity && (this.entity.appearance.material.uniforms.baseWaterColor = Cesium.Color.fromCssColorString(v))
    if (this._elms.color) {
      this._elms.color.forEach((item, i) => {
        let picker = new YJColorPicker({
          el: item.el,
          size: 'mini',//颜色box类型
          alpha: true,//是否开启透明度
          defaultColor: v,
          disabled: false,//是否禁止打开颜色选择器
          openPickerAni: 'opacity',//打开颜色选择器动画
          sure: (c) => {
            this.color = c
          },//点击确认按钮事件回调
          clear: () => {
            this.color = 'rgba(255,255,255,1)'
          },//点击清空按钮事件回调
        })
        this._elms.color[i] = picker
      })
    }
  }

  get frequency() {
    return this.options.frequency
  }

  set frequency(v) {
    this.options.frequency = v
    this.entity && (this.entity.appearance.material.uniforms.frequency = v * 10)
    this._elms.frequency && this._elms.frequency.forEach((item) => {
      item.value = v
    })
  }

  get animationSpeed() {
    return this.options.animationSpeed
  }

  set animationSpeed(v) {
    this.options.animationSpeed = v
    this.entity && (this.entity.appearance.material.uniforms.animationSpeed = v * 0.01)
    this._elms.animationSpeed && this._elms.animationSpeed.forEach((item) => {
      item.value = v
    })
  }

  get amplitude() {
    return this.options.amplitude
  }

  set amplitude(v) {
    this.options.amplitude = v
    this.entity && (this.entity.appearance.material.uniforms.amplitude = v)
    this._elms.amplitude && this._elms.amplitude.forEach((item) => {
      item.value = v
    })
  }

  get height() {
    return this.options.height
  }

  set height(v) {
    this.options.height = v
    let positions = this.options.positions[0]
    let a = Cesium.Cartesian3.fromDegrees(positions.lng, positions.lat, v)
    let b = Cesium.Cartesian3.fromDegrees(positions.lng, positions.lat, this.entity.originalHeight)
    this.entity.modelMatrix = Cesium.Matrix4.setTranslation(this.entity.modelMatrix, new Cesium.Cartesian3(a.x - b.x, a.y - b.y, a.z - b.z), new Cesium.Matrix4())
    this._elms.height && this._elms.height.forEach((item) => {
      item.value = v
    })
  }

  /**
   * @description 编辑框
   * @param state=false {boolean} 状态: true打开, false关闭
   */
  async edit(state = false) {
    let _this = this
    this.originalOptions = this.deepCopyObj(this.options)

    // let elms = this.sdk.viewer._container.getElementsByClassName('YJ-custom-base-dialog')
    // for (let i = elms.length - 1; i >= 0; i--) {
    //   this.sdk.viewer._container.removeChild(elms[i])
    // }

    if (this._DialogObject && this._DialogObject.close) {
      this._DialogObject.close()
      this._DialogObject = null
    }

    if (state) {
      this._DialogObject = await new Dialog(this.sdk, this.originalOptions, {
        title: '水面属性', left: '180px', top: '100px',
        confirmCallBack: (options) => {
          this.name = this.name.trim()
          if (!this.name) {
            this.name = '未命名对象'
          }
          this.originalOptions = this.deepCopyObj(this.options)
          this._DialogObject.close()
          this.Dialog.confirmCallBack && this.Dialog.confirmCallBack(this.originalOptions)
          syncData(this.sdk, this.options.id)
          syncSplitData(this.sdk, this.options.id)
        },
        resetCallBack: () => {
          this.reset()
          this.Dialog.resetCallBack && this.Dialog.resetCallBack()
        },
        removeCallBack: () => {
          this.Dialog.removeCallBack && this.Dialog.removeCallBack()
        },
        closeCallBack: () => {
          this.reset()
          // this.entity.style = new Cesium.Cesium3DTileStyle({
          //   color: "color('rgba(255,255,255," + this.newData.transparency + ")')",
          //   show: true,
          // });
          this.Dialog.closeCallBack && this.Dialog.closeCallBack()
        },
        showCallBack: (show) => {
          this.show = show
          this.Dialog.showCallBack && this.Dialog.showCallBack()
        }
      }, true)
      this._DialogObject._element.body.className = this._DialogObject._element.body.className + ' water-surface'
      let contentElm = document.createElement('div');
      contentElm.innerHTML = html()
      this._DialogObject.contentAppChild(contentElm)
      // 颜色组件
      let waterColorPicker = new YJColorPicker({
        el: contentElm.getElementsByClassName("water-color")[0],
        size: 'mini',//颜色box类型
        alpha: true,//是否开启透明度
        defaultColor: this.color,
        disabled: false,//是否禁止打开颜色选择器
        openPickerAni: 'opacity',//打开颜色选择器动画
        sure: (color) => {
          this.color = color
        },//点击确认按钮事件回调
        clear: () => {
          this.color = 'rgba(255,255,255,1)'
        },//点击清空按钮事件回调
      })

      let all_elm = contentElm.getElementsByTagName("*")
      this._EventBinding.on(this, all_elm)
      this._elms = this._EventBinding.element
      this._elms.color = [waterColorPicker]
    } else {
      // if (this._element_style) {
      //   document.getElementsByTagName('head')[0].removeChild(this._element_style)
      //   this._element_style = null
      // }
      // if (this._DialogObject && this._DialogObject.remove) {
      //   this._DialogObject.remove()
      //   this._DialogObject = null
      // }
    }
  }

  reset() {
    if (!this.entity) {
      return
    }
    this.name = this.originalOptions.name
    this.color = this.originalOptions.color
    this.frequency = this.originalOptions.frequency
    this.animationSpeed = this.originalOptions.animationSpeed
    this.amplitude = this.originalOptions.amplitude
    this.height = this.originalOptions.height
  }

  /**
   * 飞到对应实体
   */
  async flyTo(options = {}) {
    setActiveViewer(0)
    closeRotateAround(this.sdk)
    closeViewFollow(this.sdk)

    if (this.options.customView && this.options.customView.relativePosition && this.options.customView.orientation) {
      let orientation = {
        heading: Cesium.Math.toRadians(this.options.customView.orientation.heading || 0.0),
        pitch: Cesium.Math.toRadians(this.options.customView.orientation.pitch || -60.0),
        roll: Cesium.Math.toRadians(this.options.customView.orientation.roll || 0.0)
      }

      let lng = this.options.customView.relativePosition.lng
      let lat = this.options.customView.relativePosition.lat
      let alt = this.options.customView.relativePosition.alt
      let destination = Cesium.Cartesian3.fromDegrees(lng, lat, alt)

      let position = { lng: 0, lat: 0 }
      if (this.options.position) {
        position = { ...this.options.position }
      }
      else if (this.options.positions) {
        position = { ...this.options.positions[0] }
      }
      else if (this.options.center) {
        position = { ...this.options.center }
      }
      else if (this.options.start) {
        position = { ...this.options.start }
      }
      else {
        if (this.options.hasOwnProperty('lng')) {
          position.lng = this.options.lng
        }
        if (this.options.hasOwnProperty('lat')) {
          position.lat = this.options.lat
        }
        if (this.options.hasOwnProperty('alt')) {
          position.alt = this.options.alt
        }
      }
      // 如果没有高度值，则获取紧贴高度计算
      if (!position.hasOwnProperty('alt')) {
        position.alt = await this.getClampToHeight(position)
      }
      lng = this.options.customView.relativePosition.lng + position.lng
      lat = this.options.customView.relativePosition.lat + position.lat
      alt = this.options.customView.relativePosition.alt + position.alt
      destination = Cesium.Cartesian3.fromDegrees(lng, lat, alt)
      this.sdk.viewer.camera.flyTo({
        destination: destination,
        orientation: orientation
      })
    }
    else {
      let rect = Cesium.Rectangle.fromCartesianArray(this.entity.geometryInstances.geometry._polygonHierarchy.positions)
      let positions = this.sdk.viewer.camera.getRectangleCameraCoordinates(rect)
      let positions84 = this.cartesian3Towgs84(positions, this.sdk.viewer)
      var cartesian3 = Cesium.Cartesian3.fromDegrees(positions84.lng, positions84.lat, positions84.alt + this.height)
      this.sdk.viewer.camera.flyTo({
        orientation: options.orientation || {
          heading: Cesium.Math.toRadians(0.0),
          pitch: Cesium.Math.toRadians(-90.0),
          roll: Cesium.Math.toRadians(0.0)
        },
        destination: cartesian3
      })
    }
  }

  /**
   * 删除
   */
  async remove() {
    this.sdk.viewer.scene.primitives.remove(this.entity)
    this.entity = null
    if (this._DialogObject && !this._DialogObject.isDestroy) {
      this._DialogObject.close()
      this._DialogObject = null
    }
    await this.sdk.removeIncetance(this.options.id)
    await syncData(this.sdk, this.options.id)
  }

  flicker() { }
}

export default WaterSurface