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

import Dialog from '../../Element/Dialog';
import cy_slider from "../../Element/cy_html_slider";
import { html } from "./_element";
import EventBinding from '../../Element/Dialog/eventBinding';
import Base from "../index";
import MouseEvent from '../../../Event/index'
import { legp } from '../../Element/datalist'
import { syncData } from '../../../Global/MultiViewportMode'
import { getGroundCover } from '../../../Global/global'
import MouseTip from '../../../MouseTip'
import { getFontList, getFontFamily, getFontFamilyName } from '../../Element/fontSelect'
import { setSplitDirection, syncSplitData, setActiveId } from '../../../Global/SplitScreen'
import { setActiveViewer, closeRotateAround, closeViewFollow } from '../../../Global/global'

class GroundImage extends Base {
  /**
   * @constructor
   * @param sdk 
   * @description 贴地图片
   * @param options {object} 属性
   * @param options.id {string} 唯一标识
   * @param options.show=true {boolean} 显示/隐藏
   * @param options.name {string} 名称
   * @param options.angle=0 {number} 旋转角度
   * @param options.scale=1 {number} 比例
   * @param options.flipe {object} 翻转
   * @param options.flipe.x=false {boolean} 绕X轴翻转
   * @param options.flipe.y=false {boolean} 绕Y轴翻转
   * @param options.url {string} 图片地址
   * @param {Array.<object>} options.position 经纬度和高度的列表，值交替 [{lon,lat,alt},...]
   * @param _Dialog {object} 弹框事件
   * @param _Dialog.confirmCallBack {function} 弹框确认时的回调
   * */
  constructor(sdk, options = {}, _Dialog = {}) {
    super(sdk, options);
    this.options.name = options.name || '未命名对象'
    this.options.show = (options.show || options.show === false) ? options.show : true
    this.options.url = options.url
    this.options.angle = options.angle || 0
    this.options.scale = (options.scale || options.scale === 0) ? options.scale : 1
    this.options.position = options.position
    this.options.offset = options.offset || { x: 0.5, y: 1 }
    this.options.mode = this.options.mode ? 1 : 0
    this.options.billboard = options.billboard || {}
    this.options.billboard.scale = this.options.billboard.scale || 1
    this.options.billboard.near = this.options.billboard.near || this.options.billboard.near === 0 ? this.options.billboard.near : 2000
    this.options.billboard.far = this.options.billboard.far || this.options.billboard.far === 0 ? this.options.billboard.far : 100000
    this.options.billboard.scaleByDistance = this.options.billboard.scaleByDistance ? true : false

    options.label = options.label || {}
    this.options.label = options.label || {}
    this.options.label.text = options.label.text || this.options.name
    this.options.name = this.options.label.text
    this.options.label.show =
      options.label.show || options.label.show === false
        ? options.label.show
        : true
    this.options.label.fontFamily = options.label.fontFamily || 0
    this.options.label.fontSize = options.label.fontSize || 39
    this.options.label.color = options.label.color || '#00ffff'

    this.options.flipe = options.flipe || {}
    this.options.flipe.x = this.options.flipe.x || false
    this.options.flipe.y = this.options.flipe.y || false
    this.options.heightMode =
      options.heightMode || options.heightMode == 0 ? options.heightMode : 3

    this.entity = {
      id: this.options.id
    }
    this._positionEditing = false
    this.Dialog = _Dialog
    this._elms = {};
    this._proj = this.sdk.proj
    this.previous = {
      position: { ...this.options.position }
    }
    this._EventBinding = new EventBinding()
    this.event = new MouseEvent(this.sdk)
    this.sdk.addIncetance(this.options.id, this)
    this.create()
  }

  get mode() {
    return this.options.mode
  }
  set mode(v) {
    this.options.mode = v ? 1 : 0
    let modeData = [
      {
        name: '贴地',
        value: '贴地',
        key: 0
      },
      {
        name: '立体',
        value: '立体',
        key: 1
      }
    ]
    for (let i = 0; i < modeData.length; i++) {
      if (modeData[i].key === this.options.mode) {
        this._elms.mode && this._elms.mode.forEach((item) => {
          item.value = modeData[i].value
        })
        break
      }
    }
    let elms = this._DialogObject._element.body.getElementsByClassName('row')
    let elms2 = this._DialogObject._element.foot.getElementsByTagName('button')
    let elms3 = this._DialogObject._element.foot.getElementsByTagName('h4')
    for (let i = 0; i < elms.length; i++) {
      let mode = elms[i].getAttribute('mode')
      if (mode !== null) {
        if (mode == this.options.mode) {
          elms[i].style.display = 'flex'
        }
        else {
          elms[i].style.display = 'none'
        }
      }
    }
    for (let i = 0; i < elms2.length; i++) {
      let mode = elms2[i].getAttribute('mode')
      if (mode !== null) {
        if (mode == this.options.mode) {
          elms2[i].style.display = 'block'
        }
        else {
          elms2[i].style.display = 'none'
        }
      }
    }
    for (let i = 0; i < elms3.length; i++) {
      let mode = elms3[i].getAttribute('mode')
      if (mode !== null) {
        if (mode == this.options.mode) {
          elms3[i].style.display = 'block'
        }
        else {
          elms3[i].style.display = 'none'
        }
      }
    }
    const img = new Image();
    img.crossOrigin = 'Anonymous';
    img.src = this.replaceHost(this.options.url, this.options.host);
    img.onload = () => {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');

      if (this.mode) {
        // canvas.width = img.width
        // canvas.height = img.height;
        // let billboardH = img.height * (128 / img.width)

        // if (this.flipeX) {
        //   ctx.scale(1, -1);
        //   ctx.translate(0, -canvas.height)
        // }
        // if (this.flipeY) {
        //   ctx.scale(-1, 1);
        //   ctx.translate(-canvas.width, 0);
        // }
        // ctx.drawImage(img, 0, 0, img.width, img.height)
        // this.entity.billboard.image = canvas
        // this.entity.billboard.pixelOffset = { x: -128 * this.billboardScale * (this.flipeY ? (1-this.options.offset.x) : this.options.offset.x), y: -billboardH * this.billboardScale * (this.flipeX ? (1-this.options.offset.y) : this.options.offset.y) }
        let canvas = this.entity.billboard.image.getValue()
        let billboardH = canvas.height * (128 / canvas.width)
        this.entity.billboard.pixelOffset = { x: -128 * this.billboardScale * this.options.offset.x, y: -billboardH * this.billboardScale * this.options.offset.y }
        this.entity.billboard.show = true
        this.labelShow && (this.entity.label.show = true)
        this.entity.rectangle.show = false
      }
      else {
        // 设置画布大小
        canvas.width = img.width * 2;
        canvas.height = img.height * 2;

        // 绘制图像
        if (this.flipeX) {
          ctx.scale(1, -1);
          ctx.translate(0, -canvas.height)
        }
        if (this.flipeY) {
          ctx.scale(-1, 1);
          ctx.translate(-canvas.width, 0);
        }
        ctx.drawImage(img, img.width - (img.width * this.options.offset.x), img.height - (img.height * this.options.offset.y));
        this.entity.rectangle.material = new Cesium.ImageMaterialProperty({
          image: canvas,
          transparent: true
        })
        this.entity.billboard.show = false
        this.entity.label.show = false
        this.entity.rectangle.show = true
      }
    }
  }

  get offset() {
    return this.options.offset
  }
  set offset(v) {
    this.options.offset = v
    const img = new Image();
    img.crossOrigin = 'Anonymous';
    img.src = this.replaceHost(this.options.url, this.options.host);
    img.onload = () => {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');

      if (this.mode) {
        // canvas.width = img.width
        // canvas.height = img.height;
        // let billboardH = img.height * (128 / img.width)

        // if (this.flipeX) {
        //   ctx.scale(1, -1);
        //   ctx.translate(0, -canvas.height)
        // }
        // if (this.flipeY) {
        //   ctx.scale(-1, 1);
        //   ctx.translate(-canvas.width, 0);
        // }
        // ctx.drawImage(img, 0, 0, img.width, img.height)
        // this.entity.billboard.image = canvas
        // this.entity.billboard.pixelOffset = { x: -128 * this.billboardScale * (this.flipeY ? (1-this.options.offset.x) : this.options.offset.x), y: -billboardH * this.billboardScale * (this.flipeX ? (1-this.options.offset.y) : this.options.offset.y) }
        let canvas = this.entity.billboard.image.getValue()
        let billboardH = canvas.height * (128 / canvas.width)
        this.entity.billboard.pixelOffset = { x: -128 * this.billboardScale * this.options.offset.x, y: -billboardH * this.billboardScale * this.options.offset.y }
        this.entity.billboard.show = true
        this.labelShow && (this.entity.label.show = true)
        this.entity.rectangle.show = false
      }
      else {
        // 设置画布大小
        canvas.width = img.width * 2;
        canvas.height = img.height * 2;

        // 绘制图像
        if (this.flipeX) {
          ctx.scale(1, -1);
          ctx.translate(0, -canvas.height)
        }
        if (this.flipeY) {
          ctx.scale(-1, 1);
          ctx.translate(-canvas.width, 0);
        }
        ctx.drawImage(img, img.width - (img.width * this.options.offset.x), img.height - (img.height * this.options.offset.y));
        this.entity.rectangle.material = new Cesium.ImageMaterialProperty({
          image: canvas,
          transparent: true
        })
        this.entity.billboard.show = false
        this.entity.label.show = false
        this.entity.rectangle.show = true
      }
    }
  }

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

  set angle(v) {
    this.options.angle = v
    this._elms.angle && this._elms.angle.forEach((item) => {
      item.value = v
    })
  }

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

  set scale(v) {
    this.options.scale = v
    this._elms.scale && this._elms.scale.forEach((item) => {
      item.value = v
    })
  }

  get billboardScale() {
    return this.options.billboard.scale
  }
  set billboardScale(v) {
    let billboardScale = Number(v.toFixed(2))
    if (billboardScale > 99) {
      billboardScale = 99
    }
    if (billboardScale < 0.1) {
      billboardScale = 0.1
    }
    this.options.billboard.scale = billboardScale
    this.renewPoint()
    this._elms.billboardScale &&
      this._elms.billboardScale.forEach(item => {
        item.value = v
      })
  }

  get billboardScaleByDistance() {
    return this.options.billboard.scaleByDistance
  }
  set billboardScaleByDistance(v) {
    this.options.billboard.scaleByDistance = v
    this.renewPoint()
    this._elms.billboardScaleByDistance &&
      this._elms.billboardScaleByDistance.forEach(item => {
        item.checked = v
      })
  }

  get billboardNear() {
    return this.options.billboard.near
  }
  set billboardNear(v) {
    let near = v
    if (near > this.billboardFar) {
      near = this.billboardFar
    }
    this.options.billboard.near = near
    this.renewPoint()
    this._elms.billboardNear &&
      this._elms.billboardNear.forEach(item => {
        item.value = near
      })
  }

  get billboardFar() {
    return this.options.billboard.far
  }
  set billboardFar(v) {
    let far = v
    if (far < this.billboardNear) {
      far = this.billboardNear
    }
    this.options.billboard.far = far
    this.renewPoint()
    this._elms.billboardFar &&
      this._elms.billboardFar.forEach(item => {
        item.value = far
      })
  }


  get flipeY() {
    return this.options.flipe.y
  }
  set flipeY(v) {
    if (typeof v === "boolean") {
      this.options.flipe.y = v
      if (!this.entity) {
        return
      }

      const img = new Image();
      img.crossOrigin = 'Anonymous';
      img.src = this.replaceHost(this.options.url, this.options.host);
      img.onload = () => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');

        if (this.mode) {
          // canvas.width = img.width
          // canvas.height = img.height;
          // let billboardH = img.height * (128 / img.width)
          // if (this.flipeX) {
          //   ctx.scale(1, -1);
          //   ctx.translate(0, -canvas.height)
          // }
          // if (this.flipeY) {
          //   ctx.scale(-1, 1);
          //   ctx.translate(-canvas.width, 0);
          // }
          // ctx.drawImage(img, 0, 0, img.width, img.height)
          // this.entity.billboard.image = canvas
          // this.entity.billboard.pixelOffset = { x: -128 * this.billboardScale * (this.flipeY ? (1-this.options.offset.x) : this.options.offset.x), y: -billboardH * this.billboardScale * (this.flipeX ? (1-this.options.offset.y) : this.options.offset.y) }
          // this.entity.billboard.show = true
          // this.entity.rectangle.show = false
        }
        else {
          // 设置画布大小
          canvas.width = img.width * 2;
          canvas.height = img.height * 2;

          // 绘制图像
          if (this.flipeX) {
            ctx.scale(1, -1);
            ctx.translate(0, -canvas.height)
          }
          if (this.flipeY) {
            ctx.scale(-1, 1);
            ctx.translate(-canvas.width, 0);
          }
          ctx.drawImage(img, img.width - (img.width * this.options.offset.x), img.height - (img.height * this.options.offset.y));
          this.entity.rectangle.material = new Cesium.ImageMaterialProperty({
            image: canvas,
            transparent: true
          })
          this.entity.billboard.show = false
          this.entity.label.show = false
          this.entity.rectangle.show = true
        }
      }
    } else {
      console.error("参数必须为boolean")
    }
  }
  get flipeX() {
    return this.options.flipe.x
  }
  set flipeX(v) {
    if (typeof v === "boolean") {
      this.options.flipe.x = v
      if (!this.entity) {
        return
      }

      const img = new Image();
      img.crossOrigin = 'Anonymous';
      img.src = this.replaceHost(this.options.url, this.options.host);
      img.onload = () => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');

        if (this.mode) {
          // canvas.width = img.width
          // canvas.height = img.height;
          // let billboardH = img.height * (128 / img.width)
          // if (this.flipeX) {
          //   ctx.scale(1, -1);
          //   ctx.translate(0, -canvas.height)
          // }
          // if (this.flipeY) {
          //   ctx.scale(-1, 1);
          //   ctx.translate(-canvas.width, 0);
          // }
          // ctx.drawImage(img, 0, 0, img.width, img.height)
          // this.entity.billboard.image = canvas
          // this.entity.billboard.pixelOffset = { x: -128 * this.billboardScale * (this.flipeY ? (1-this.options.offset.x) : this.options.offset.x), y: -billboardH * this.billboardScale * (this.flipeX ? (1-this.options.offset.y) : this.options.offset.y) }
          // this.entity.billboard.show = true
          // this.entity.rectangle.show = false
        }
        else {
          // 设置画布大小
          canvas.width = img.width * 2;
          canvas.height = img.height * 2;

          // 绘制图像
          if (this.flipeX) {
            ctx.scale(1, -1);
            ctx.translate(0, -canvas.height)
          }
          if (this.flipeY) {
            ctx.scale(-1, 1);
            ctx.translate(-canvas.width, 0);
          }
          ctx.drawImage(img, img.width - (img.width * this.options.offset.x), img.height - (img.height * this.options.offset.y));
          this.entity.rectangle.material = new Cesium.ImageMaterialProperty({
            image: canvas,
            transparent: true
          })
          this.entity.billboard.show = false
          this.entity.label.show = false
          this.entity.rectangle.show = true
        }

        // this.offset = {
        //   x: this.offset.x,
        //   y: Math.abs(this.offset.y - 1),
        // }
      }
    } else {
      console.error("参数必须为boolean")
    }
  }

  get heightMode() {
    return this.options.heightMode ? this.options.heightMode : 0
  }
  set heightMode(v) {
    this.options.heightMode = v ? v : 0
    this.options.heightMode = v || v == 0 ? v : 3
    let heightMode
    let heightModeName = ''
    let altBoxElm
    if (
      this._DialogObject &&
      this._DialogObject._element &&
      this._DialogObject._element.content
    ) {
      altBoxElm = this._DialogObject._element.content.getElementsByClassName(
        'alt-box'
      )[0]
    }
    let heightElm
    if (this._elms.height) {
      heightElm = this._elms.height.getElementsByClassName('input-number')[0]
    }
    switch (this.options.heightMode) {
      case '0':
      case 0:
        altBoxElm &&
          (altBoxElm.className = 'input-number input-number-unit-1 alt-box')
        // this._elms.height && (this._elms.height.style.display = 'flex')
        heightElm && (heightElm.className = 'input-number input-number-unit-1')
        heightMode = Cesium.HeightReference.NONE
        heightModeName = '海拔高度'
        break
      case '1':
      case 1:
        altBoxElm &&
          (altBoxElm.className = 'input-number input-number-unit-1 alt-box')
        // this._elms.height && (this._elms.height.style.display = 'flex')
        heightElm && (heightElm.className = 'input-number input-number-unit-1')
        heightMode = Cesium.HeightReference.NONE
        heightModeName = '相对地表'
        break
      case '2':
      case 2:
        altBoxElm &&
          (altBoxElm.className =
            'input-number input-number-unit-1 alt-box disabled')
        heightModeName = '依附地表'
        altBoxElm &&
          (altBoxElm.className =
            'input-number input-number-unit-1 alt-box disabled')
        heightModeName = '依附地表'
        heightMode = Cesium.HeightReference.CLAMP_TO_GROUND
        // this._elms.height && (this._elms.height.style.display = 'none')
        heightElm && (heightElm.className = 'input-number input-number-unit-1 disabled')
        break
      case '3':
      case 3:
        altBoxElm &&
          (altBoxElm.className =
            'input-number input-number-unit-1 alt-box disabled')
        // this._elms.height && (this._elms.height.style.display = 'none')
        heightElm && (heightElm.className = 'input-number input-number-unit-1 disabled')
        heightMode = Cesium.HeightReference.NONE
        heightModeName = '依附模型'
        break
    }
    if (this.entity && this.entity.billboard) {
      this.entity.billboard.heightReference = heightMode
    }
    this._elms.heightMode && (this._elms.heightMode.value = heightModeName)
  }

  get coordinate() {
    return this.options.coordinate
  }
  set coordinate(v) {
    this.options.coordinate = v
    // let position = this._proj.convert(
    //   [
    //     {
    //       x: this.options.position.lng,
    //       y: this.options.position.lat,
    //       z: this.options.position.alt
    //     }
    //   ],
    //   'EPSG:4326',
    //   v
    // ).points
    // if (
    //   this._DialogObject &&
    //   this._DialogObject._element &&
    //   this._DialogObject._element.content &&
    //   position[0]
    // ) {
    //   this._DialogObject._element.content.getElementsByClassName(
    //     'convert-x'
    //   )[0].value = position[0].x
    //   this._DialogObject._element.content.getElementsByClassName(
    //     'convert-y'
    //   )[0].value = position[0].y
    //   this._DialogObject._element.content.getElementsByClassName(
    //     'convert-z'
    //   )[0].value = position[0].z
    // }
    // this._elms.coordinate &&
    //   this._elms.coordinate.forEach(item => {
    //     item.value = v
    //   })
  }

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

  set position(v) {
    this.options.position = v

    this.coordinate = this.options.coordinate

    if (this._textToCenter) {
      let point = turf.point([this.options.position.lng, this.options.position.lat])
      let targetPoint = turf.destination(point, this._textToCenter.distance, this._textToCenter.angle, { units: 'kilometers' }).geometry.coordinates
      this.getClampToHeight({ lng: targetPoint[0], lat: targetPoint[1] }).then((height) => {
        let textPosition = [targetPoint[0], targetPoint[1], height]
        this.options.text.position = { lng: targetPoint[0], lat: targetPoint[1], alt: height }
        this.text && (this.text.position = textPosition)
      })
    }

    this._elms.lng &&
      this._elms.lng.forEach(item => {
        item.value = this.options.position.lng
      })
    this._elms.lat &&
      this._elms.lat.forEach(item => {
        item.value = this.options.position.lat
      })

    if (this._elms.height) {
      let heightElm = this._elms.height.getElementsByClassName('height')[0]
      if (heightElm) {
        switch (this._elms.heightMode.value) {
          case '海拔高度':
            heightElm.value = this.options.position.alt
            break
          case '相对地表':
            if (this.sdk.viewer.scene.terrainProvider.availability) {
              Cesium.sampleTerrainMostDetailed(
                this.sdk.viewer.scene.terrainProvider,
                [
                  Cesium.Cartographic.fromDegrees(
                    this.options.position.lng,
                    this.options.position.lat
                  )
                ]
              ).then(position => {
                heightElm.value = Number(
                  (this.options.position.alt - position[0].height).toFixed(2)
                )
                this._elms.alt &&
                  this._elms.alt.forEach(item => {
                    item.value = this.options.position.alt
                  })
              })
            } else {
              heightElm.value = Number(
                Number(this.options.position.alt).toFixed(2)
              )
              this._elms.alt &&
                this._elms.alt.forEach(item => {
                  item.value = this.options.position.alt
                })
            }
            break
          case '依附地表':
          case '依附地表':
            break
          case '依附模型':
            this.updateHeight()
            break
        }
      }
    }
  }

  get labelShow() {
    return this.options.label.show
  }
  set labelShow(v) {
    this.options.label.show = v
    if (this.entity) {
      if (this.mode == 1) {
        this.entity.label.show = v
      }
      else {
        this.entity.label.show = false
      }
    }

    this._elms.labelShow &&
      this._elms.labelShow.forEach(item => {
        item.value = v
      })
  }

  get labelFontFamily() {
    return this.options.label.fontFamily
  }

  set labelFontFamily(v) {
    this.options.label.fontFamily = v || 0
    this.renewPoint()

    let name = getFontFamilyName(this.labelFontFamily) || ''
    this._elms.labelFontFamily &&
      this._elms.labelFontFamily.forEach(item => {
        item.value = name
      })
  }

  get labelFontSize() {
    return this.options.label.fontSize
  }
  set labelFontSize(v) {
    this.options.label.fontSize = v
    this.renewPoint()
    this._elms.labelFontSize &&
      this._elms.labelFontSize.forEach(item => {
        item.value = v
      })
  }

  get labelColor() {
    return this.options.label.color
  }
  set labelColor(v) {
    this.options.label.color = v || '#00ffff'
    this.renewPoint()
    if (this._elms.labelColor) {
      this._elms.labelColor.forEach((item, i) => {
        let colorPicker = new YJColorPicker({
          el: item.el,
          size: 'mini', //颜色box类型
          alpha: true, //是否开启透明度
          defaultColor: this.options.label.color,
          disabled: false, //是否禁止打开颜色选择器
          openPickerAni: 'opacity', //打开颜色选择器动画
          sure: c => {
            this.labelColor = c
          }, //点击确认按钮事件回调
          clear: () => {
            this.labelColor = 'rgba(0,255,255,1)'
          } //点击清空按钮事件回调
        })
        this._elms.labelColor[i] = colorPicker
      })
    }
  }

  async create() {
    // let gap = Math.abs(Math.cos(Math.PI/180 * this.options.position.lat)) * (0.0001*this.options.scale)
    // let fromDegreesArray = [
    //   this.options.position.lng - 0.05, this.options.position.lat - 0.05,
    //   this.options.position.lng + 0.05, this.options.position.lat - 0.05,
    //   this.options.position.lng + 0.05, this.options.position.lat + 0.05,
    //   this.options.position.lng - 0.05, this.options.position.lat + 0.05,
    // ]
    let _this = this
    let heightMode
    let font = getFontFamily(this.labelFontFamily) || 'Helvetica'
    switch (this.options.heightMode) {
      case 2:
      case '2':
        heightMode = Cesium.HeightReference.CLAMP_TO_GROUND
        break
    }
    let response = await fetch(this.replaceHost(this.options.url, this.options.host), {
      method: 'get',
      headers: {
        'Content-Type': 'application/json',
      }
    })
    if (response.ok) {
      // let data = await response.blob()
      // let arrayBuffer = await data.arrayBuffer()
      // const str = String.fromCharCode(...new Uint8Array(arrayBuffer));
      const img = new Image();
      img.crossOrigin = 'Anonymous';
      img.src = this.replaceHost(this.options.url, this.options.host);
      img.onload = () => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        const canvas2 = document.createElement('canvas');
        const ctx2 = canvas2.getContext('2d');
        let width = img.width
        let height = img.height
        canvas2.width = width
        canvas2.height = height;
        ctx2.drawImage(img, 0, 0, width, height)

        // 设置画布大小
        canvas.width = img.width * 2;
        canvas.height = img.height * 2;
        // 绘制图像
        if (this.flipeX) {
          ctx.scale(1, -1);
          ctx.translate(0, -canvas.height)
        }
        if (this.flipeY) {
          ctx.scale(-1, 1);
          ctx.translate(-canvas.width, 0);
        }
        ctx.drawImage(img, img.width - (img.width * this.options.offset.x), img.height - (img.height * this.options.offset.y));


        let billboardH = height * (128 / width)

        this.entity = this.sdk.viewer.entities.add({
          id: this.options.id,
          show: this.options.show,
          position: new Cesium.CallbackProperty(() => {
            return Cesium.Cartesian3.fromDegrees(
              this.options.position.lng,
              this.options.position.lat,
              this.options.position.alt || 0
            )
          }),
          billboard: {
            show: this.mode ? true : false,
            image: canvas2,
            scale: this.billboardScale,
            disableDepthTestDistance: new Cesium.CallbackProperty(function () {
              return getGroundCover() ? undefined : Number.POSITIVE_INFINITY
            }, false),
            heightReference: heightMode,
            width: 128,
            height: billboardH,
            horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
            verticalOrigin: Cesium.VerticalOrigin.TOP,
            // pixelOffset: { x: -128 * this.billboardScale * (this.flipeY ? (1-this.options.offset.x) : this.options.offset.x), y: -billboardH * this.billboardScale * (this.flipeX ? (1-this.options.offset.y) : this.options.offset.y) }
            pixelOffset: { x: -128 * this.billboardScale * this.options.offset.x, y: -billboardH * this.billboardScale * this.options.offset.y }
          },
          label: {
            show: this.mode ? _this.options.label.show : false,
            text: _this.options.label.text,
            disableDepthTestDistance: new Cesium.CallbackProperty(function () {
              return getGroundCover() ? undefined : Number.POSITIVE_INFINITY
            }, false),
            heightReference: heightMode,
            font: _this.options.label.fontSize + 'px ' + font,
            fillColor: Cesium.Color.fromCssColorString(_this.options.label.color),
            // verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
            pixelOffset: new Cesium.CallbackProperty(function () {
              if (_this.options.show) {
                return new Cesium.Cartesian2(
                  0,
                  -billboardH * _this.billboardScale -
                  _this.options.label.fontSize / 2 -
                  5
                )
              } else {
                return new Cesium.Cartesian2(
                  0,
                  -_this.options.label.fontSize / 2 - 5
                )
              }
            }, false),
            outlineColor: Cesium.Color.BLACK,
            outlineWidth: 1,
            style: Cesium.LabelStyle.FILL_AND_OUTLINE
          },
          rectangle: {
            show: this.mode ? false : true,
            coordinates: new Cesium.CallbackProperty(() => {
              let gap = Math.abs(Math.cos(Math.PI / 180 * this.options.position.lat)) * (0.0001 * this.options.scale)
              let offset = {
                x: this.flipeY ? Math.abs(this.options.offset.x - 1) : this.options.offset.x,
                y: this.flipeX ? Math.abs(this.options.offset.y - 1) : this.options.offset.y,
              }
              offset = {
                lng: offset.x * ((0.0001 * this.options.scale) * 2),
                lat: Math.abs(offset.y - 1) * (gap * 2)
              }
              // let point1 = [this.options.position.lng - offset.lng + 360, this.options.position.lat - offset.lat];
              // let point2 = [(this.options.position.lng - offset.lng) + ((0.0001 * this.options.scale) * 2) + 360, (this.options.position.lat - offset.lat) + (gap * 2)];
              // let midpoint =  turf.point([point1[0]+point2[0]/2, point1[1]+point2[1]/2]);
              // let rotatedPot = turf.transformRotate(midpoint, -Number(this.options.angle), {pivot: [this.options.position.lng, this.options.position.lat]});
              // console.log(midpoint.geometry.coordinates, rotatedPot.geometry.coordinates, this.options.position)
              // let fromDegreesArray = [
              //   rotatedPot.geometry.coordinates[0]-(0.0001 * this.options.scale), rotatedPot.geometry.coordinates[1]-(0.0001 * this.options.scale),
              //   rotatedPot.geometry.coordinates[0]+(0.0001 * this.options.scale), rotatedPot.geometry.coordinates[1]+(0.0001 * this.options.scale),

              // ]
              let fromDegreesArray = [
                // this.options.position.lng - offset.lng, this.options.position.lat - offset.lat,
                // (this.options.position.lng - offset.lng) + ((0.0001 * this.options.scale) * 2), (this.options.position.lat - offset.lat) + (gap * 2),






                this.options.position.lng - (0.0001 * this.options.scale), this.options.position.lat - gap,
                // this.options.position.lng + 0.05, this.options.position.lat - 0.05,
                this.options.position.lng + (0.0001 * this.options.scale), this.options.position.lat + gap,
                // this.options.position.lng - 0.05, this.options.position.lat + 0.05,
              ]

              return Cesium.Rectangle.fromDegrees(...fromDegreesArray)
            }, false),
            material: new Cesium.ImageMaterialProperty({
              image: canvas,
              transparent: true
            }),
            rotation: new Cesium.CallbackProperty(() => {
              return Cesium.Math.toRadians(this.options.angle)
            }, false),
            stRotation: new Cesium.CallbackProperty(() => {
              return Cesium.Math.toRadians(this.options.angle)
            }, false)
          },
        })

        this.renewPoint()
        if (this.sdk.viewer._element.className === 'cesium-viewer 2d') {
          this.entity.rectangle.height = 0
        }
        syncData(this.sdk, this.options.id)
        if (this.options.show) {

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

      // if (data.code === 200 || data.code === 0) {
      //   this.$message({
      //     message: '添加成功！',
      //     type: 'success',
      //     duration: 1500
      //   });
      //   this.close()
      //   // this.$emit('getBuildingList')
      //   // this.$emit('onSubmitCallBack')
      // }
    }

  }

  // 编辑框
  async edit(state) {
    let _this = this
    this.originalOptions = this.deepCopyObj(this.options)
    if (this._DialogObject && this._DialogObject.close) {
      this._DialogObject.close()
      this._DialogObject = null
    }
    if (state) {
      let anchorSetDialogObject
      let canvas
      let point
      let billboardAnchorPosition
      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.previous = null
          this.reset()
          // this.entity.style = new Cesium.Cesium3DTileStyle({
          //   color: "color('rgba(255,255,255," + this.newData.transparency + ")')",
          //   show: true,
          // });

          if (anchorSetDialogObject && anchorSetDialogObject.close) {
            anchorSetDialogObject.close()
          }
          this.Dialog.closeCallBack && this.Dialog.closeCallBack()
          YJ.Measure.SetMeasureStatus(false)
          this.positionEditing = false
        },
        showCallBack: (show) => {
          this.show = show
          this.Dialog.showCallBack && this.Dialog.showCallBack()
        },
        translationalCallBack: () => {
          this.positionEditing = !this.positionEditing
        },
        addFootElm: [
          {
            tagName: 'button',
            className: 'flipe-over-y',
            innerHTML: 'Y轴翻转',
            event: [
              'click',
              () => {
                this.flipeY = !this.flipeY
              }
            ]
          },
          {
            tagName: 'button',
            className: 'flipe-over-x',
            innerHTML: 'X轴翻转',
            event: [
              'click',
              () => {
                this.flipeX = !this.flipeX
              }
            ]
          }
        ]
      }, true)
      this._DialogObject._element.body.className = this._DialogObject._element.body.className + ' ground-image'

      let contentElm = document.createElement('div');
      contentElm.innerHTML = html()
      this._DialogObject.contentAppChild(contentElm)
      let all_elm = contentElm.getElementsByTagName("*")
      this._EventBinding.on(this, all_elm)
      this._elms = this._EventBinding.element

      let anchorBtn = contentElm.getElementsByClassName('anchor')[0]
      anchorBtn.addEventListener('click', async () => {
        if (anchorSetDialogObject && anchorSetDialogObject.close) {
          anchorSetDialogObject.close()
        }
        document.body.addEventListener('mouseup', mouseupEvent)
        let DialogClientRect = _this._DialogObject._element.body.getBoundingClientRect()
        let _DialogObject = await new Dialog(this.sdk, this.originalOptions, {
          title: '锚点设置', left: (DialogClientRect.left + 80) + 'px', top: (DialogClientRect.top + 200) + 'px',
          confirmCallBack: (options) => {
            _this.offset = { x: billboardAnchorPosition.x, y: billboardAnchorPosition.y }
            _DialogObject.close()
          },
          closeCallBack: () => {
            document.body.removeEventListener('mouseup', mouseupEvent)
          },
        }, false)
        anchorSetDialogObject = _DialogObject
        _DialogObject._element.body.className = _DialogObject._element.body.className + ' anchor-point'
        let contentElm = document.createElement('div');
        let image = new Image()
        image.src = this.replaceHost(this.options.url, this.options.host)
        image.onload = function () {
          let ratio = image.width / image.height
          canvas = document.createElement('canvas')
          let width = 150
          let height = 150 / ratio
          const ctx = canvas.getContext('2d', { willReadFrequently: true })
          canvas.width = width
          canvas.height = height;
          canvas.style.display = 'block';
          ctx.drawImage(image, 0, 0, width, height)
          contentElm.appendChild(canvas)
          _DialogObject.contentAppChild(contentElm)

          point = document.createElement('span')
          point.className = 'point'
          contentElm.appendChild(point)
          billboardAnchorPosition = { x: _this.offset.x, y: _this.offset.y }
          point.style.top = `calc(${Number(billboardAnchorPosition.y) * 100}% - 6px)`
          point.style.left = `calc(${Number(billboardAnchorPosition.x) * 100}% - 6px)`

          canvas.addEventListener('click', (e) => {
            let x = e.offsetX
            let y = e.offsetY
            let anchor = { x: Number((x / canvas.width).toFixed(2)), y: Number((y / canvas.height).toFixed(2)) }
            if (anchor.x < 0) {
              anchor.x = 0
            }
            if (anchor.x > 1) {
              anchor.x = 1
            }
            if (anchor.y < 0) {
              anchor.y = 0
            }
            if (anchor.y > 1) {
              anchor.y = 1
            }
            billboardAnchorPosition = { x: anchor.x, y: anchor.y }

            point.style.top = `calc(${billboardAnchorPosition.y * 100}% - 5px)`
            point.style.left = `calc(${billboardAnchorPosition.x * 100}% - 5px)`
          })

          point.addEventListener('mousedown', (e) => {
            _DialogObject._element.body.addEventListener('mousemove', mousemoveEvent)
          })
        }
      })
      function mousemoveEvent(e) {
        getDialogBodyElm(e.target)
        function getDialogBodyElm(elm) {
          if (!elm) {
            return
          }
          else if (elm === anchorSetDialogObject._element.body) {
            let x = e.x - elm.getBoundingClientRect().left
            let y = e.y - elm.getBoundingClientRect().top
            let anchor = { x: Number(((x - 42) / canvas.width).toFixed(2)), y: Number(((y - 71) / canvas.height).toFixed(2)) }
            if (anchor.x < 0) {
              anchor.x = 0
            }
            if (anchor.x > 1) {
              anchor.x = 1
            }
            if (anchor.y < 0) {
              anchor.y = 0
            }
            if (anchor.y > 1) {
              anchor.y = 1
            }
            billboardAnchorPosition = { x: anchor.x, y: anchor.y }

            point.style.top = `calc(${billboardAnchorPosition.y * 100}% - 5px)`
            point.style.left = `calc(${billboardAnchorPosition.x * 100}% - 5px)`
          }
          else {
            getDialogBodyElm(elm.offsetParent)
          }
        }
      }
      function mouseupEvent() {
        if (anchorSetDialogObject) {
          anchorSetDialogObject._element.body.removeEventListener('mousemove', mousemoveEvent)
        }
      }

      // let coordinateData = []
      // this.epsg_map.forEach((value, key) => {
      //   coordinateData.push({
      //     name: `${value.name}(${value.epsg})`,
      //     value: key
      //   })
      // })
      // let coordinateDataLegpObject = legp(
      //   this._DialogObject._element.content.getElementsByClassName(
      //     'coordinate-select-box'
      //   )[0],
      //   '.coordinate-select'
      // )
      // if (coordinateDataLegpObject) {
      //   coordinateDataLegpObject.legp_search(coordinateData)
      //   let coordinateDataLegpElm = this._DialogObject._element.content
      //     .getElementsByClassName('coordinate-select')[0]
      //     .getElementsByTagName('input')[0]
      //   if (!this.coordinate) {
      //     this.coordinate = coordinateData[0].value
      //   } else {
      //     this.coordinate = this.coordinate
      //   }
      //   coordinateDataLegpElm.value = this.coordinate
      //   for (let i = 0; i < coordinateData.length; i++) {
      //     if (coordinateData[i].value === coordinateData.value) {
      //       coordinateDataLegpObject.legp_searchActive(
      //         coordinateData[i].value
      //       )
      //       break
      //     }
      //   }
      //   coordinateDataLegpElm.addEventListener('input', () => {
      //     for (let i = 0; i < coordinateData.length; i++) {
      //       if (coordinateData[i].value === coordinateDataLegpElm.value) {
      //         this.coordinate = coordinateData[i].value
      //         break
      //       }
      //     }
      //   })
      // }

      let elms = contentElm.getElementsByClassName('row')
      let elms2 = contentElm.getElementsByTagName('h4')
      for (let i = 0; i < elms.length; i++) {
        let mode = elms[i].getAttribute('mode')
        if (mode !== null) {
          if (mode == this.options.mode) {
            elms[i].style.display = 'flex'
          }
          else {
            elms[i].style.display = 'none'
          }
        }
      }
      for (let i = 0; i < elms2.length; i++) {
        let mode = elms2[i].getAttribute('mode')
        if (mode !== null) {
          if (mode == this.options.mode) {
            elms2[i].style.display = 'block'
          }
          else {
            elms2[i].style.display = 'none'
          }
        }
      }

      // let lng = contentElm.getElementsByClassName("lng")[0]
      // let lat = contentElm.getElementsByClassName("lat")[0]
      // let alt = contentElm.getElementsByClassName("alt")[0]
      // lng.value = this.options.position.lng
      // lat.value = this.options.position.lat
      // alt.value = this.options.position.alt
      // this._elms.lng = [lng]
      // this._elms.lat = [lat]
      // this._elms.alt = [alt]
      // lng.addEventListener('blur', (e) => {
      //   let value = e.target.value
      //   if (e.target.value || (e.target.dataset.null !== 'undefined' && e.target.dataset.null !== '' && !Boolean(e.target.dataset.null))) {
      //     value = Number(value)
      //     if ((e.target.max) && value > Number(e.target.max)) {
      //       value = Number(e.target.max)
      //     }
      //     if ((e.target.min) && value < Number(e.target.min)) {
      //       value = Number(e.target.min)
      //     }
      //     if ((e.target.dataset.min) && value < Number(e.target.dataset.min)) {
      //       value = Number(e.target.dataset.min)
      //     }
      //   }
      //   // this.position = {
      //   //   lng: value,
      //   //   lat: this.position.lat,
      //   //   alt: this.position.alt
      //   // }
      //   this.options.position.lng = value
      //   this.coordinate = this.options.coordinate
      // })
      // lat.addEventListener('blur', (e) => {
      //   let value = e.target.value
      //   if (e.target.value || (e.target.dataset.null !== 'undefined' && e.target.dataset.null !== '' && !Boolean(e.target.dataset.null))) {
      //     value = Number(value)
      //     if ((e.target.max) && value > Number(e.target.max)) {
      //       value = Number(e.target.max)
      //     }
      //     if ((e.target.min) && value < Number(e.target.min)) {
      //       value = Number(e.target.min)
      //     }
      //     if ((e.target.dataset.min) && value < Number(e.target.dataset.min)) {
      //       value = Number(e.target.dataset.min)
      //     }
      //   }
      //   // this.position = {
      //   //   lng: this.position.lng,
      //   //   lat: value,
      //   //   alt: this.position.alt
      //   // }
      //   this.options.position.lat = value
      //   this.coordinate = this.options.coordinate
      // })
      // alt.addEventListener('blur', (e) => {
      //   let value = e.target.value
      //   if (e.target.value || (e.target.dataset.null !== 'undefined' && e.target.dataset.null !== '' && !Boolean(e.target.dataset.null))) {
      //     value = Number(value)
      //     if ((e.target.max) && value > Number(e.target.max)) {
      //       value = Number(e.target.max)
      //     }
      //     if ((e.target.min) && value < Number(e.target.min)) {
      //       value = Number(e.target.min)
      //     }
      //     if ((e.target.dataset.min) && value < Number(e.target.dataset.min)) {
      //       value = Number(e.target.dataset.min)
      //     }
      //   }
      //   // this.position = {
      //   //   lng: this.position.lng,
      //   //   lat: this.position.lat,
      //   //   alt: value
      //   // }
      //   this.options.position.alt = value
      //   this.coordinate = this.options.coordinate
      // })

      let colorPicker = new YJColorPicker({
        el: contentElm.getElementsByClassName('labelColor')[0],
        size: 'mini', //颜色box类型
        alpha: true, //是否开启透明度
        defaultColor: this.labelColor,
        disabled: false, //是否禁止打开颜色选择器
        openPickerAni: 'opacity', //打开颜色选择器动画
        sure: color => {
          this.labelColor = color
        }, //点击确认按钮事件回调
        clear: () => {
          this.labelColor = 'rgba(255,255,255,1)'
        } //点击清空按钮事件回调
      })
      this._elms.labelColor = [colorPicker]

      setTimeout(async () => {
        let flipeOverXBtn = this._DialogObject._element.foot.getElementsByClassName('flipe-over-x')[0]
        let flipeOverYBtn = this._DialogObject._element.foot.getElementsByClassName('flipe-over-y')[0]
        flipeOverXBtn.setAttribute('mode', 0)
        flipeOverYBtn.setAttribute('mode', 0)
        if (this.options.mode) {
          flipeOverXBtn.style.display = 'none'
          flipeOverYBtn.style.display = 'none'
        }
        else {
          flipeOverXBtn.style.display = 'block'
          flipeOverYBtn.style.display = 'block'
        }
        let modeData = [
          {
            name: '贴地',
            value: '贴地',
            key: 0
          },
          {
            name: '立体',
            value: '立体',
            key: 1
          }
        ]
        let modeDataLegpObject = legp(
          this._DialogObject._element.content.getElementsByClassName(
            'mode-box'
          )[0],
          '.mode'
        )
        if (modeDataLegpObject) {
          modeDataLegpObject.legp_search(modeData)
          let modeDataLegpElm = this._DialogObject._element.content
            .getElementsByClassName('mode')[0]
            .getElementsByTagName('input')[0]
          modeDataLegpElm.value = this.mode
          for (let i = 0; i < modeData.length; i++) {
            if (modeData[i].key === this.mode) {
              modeDataLegpElm.value = modeData[i].value
              modeDataLegpObject.legp_searchActive(modeData[i].value)
              break
            }
          }
          modeDataLegpElm.addEventListener('input', () => {
            for (let i = 0; i < modeData.length; i++) {
              if (modeData[i].value === modeDataLegpElm.value) {
                this.mode = modeData[i].key
                break
              }
            }
          })
          this._elms.mode = [modeDataLegpElm]
        }


        let heightBoxElm = this._DialogObject._element.content.getElementsByClassName('height-box')[0]
        let heightElm = heightBoxElm.getElementsByClassName('height')[0]
        let heightModeData = [
          {
            name: '海拔高度',
            value: '海拔高度',
            key: '0'
          },
          {
            name: '相对地表',
            value: '相对地表',
            key: '1'
          },
          {
            name: '依附地表',
            value: '依附地表',
            key: '2'
          },
          {
            name: '依附模型',
            value: '依附模型',
            key: '3'
          }
        ]
        let heightMode = this.heightMode

        switch (heightMode) {
          case 0:
          case '0':
            heightElm.value = this.options.position.alt
            break
          case 1:
          case '1':
            if (this.sdk.viewer.scene.terrainProvider.availability) {
              Cesium.sampleTerrainMostDetailed(
                this.sdk.viewer.scene.terrainProvider,
                [
                  Cesium.Cartographic.fromDegrees(
                    this.options.position.lng,
                    this.options.position.lat
                  )
                ]
              ).then(position => {
                heightElm.value = Number(
                  (this.options.position.alt - Number(position[0].height.toFixed(2))).toFixed(2)
                )
              })
            } else {
              heightElm.value = Number(this.options.position.alt.toFixed(2))
            }
            break
          case 2:
          case '2':
          case 3:
          case '3':
            let objectsToExclude = []
            for (let [key, value] of this.sdk.entityMap) {
              if (value.type === 'RadarScanStereoscopic' && value.entity) {
                objectsToExclude.push(value.entity)
              }
            }
            this.getClampToHeight(this.options.position, objectsToExclude).then(h => {
              this.options.position.alt = Number(h.toFixed(2))
              this.coordinate = this.options.coordinate
              this._elms.alt &&
                this._elms.alt.forEach(item => {
                  item.value = this.options.position.alt
                })
              heightElm.value = this.options.position.alt
            })
            break
        }
        let heightModeObject = legp(
          this._DialogObject._element.content.getElementsByClassName(
            'height-mode-box'
          )[0],
          '.height-mode'
        )
        if (heightModeObject) {
          heightModeObject.legp_search(heightModeData)
          let heightModeDataLegpElm = this._DialogObject._element.content
            .getElementsByClassName('height-mode')[0]
            .getElementsByTagName('input')[0]
          heightModeDataLegpElm.value = heightModeData[this.heightMode].value
          for (let i = 0; i < heightModeData.length; i++) {
            if (heightModeData[i].value == heightModeDataLegpElm.value) {
              heightModeObject.legp_searchActive(heightModeData[i].value)
              break
            }
          }
          heightModeDataLegpElm.addEventListener('input', () => {
            for (let i = 0; i < heightModeData.length; i++) {
              if (heightModeData[i].value === heightModeDataLegpElm.value) {
                heightMode = heightModeData[i].key
                switch (heightMode) {
                  case 0:
                  case '0':
                    this.options.position.alt = Number(heightElm.value)
                    this.heightMode = 0
                    // this.position = this.options.position
                    break
                  case 1:
                  case '1':
                    if (this.sdk.viewer.scene.terrainProvider.availability) {
                      Cesium.sampleTerrainMostDetailed(
                        this.sdk.viewer.scene.terrainProvider,
                        [
                          Cesium.Cartographic.fromDegrees(
                            this.options.position.lng,
                            this.options.position.lat
                          )
                        ]
                      ).then(position => {
                        this.options.position.alt =
                          Number(heightElm.value) +
                          Number(position[0].height.toFixed(2))
                        // this.position = this.options.position
                      })
                    } else {
                      this.options.position.alt = Number(heightElm.value)
                      // this.position = this.options.position
                    }
                    this.heightMode = 1
                    break
                  case 2:
                  case '2':
                    this.heightMode = 2
                    break
                  case 3:
                  case '3':
                    let objectsToExclude = []
                    for (let [key, value] of this.sdk.entityMap) {
                      if (value.type === 'RadarScanStereoscopic' && value.entity) {
                        objectsToExclude.push(value.entity)
                      }
                    }
                    this.getClampToHeight(this.options.position, objectsToExclude).then(h => {
                      this.options.position.alt = Number(h.toFixed(2))
                      // this.position = this.options.position
                    })
                    this.heightMode = 3
                    break
                }
                this.position = this.options.position
                break
              }
            }
          })

          heightElm.addEventListener('blur', async () => {
            switch (heightMode) {
              case 0:
              case '0':
                this.options.position.alt = Number(
                  Number(heightElm.value).toFixed(2)
                )
                break
              case 1:
              case '1':
                if (this.sdk.viewer.scene.terrainProvider.availability) {
                  let position = await Cesium.sampleTerrainMostDetailed(
                    this.sdk.viewer.scene.terrainProvider,
                    [
                      Cesium.Cartographic.fromDegrees(
                        this.options.position.lng,
                        this.options.position.lat
                      )
                    ]
                  )
                  this.options.position.alt =
                    Number(heightElm.value) +
                    Number(position[0].height.toFixed(2))
                } else {
                  this.options.position.alt = Number(heightElm.value)

                }
                break
              case 2:
              case '2':
                break
            }
            this.position = this.options.position
          })
          this._elms.height = heightBoxElm
          this._elms.heightMode = heightModeDataLegpElm

          this.heightMode = this.heightMode
        }

        let fontData = getFontList()
        let fontObject = legp(
          this._DialogObject._element.content.getElementsByClassName(
            'font-select-box'
          )[0],
          '.font-select'
        )
        if (fontObject) {
          fontObject.legp_search(fontData)
          let fontDataLegpElm = this._DialogObject._element.content
            .getElementsByClassName('font-select')[0]
            .getElementsByTagName('input')[0]
          fontDataLegpElm.value = fontData[this.labelFontFamily].value
          for (let i = 0; i < fontData.length; i++) {
            if (fontData[i].value == fontDataLegpElm.value) {
              fontObject.legp_searchActive(fontData[i].value)
              break
            }
          }
          fontDataLegpElm.addEventListener('input', () => {
            for (let i = 0; i < fontData.length; i++) {
              if (fontData[i].value === fontDataLegpElm.value) {
                this.labelFontFamily = fontData[i].key
                break
              }
            }
          })
          this._elms.labelFontFamily = [fontDataLegpElm]
        }
      }, 0);

    } else {
      if (this._DialogObject && this._DialogObject.remove) {
        this._DialogObject.remove()
        this._DialogObject = null
      }
    }
  }

  /**@desc 打开平移功能
   *
   * @memberOf Source
   * @param status {boolean}
   *
   * */
  set positionEditing(status) {
    if (!this.sdk || !this.sdk.viewer || !this.entity) {
      return
    }
    this._positionEditing = status
    if (status === true) {
      this.previous = {
        position: { ...this.options.position }
      }
      this.tip && this.tip.destroy()
      this.tip = new MouseTip('点击鼠标左键确认，右键取消', this.sdk)
      this.event.mouse_move((movement, cartesian) => {
        let position = this.cartesian3Towgs84(cartesian, this.sdk.viewer)
        this.options.position.lng = position.lng
        this.options.position.lat = position.lat
        this.options.position.alt = position.alt
        this.tip.setPosition(
          cartesian,
          movement.endPosition.x,
          movement.endPosition.y
        )
      })
      this.event.mouse_left((movement, cartesian) => {
        let position = this.cartesian3Towgs84(cartesian, this.sdk.viewer)
        this.options.position.lng = position.lng
        this.options.position.lat = position.lat
        this.options.position.alt = position.alt
        this.event.mouse_move(() => { })
        this.event.mouse_left(() => { })
        this.event.mouse_right(() => { })
        this.event.gesture_pinck_start(() => { })
        this.event.gesture_pinck_end(() => { })
        this.previous = null
        this.positionEditing = false
      })
      this.event.mouse_right((movement, cartesian) => {
        this.options.position.lng = this.previous.position.lng
        this.options.position.lat = this.previous.position.lat
        this.options.position.alt = this.previous.position.alt
        this.positionEditing = false
      })

      this.event.gesture_pinck_start((movement, cartesian) => {
        let startTime = new Date()
        this.event.gesture_pinck_end(() => {
          let endTime = new Date()
          if (endTime - startTime >= 500) {
            // 长按取消
            this.options.position.lng = this.previous.position.lng
            this.options.position.lat = this.previous.position.lat
            this.options.position.alt = this.previous.position.alt
            this.positionEditing = false
          }
          else {
            let position = this.cartesian3Towgs84(cartesian, this.sdk.viewer)
            this.options.position.lng = position.lng
            this.options.position.lat = position.lat
            this.options.position.alt = position.alt
            this.event.mouse_move(() => { })
            this.event.mouse_left(() => { })
            this.event.mouse_right(() => { })
            this.event.gesture_pinck_start(() => { })
            this.event.gesture_pinck_end(() => { })
            this.positionEditing = false
          }
        })
      })
    }
    else {
      if (this.event) {
        this.event.mouse_move(() => { })
        this.event.mouse_left(() => { })
        this.event.mouse_right(() => { })
        this.event.gesture_pinck_start(() => { })
        this.event.gesture_pinck_end(() => { })
      }
      this.tip && this.tip.destroy()
      if (!this.previous) {
        this.previous = {
          position: { ...this.options.position }
        }
      }
      this.position = { ...this.previous.position }
    }
  }

  get positionEditing() {
    return this._positionEditing
  }

  /**
   * 飞到
  */
  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 gap = Math.abs(Math.cos(Math.PI / 180 * this.options.position.lat)) * (0.0001 * this.options.scale)
      let fromDegreesArray = [
        [this.options.position.lng - (0.0001 * this.options.scale), this.options.position.lat - gap],
        [this.options.position.lng + (0.0001 * this.options.scale), this.options.position.lat + gap],
      ]
      let positionArray = []
      let height = 0
      let position = this.options.position
      let point1 = Cesium.Cartesian3.fromDegrees(position.lng, position.lat, 0);
      let point2 = Cesium.Cartesian3.fromDegrees(position.lng, position.lat, 10000000);
      let direction = Cesium.Cartesian3.subtract(point2, point1, new Cesium.Cartesian3());
      let c = Cesium.Cartesian3.normalize(direction, direction);
      let ray = new Cesium.Ray(point1, c);
      let r = {}
      let pickedObjects = this.sdk.viewer.scene.drillPickFromRay(ray);
      for (let i = 0; i < pickedObjects.length; i++) {
        if (pickedObjects[i].position) {
          r = pickedObjects[i]
          break
        }
      }
      if (r && r.position) {
        height = this.cartesian3Towgs84(r.position, this.sdk.viewer).alt
      }
      else {
        try {
          var promise = await Cesium.sampleTerrainMostDetailed(this.sdk.viewer.terrainProvider, [Cesium.Cartographic.fromDegrees(position.lng, position.lat)]);
          height = promise[0].height
        } catch (error) {
        }
      }
      for (let i = 0; i < fromDegreesArray.length; i++) {
        let a = Cesium.Cartesian3.fromDegrees(...fromDegreesArray[i], height)
        positionArray.push(a.x, a.y, a.z)
      }
      let BoundingSphere = Cesium.BoundingSphere.fromVertices(positionArray)
      this.sdk.viewer.camera.flyToBoundingSphere(BoundingSphere, {
        offset: options.orientation || {
          heading: Cesium.Math.toRadians(0.0),
          pitch: Cesium.Math.toRadians(-90.0),
          roll: Cesium.Math.toRadians(0.0)
        }
      })
    }
  }

  async updateHeight() {
    let height
    let height2
    let point1 = new Cesium.Cartesian3.fromDegrees(
      this.options.position.lng,
      this.options.position.lat,
      0
    )
    let point2 = new Cesium.Cartesian3.fromDegrees(
      this.options.position.lng,
      this.options.position.lat,
      10000000000000
    )

    let objectsToExclude = []
    for (let [key, value] of this.sdk.entityMap) {
      if (value.type === 'RadarScanStereoscopic' && value.entity) {
        objectsToExclude.push(value.entity)
      }
    }
    let updatedCartesians = await this.sdk.viewer.scene.clampToHeightMostDetailed([point1], objectsToExclude)
    if (updatedCartesians && updatedCartesians[0]) {
      height = this.cartesian3Towgs84(updatedCartesians[0], this.sdk.viewer).alt
    }

    let direction = Cesium.Cartesian3.subtract(
      point1,
      point2,
      new Cesium.Cartesian3()
    )
    let c = Cesium.Cartesian3.normalize(direction, new Cesium.Cartesian3())
    let ray = new Cesium.Ray(point2, c)
    let r = {}
    let pickedObjects = this.sdk.viewer.scene.drillPickFromRay(ray)
    for (let i = pickedObjects.length - 1; i >= 0; i--) {
      if (pickedObjects[i].position) {
        r = pickedObjects[i]
        break
      }
    }
    if (r && r.position) {
      height2 = this.cartesian3Towgs84(r.position, this.sdk.viewer).alt
    }
    let promise
    try {
      promise = await Cesium.sampleTerrainMostDetailed(
        this.sdk.viewer.terrainProvider,
        [
          Cesium.Cartographic.fromDegrees(
            this.options.position.lng,
            this.options.position.lat
          )
        ]
      )
    } catch (error) { }

    if ((height2 === void 0 || height2 < promise[0].height) && promise) {
      height2 = promise[0].height
    }
    if (height === void 0 || height < height2) {
      height = height2
    }
    if (height !== undefined) {
      this.options.position.alt = Number(Number(height).toFixed(2))
      this._elms.alt &&
        this._elms.alt.forEach(item => {
          item.value = this.options.position.alt
        })
      this.coordinate = this.options.coordinate

      if (this._elms.height) {
        let heightElm = this._elms.height.getElementsByClassName('height')[0]
        if (heightElm) {
          switch (this._elms.heightMode.value) {
            case '海拔高度':
              heightElm.value = this.options.position.alt
              break
            case '相对地表':
              if (this.sdk.viewer.scene.terrainProvider.availability) {
                Cesium.sampleTerrainMostDetailed(
                  this.sdk.viewer.scene.terrainProvider,
                  [
                    Cesium.Cartographic.fromDegrees(
                      this.options.position.lng,
                      this.options.position.lat
                    )
                  ]
                ).then(position => {
                  heightElm.value = Number(
                    (this.options.position.alt - position[0].height).toFixed(2)
                  )
                })
              } else {
                heightElm.value = this.options.position.alt
              }
              break
            case '依附地表':
              break
            case '依附模型':
              heightElm.value = this.options.position.alt
              break
          }
        }
      }
    }

    // if (!this.entity.values) {
    //   this.entity.position = Cesium.Cartesian3.fromDegrees(
    //     this.options.position.lng,
    //     this.options.position.lat,
    //     this.options.position.alt
    //   )
    // }
  }

  renewPoint() {
    if (!this.entity.values && this.entity.billboard) {
      let font = getFontFamily(this.labelFontFamily) || 'Helvetica'
      this.entity.billboard.scale = this.billboardScale
      if (this.billboardScaleByDistance) {
        this.entity.billboard.scaleByDistance = new Cesium.NearFarScalar(
          this.billboardNear,
          1,
          this.billboardFar,
          0
        )
        this.entity.billboard.pixelOffsetScaleByDistance = new Cesium.NearFarScalar(
          this.billboardNear,
          1,
          this.billboardFar,
          0
        )
        this.entity.label.scaleByDistance = new Cesium.NearFarScalar(
          this.billboardNear,
          1,
          this.billboardFar,
          0
        )
        this.entity.label.pixelOffsetScaleByDistance = new Cesium.NearFarScalar(
          this.billboardNear,
          1,
          this.billboardFar,
          0
        )
      } else {
        this.entity.billboard.scaleByDistance = undefined
        this.entity.billboard.pixelOffsetScaleByDistance = undefined
        this.entity.label.scaleByDistance = undefined
        this.entity.label.pixelOffsetScaleByDistance = undefined
      }
      this.entity.label.font = this.options.label.fontSize + 'px ' + font
      this.entity.label.fillColor = Cesium.Color.fromCssColorString(
        this.options.label.color
      )
      let canvas = this.entity.billboard.image.getValue()
      let billboardH = canvas.height * (128 / canvas.width)
      this.entity.billboard.pixelOffset = { x: -128 * this.billboardScale * this.options.offset.x, y: -billboardH * this.billboardScale * this.options.offset.y }
      // this.entity.billboard.pixelOffset = { x: -width * this.billboardScale * (this.flipeY ? (1 - this.options.offset.x) : this.options.offset.x), y: -height * this.billboardScale * (this.flipeX ? (1 - this.options.offset.y) : this.options.offset.y) }
    }
  }

  reset() {
    if (!this.entity) {
      return
    }
    this.options = this.deepCopyObj(this.originalOptions)
    this.name = this.options.name
    this.angle = this.options.angle
    this.scale = this.options.scale
    this.offset = this.options.offset
    this.flipeX = this.options.flipe.x
    this.flipeY = this.options.flipe.y
    this.show = this.options.show
  }

  async remove() {
    this.event && this.event.destroy()
    this.tip && this.tip.destroy()
    this.sdk.viewer.entities.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)
  }

  setPosition(v) {
    this.options.position.lng = v.position.lng
    this.options.position.lat = v.position.lat
    this.options.position.alt = v.position.alt
  }
}

export default GroundImage