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

/**
 * 文本框
 */
import Base from "../index";
import { setActiveViewer, closeRotateAround, closeViewFollow } from '../../../Global/global'
class TextBox extends Base {
  /**
   * @constructor
   * @param sdk
   * @description 文本框
   * @param options {object} 属性
   * @param options.id=id
   * @param options.position=[]位置
   * @param options.text=文本框内容
   * @param options.show=true {boolean}是否显示
   * @param callback=方法回调
   * @param Dialog {object} 弹框对象
   * @param Dialog.confirmCallBack {function} 弹框确认时的回调
   * */
  constructor(sdk, options = {}, callback = null) {
    // this.sdk = { ...sdk }
    // this.options = { ...options }
    super(sdk, options)
    this.options.position = options.position || []
    this.options.text = options.text || ''
    this.options.show = (options.show || options.show === false) ? options.show : true
    this.clickTextDom = undefined
    this.handler = undefined
    this.textDom = undefined
    this.create(this)
    this.sdk.addIncetance(this.options.id, this)
    this.callback = callback
  }

  async create(that) {
    let viewer = that.sdk.viewer
    // 创建div元素
    let dom = document.createElement('span');
    dom.id = that.options.id
    dom.className = 'popup-textarea'
    // 创建textarea元素
    var textarea = document.createElement('textarea');
    textarea.className = 'textarea'
    textarea.value = that.options.text;
    // 设置textarea的属性，例如行数和列数
    textarea.rows = 6;
    textarea.style.resize = 'none'
    // 将textarea添加到div中
    dom.appendChild(textarea);
    (!that.options.show) && (dom.style.display = 'none')
    // 将div添加到body中
    // document.body.appendChild(dom);

    // 配置CSS样式和内容结构
    viewer.cesiumWidget.container.appendChild(dom);
    let posi = Cesium.Cartesian3.fromDegrees(that.options.position.lng, that.options.position.lat, that.options.position.alt)

    that.handler = function () {
      const position = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
        viewer.scene, posi
      );
      if (position) {
        let width = dom.clientWidth * 1
        let height = dom.clientHeight * 1
        dom.style.left = `${position.x - width / 2}px`;
        dom.style.top = `${position.y - height}px`;
      }
    }
    viewer.scene.postRender.addEventListener(that.handler);
    that.textDom = dom;

  }
  async setHandeler(data) {
    let that = this
    const ray = this.sdk.viewer.camera.getPickRay(new Cesium.Cartesian2(data.x, data.y));
    var cartesian = this.sdk.viewer.scene.globe.pick(ray, this.sdk.viewer.scene);
    if (Cesium.defined(cartesian)) {
      that.sdk.viewer.scene.postRender.removeEventListener(that.handler);

      var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
      var longitude = Cesium.Math.toDegrees(cartographic.longitude);
      var latitude = Cesium.Math.toDegrees(cartographic.latitude);
      that.position = {
        lng: longitude,
        lat: latitude,
        alt: cartographic.height
      }
      let posi = Cesium.Cartesian3.fromDegrees(longitude, latitude, cartographic.height)

      that.handler = function () {
        const position = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
          that.sdk.viewer.scene, posi
        );
        if (position) {
          let width = that.textDom.clientWidth * 1
          let height = that.textDom.clientHeight * 1
          that.textDom.style.left = `${position.x - width / 2}px`;
          that.textDom.style.top = `${position.y - height}px`;
        }
      }
      that.sdk.viewer.scene.postRender.addEventListener(that.handler);
    }
  }
  async getwords(words) {
    this.options.text = words
    this.callback(this.options)
  }
  async returnFun() {
    return this.handler
  }
  get show() {
    return this.options.show
  }
  set show(v) {
    this.options.show = v
    this.textDom && (this.textDom.style.display = v ? 'block' : 'none');
  }
  get position() {
    return this.options.position
  }
  set position(v) {
    this.options.position = v
  }
  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.position) {
        position = { ...this.options.position[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 positionArray = []
      let a = Cesium.Cartesian3.fromDegrees(
        this.position.lng,
        this.position.lat,
        this.position.alt
      )
      positionArray.push(a.x, a.y, a.z)

      let BoundingSphere = Cesium.BoundingSphere.fromVertices(positionArray)
      this.viewer.camera.flyToBoundingSphere(BoundingSphere, {
        offset: {
          heading: Cesium.Math.toRadians(0.0),
          pitch: Cesium.Math.toRadians(-20.0),
          roll: Cesium.Math.toRadians(0.0)
        }
      })

    }
  }

  async remove() {
    if (this.handler) {
      this.sdk.viewer.scene.postRender.removeEventListener(this.handler);
      this.handler = undefined
    }
    if (this.textDom && this.textDom.parentNode) {
      this.sdk.viewer.cesiumWidget.container.removeChild(this.textDom);
    }
  }

  flicker() { }
}

export default TextBox