sdk4.0_new/src/Tools/projectionConvert.js

import Dialog from '../BaseDialog';
import { Proj } from './proj';
import { legp } from '../Obj/Element/datalist';
import MouseEvent from '../Event/index'
import MouseTip from '../MouseTip'
import Tools from '../Tools'
let _DialogObject
let tip
let event
let datalistLeftInput, datalistRightInput
const open = async (sdk, closeCallBack) => {
  let topls = new Tools()
  let proj = new Proj()
  // if (_DialogObject && _DialogObject.close) {
  //   _DialogObject.close()
  //   _DialogObject = null
  // }
  // _DialogObject = await new Dialog(sdk.viewer._container, {
  //   title: '投影转换', left: '180px', top: '100px',
  //   closeCallBack: () => {
  //     closeCallBack && closeCallBack()
  //   },
  // })
  // await _DialogObject.init()

  // let html = `
  //   <span class="custom-divider"></span>
  //   <div style="width: 540px;display: flex;">
  //     <div class="row left" style="flex: 1;margin-bottom: 0;">
  //       <div style="margin: 10px 0;flex: 1;display: flex;align-items: center;flex: 1;justify-content: space-between;">
  //         <span class="lable-left-line">源坐标</span>
  //         <button class="btn pick" style="margin-left: 20px;"><svg class="icon-edit"><use xlink:href="#yj-icon-edit"></use></svg>坐标拾取</button>
  //       </div>
  //       <div>
  //         <div style="display: flex;margin-bottom: 12px;align-items: center;">
  //           <span class="label" style="flex: 0 0 60px;">椭圆基准</span>
  //           <div class="datalist_left"></div>
  //         </div>
  //         <div style="display: flex;margin-bottom: 12px;align-items: center;">
  //           <span class="label" style="flex: 0 0 60px;">经度(x)</span>
  //           <input class="input left-x" type="number" title="">
  //         </div>
  //         <div style="display: flex;margin-bottom: 10px;align-items: center;">
  //           <span class="label" style="flex: 0 0 60px;">纬度(y)</span>
  //           <input class="input left-y" type="number" title="">
  //         </div>
  //       </div>
  //     </div>
  //     <div style="display: flex;flex-direction: column;justify-content: center;margin: 28px 15px 0 15px;">
  //       <button class="btn convert">坐标转换<i style="margin-top: 2px;margin-left: 5px;" class="el-icon-right"></i></button>
  //     </div>
  //     <div class="row right" style="flex: 1;margin-bottom: 0;">
  //       <div style="margin: 10px 0;height: 32px; display: flex;align-items: center;flex: 1;justify-content: space-between;">
  //         <span class="lable-left-line">目标坐标</span>
  //         <button class="btn copy" data-clipboard-action="copy" data-clipboard-target=".input" style="margin-left: 20px;"><svg class="icon-copy"><use xlink:href="#yj-icon-copy"></use></svg>复制</button>
  //       </div>
  //       <div>
  //         <div style="display: flex;margin-bottom: 12px;align-items: center;">
  //           <span class="label" style="flex: 0 0 60px;">椭圆基准</span>
  //           <div class="datalist_right"></div>
  //         </div>
  //         <div style="display: flex;margin-bottom: 12px;align-items: center;">
  //           <span class="label" style="flex: 0 0 60px;">经度(x)</span>
  //           <input class="input right-x" readonly="readonly">
  //         </div>
  //         <div style="display: flex;margin-bottom: 10px;align-items: center;">
  //           <span class="label" style="flex: 0 0 60px;">纬度(y)</span>
  //           <input class="input right-y" readonly="readonly">
  //         </div>
  //       </div>
  //     </div>
  //   </div>
  //   <span class="custom-divider"></span>
  // `
  // let contentElm = document.createElement('div');
  // contentElm.innerHTML = html
  // _DialogObject.contentAppChild(contentElm)

  // legp(contentElm, ".datalist").legp_search(tagData)
  let contentElm = document.getElementsByClassName('projection-convert')[0].getElementsByClassName('content')[0]

  let tagData = []
  let i = 0
  proj.epsg_map.forEach((value, key) => {
    i++
    tagData.push(
      {
        name: `${i}.&nbsp;&nbsp;${key}(${value.name})`,
        value: key
      }
    )
  })
  // let legpObjectLeft = legp(contentElm.getElementsByClassName('left')[0], ".datalist_left")
  // legpObjectLeft.legp_search(tagData, true)
  // let legpObjectRight = legp(contentElm.getElementsByClassName('right')[0], ".datalist_right")
  // legpObjectRight.legp_search(tagData, true)
  let pickElm = contentElm.getElementsByClassName('pick')[0]
  let copyElm = contentElm.getElementsByClassName('copy')[0]
  let sourceCopyElm = contentElm.getElementsByClassName('sourceCopy')[0]
  // let datalistLeftInput = contentElm.getElementsByClassName('datalist_left')[0].getElementsByTagName('input')[0]
  // datalistLeftInput.value = tagData[0].value
  // legpObjectLeft.legp_searchActive(tagData[0].value)




  // let datalistRightInput = contentElm.getElementsByClassName('datalist_right')[0].getElementsByTagName('input')[0]
  // datalistRightInput.value = tagData[0].value
  // legpObjectRight.legp_searchActive(tagData[0].value)




  let convertElm = contentElm.getElementsByClassName('convert')[0]
  let leftXElm = contentElm.getElementsByClassName('left-x')[0]
  let leftYElm = contentElm.getElementsByClassName('left-y')[0]
  let rightXElm = contentElm.getElementsByClassName('right-x')[0]
  let rightYElm = contentElm.getElementsByClassName('right-y')[0]

  let beforeleftVal = 'EPSG:4326'
  let beforerightVal = 'EPSG:4326'
  // 监听输入事件（实时触发）
  // datalistLeftInput.addEventListener('input', (e) => {
  //   const newValue = e.target.value;
  //   if (leftXElm.value && leftYElm.value) {
  //     let result = proj.convert([{ x: Number(leftXElm.value), y: Number(leftYElm.value) }], beforeleftVal, newValue)
  //     if (result.code === 0) {
  //       leftXElm.value = result.points[0].x
  //       leftYElm.value = result.points[0].y
  //     }
  //   }
  //   beforeleftVal = newValue

  //   // 可以在这里调用legp_searchActive方法
  //   // legpObjectLeft.legp_searchActive(newValue);
  // });

  // datalistRightInput.addEventListener('input', (e) => {
  //   const newValue = e.target.value;
  //   if (rightXElm.value && rightYElm.value) {
  //     let result = proj.convert([{ x: Number(rightXElm.value), y: Number(rightYElm.value) }], beforerightVal, newValue)
  //     if (result.code === 0) {
  //       rightXElm.value = result.points[0].x
  //       rightYElm.value = result.points[0].y
  //     }
  //   }

  //   beforerightVal = datalistRightInput.value
  //   // 可以在这里调用legp_searchActive方法
  //   // legpObjectRight.legp_searchActive(newValue);
  // });

  pickElm.addEventListener('click', () => {
    tip && tip.destroy()
    event && event.destroy()
    tip = new MouseTip('左键选择起点坐标，右键取消', sdk)
    event = new MouseEvent(sdk)
    event.mouse_move((movement, cartesian) => {
      tip.setPosition(
        cartesian,
        movement.endPosition.x,
        movement.endPosition.y
      )
    })
    event.mouse_left((movement, cartesian) => {
      let pos84 = topls.cartesian3Towgs84(cartesian, sdk.viewer)
      tip && tip.destroy()
      event && event.destroy()
      let result = proj.convert([{ x: Number(pos84.lng), y: Number(pos84.lat) }], 'EPSG:4326', datalistLeftInput)
      if (result.code === 0) {
        leftXElm.value = result.points[0].x
        leftYElm.value = result.points[0].y
      }
    })
    event.mouse_right((movement, cartesian) => {
      tip && tip.destroy()
      event && event.destroy()
    })
  })
  convertElm.addEventListener('click', () => {
    if (!leftXElm.value || !leftYElm.value) {
      rightXElm.value = ''
      rightYElm.value = ''
      topls.message({ type: 'warning', text: '请输入源坐标' })
      return
    }
    let result = proj.convert([{ x: Number(leftXElm.value), y: Number(leftYElm.value) }], datalistLeftInput, datalistRightInput)
    if (result.code === 0) {
      rightXElm.value = result.points[0].x
      rightYElm.value = result.points[0].y
    }
    else {
      topls.message({ type: 'warning', text: result.message })
    }
  })

  // 复制目标坐标
  let clipboard = new ClipboardJS(copyElm, {
    text: (trigger) => {
      if (!rightXElm.value || !rightYElm.value) {
        rightXElm.value = ''
        rightYElm.value = ''
        topls.message({ type: 'warning', text: '复制失败，目标坐标为空！' })
      }
      else {
        let text = `${rightXElm.value},${rightYElm.value}`
        return text;
      }
    }
  });


  clipboard.on('success', function (e) {
    topls.message({ text: '已复制到剪切板' })
  });

  let sourcelipboard = new ClipboardJS(sourceCopyElm, {
    text: (trigger) => {
      if (!leftXElm.value || !leftYElm.value) {
        leftXElm.value = ''
        leftYElm.value = ''
        topls.message({ type: 'warning', text: '复制失败，目标坐标为空！' })
      }
      else {
        let text = `${leftXElm.value},${leftYElm.value}`
        return text;
      }
    }
  });
  sourcelipboard.on('success', function (e) {
    topls.message({ text: '已复制到剪切板' })
  });
}

const close = () => {
  if (_DialogObject && _DialogObject.close) {
    _DialogObject.close()
    _DialogObject = null
  }
  tip && tip.destroy()
  event && event.destroy()
}

const updateCoordinates = (select1, select2) => {
  datalistLeftInput = select1
  datalistRightInput = select2
}

export { open, close, updateCoordinates }