sdk4.0_new/src/Global/MouseCoordinate/index.js

/**
 * 鼠标坐标
 */
import Tools from "../../Tools";
import { getCoordinateSystem, getDMS } from "../../Global/global";
import MouseEvent from '../../Event/index'
import { getSdk as get2DSdk } from '../../Global/MultiViewportMode'
import { getSdk as getSplitScreenSdk } from "../../Global/SplitScreen";

let event
let event2
let MouseCoordinateElm
let requestAnimationFrameEventId
let tmovement
let targetSdk
let sdkD

const MouseCoordinate = (sdk, status) => {
  if (!sdk || !sdk.viewer) {
    return
  }
  targetSdk = sdk
  sdkD = get2DSdk().sdkD
  if (!sdkD) {
    sdkD = getSplitScreenSdk().sdkD
  }

  let tools = new Tools(sdk)
  let proj = sdk.proj
  if (status) {
    if (event) {
      event.destroy()
    }
    if (event2) {
      event2.destroy()
      event2 = undefined
    }
    event = new MouseEvent(sdk)
    tmovement = null
    let position = {
      x: '',
      y: '',
      z: ''
    }
    let contentElm
    if (MouseCoordinateElm) {
      contentElm = MouseCoordinateElm
    }
    else {
      contentElm = document.createElement('div');
      contentElm.style.position = 'absolute';
      contentElm.style['z-index'] = 777;
      contentElm.style.color = '#ffffff';
      contentElm.style.left = '0px';
      contentElm.style.top = '0px';
      contentElm.style.width = '100%';
      contentElm.style.height = '100%';
      contentElm.style['font-size'] = '12px';
      contentElm.style['pointer-events'] = 'none';
      contentElm.style.background = `url(${tools.getSourceRootPath()}/img/cross.png) no-repeat 100% 100%`;
      contentElm.style['background-size'] = `200% 200%`;
      MouseCoordinateElm = contentElm
    }
    sdk.viewer.container.appendChild(contentElm)

    event.mouse_move((movement, cartesian) => {
      targetSdk = sdk
      tmovement = { ...movement.endPosition }
    })

    const posiToCoordinate = (coordinateSystem, position) => {
      let type
      switch (coordinateSystem) {
        case 'EPSG:32601'://WGS84 通用横轴墨卡托投影
          //带号 = ⌊(经度 + 180)/6⌋ + 1
          var dh = Math.round((position.lng + 180) / 6 + 1)

          if (position.lat > 0) {//北纬
            type = 32600 + dh
            type = 'EPSG:' + type
          } else {//南纬
            type = 32700 + dh
            type = 'EPSG:' + type
          }
          break;
        case 'EPSG:4534'://2000 坐标 3 度不带代号
          //N = round(经度/3)
          //EPSG = N - 25 + 4534

          var dh3y = Math.round(position.lng / 3)
          type = dh3y - 25 + 4534
          type = 'EPSG:' + type
          break;
        case 'EPSG:4513'://2000 坐标 3 度带代号
          //N = round(经度/3)
          //EPSG = N - 25 + 4513
          var dh3w = Math.round(position.lng / 3)
          type = dh3w - 25 + 4513
          type = 'EPSG:' + type
          break;
        case 'EPSG:4502'://2000 坐标 6 度不带代号
          let zoneNumber = Math.floor(position.lng / 6) + 31
          // 中国区域6度带带号范围为13-23
          if (zoneNumber < 13) zoneNumber = 13;
          if (zoneNumber > 23) zoneNumber = 23;
          type = (zoneNumber - 13) + 4502
          type = 'EPSG:' + type
          break;
        case 'EPSG:4491'://2000 坐标 6 度带代号
          //N = floor(longitude/6) + 31
          var dh6 = Math.floor(position.lng / 6) + 31
          // 中国区域6度带带号范围为13-23
          if (dh6 < 13) dh6 = 13;
          if (dh6 > 23) dh6 = 23;
          type = (dh6 - 13) + 4491
          type = 'EPSG:' + type
          break;
        default:
          break;
      }
      return type
    }
    const getPosition = () => {
      if (!targetSdk) {
        return
      }
      let canvas = sdk.viewer._element.getElementsByTagName('canvas')[0]
      sdkD = get2DSdk().sdkD
      if (!sdkD) {
        sdkD = getSplitScreenSdk().sdkD
      }
      if (!event2 && sdkD) {
        event2 = new MouseEvent(sdkD)
        event2.mouse_move((movement, cartesian) => {
          targetSdk = sdkD
          tmovement = { x: movement.endPosition.x, y: movement.endPosition.y }
        })
      }
      if (!tmovement) {
        return
      }
      let left = tmovement.x;
      let top = tmovement.y;
      let cartesian
      if (targetSdk.viewer.scene.mode === 2) {
        left = left + canvas.width
        cartesian = targetSdk.viewer.camera.pickEllipsoid(tmovement, targetSdk.viewer.scene.globe.ellipsoid)
      }
      else {
        cartesian = targetSdk.viewer.scene.pickPosition(tmovement)
        if (!cartesian) {
          const ray = targetSdk.viewer.camera.getPickRay(position); //相交的射线
          let pickedObjects = targetSdk.viewer.scene.drillPickFromRay(ray, 10);
          let result = {}
          for (let i = 0; i < pickedObjects.length; i++) {
            if (pickedObjects[i].position) {
              result = pickedObjects[i]
              break
            }
          }
          cartesian = result.position
          if (!cartesian) {
            cartesian = targetSdk.viewer.scene.globe.pick(ray, targetSdk.viewer.scene);
          }
        }
      }
      contentElm.style['background-position-x'] = `${-sdk.viewer.container.clientWidth + left + 4}px`;

      contentElm.style['background-position-y'] = `${-sdk.viewer.container.clientHeight + top - 2}px`;
      // this.entity.position = cartesian
      if (cartesian) {
        let degrees = tools.cartesian3Towgs84(cartesian, sdk.viewer)
        let coordinateSystem = getCoordinateSystem()
        let positionType = getDMS()
        if (coordinateSystem === 'EPSG:4326') {
          position = {
            x: degrees.lng,
            y: degrees.lat,
            z: degrees.alt
          }
          // contentElm.innerHTML = `<div style='width: 150px;position: absolute; z-index: 777; color: #ff0000; font-size: 12px; left:${left + 20}px; top:${top + 10}px;'><p style='margin: 0;'>经度：${degrees.lng.toFixed(6)}°</p><p style='margin: 0;'>维度：${degrees.lat.toFixed(6)}°</p><p style='margin: 0;'>海拔：${degrees.alt.toFixed(2)} m</p></div>`
          switch (positionType || '度') {
            case '度':
              contentElm.innerHTML = `<div class='mousePosiWords' style='width: 150px;position: absolute; z-index: 777; color: #ffffff; font-size: 12px; left:${left + 20}px; top:${top + 10}px;'><p style='margin: 0;'>经度：${degrees.lng.toFixed(8)}°</p><p style='margin: 0;'>维度：${degrees.lat.toFixed(8)}°</p><p style='margin: 0;'>海拔：${degrees.alt.toFixed(2)} m</p></div>`
              break;
            case '度分':
              contentElm.innerHTML = `<div class='mousePosiWords' style='width: 150px;position: absolute; z-index: 777; color: #ffffff; font-size: 12px; left:${left + 20}px; top:${top + 10}px;'><p style='margin: 0;'>经度：${proj.degreesToDMS(degrees.lng, true)}</p><p style='margin: 0;'>维度：${proj.degreesToDMS(degrees.lat, true)}</p><p style='margin: 0;'>海拔：${degrees.alt.toFixed(2)} m</p></div>`
              break;
            case '度分秒':
              contentElm.innerHTML = `<div class='mousePosiWords' style='width: 150px;position: absolute; z-index: 777; color: #ffffff; font-size: 12px; left:${left + 20}px; top:${top + 10}px;'><p style='margin: 0;'>经度：${proj.degreesToDMS(degrees.lng, false)}</p><p style='margin: 0;'>维度：${proj.degreesToDMS(degrees.lat, false)}</p><p style='margin: 0;'>海拔：${degrees.alt.toFixed(2)} m</p></div>`
              break;
            default:
              break;
          }
        }
        else {
          // let result = tools.convert([{ x: degrees.lng, y: degrees.lat, z: degrees.alt }], 'EPSG:4326', coordinateSystem)
          let result = tools.convert([{ x: degrees.lng, y: degrees.lat, z: degrees.alt }], 'EPSG:4326', posiToCoordinate(coordinateSystem, degrees))
          position = result.points[0]
          contentElm.innerHTML = `<div class='mousePosiWords' style='width: 150px;position: absolute; z-index: 777; color: #ffffff; font-size: 12px; left:${left + 20}px; top:${top + 10}px;'><p style='margin: 0;'>x：${position.x.toFixed(2)}</p><p style='margin: 0;'>y：${position.y.toFixed(2)}</p><p style='margin: 0;'>z：${position.z.toFixed(2)}</p></div>`
        }
      }
      else {
        let coordinateSystem = getCoordinateSystem()
        if (coordinateSystem === 'EPSG:4326') {
          contentElm.innerHTML = `<div class='mousePosiWords' style='width: 150px;position: absolute; z-index: 777; color: #ffffff; font-size: 12px; left:${left + 20}px; top:${top + 10}px;'><p style='margin: 0;'>经度：-</p><p style='margin: 0;'>维度：-</p><p style='margin: 0;'>海拔：-</p></div>`
        }
        else {
          contentElm.innerHTML = `<div class='mousePosiWords' style='width: 150px;position: absolute; z-index: 777; color: #ffffff; font-size: 12px; left:${left + 20}px; top:${top + 10}px;'><p style='margin: 0;'>x：-</p><p style='margin: 0;'>y：-</p><p style='margin: 0;'>z：-</p></div>`
        }
      }
    }

    animateUpdate()
    function animateUpdate() {
      requestAnimationFrameEventId = requestAnimationFrame(
        animateUpdate
      )
      getPosition()
    }
  }
  else {
    if (event) {
      event.destroy()
    }
    if (event2) {
      event2.destroy()
      event2 = undefined
    }
    if (MouseCoordinateElm) {
      sdk.viewer.container.removeChild(MouseCoordinateElm)
      MouseCoordinateElm = undefined
    }
    if (requestAnimationFrameEventId) {
      cancelAnimationFrame(requestAnimationFrameEventId)
    }
  }
}

export { MouseCoordinate }