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

/**
 * 鼠标坐标
 */
import Tools from "../../Tools";
import { getCoordinateSystem } 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)
  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 = '#ff0000';
      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 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()
        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>`
        }
        else {
          let result = tools.convert([{ x: degrees.lng, y: degrees.lat, z: degrees.alt }], 'EPSG:4326', coordinateSystem)
          position = result.points[0]
          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;'>x：${position.x.toFixed(6)}</p><p style='margin: 0;'>y：${position.y.toFixed(6)}</p><p style='margin: 0;'>z：${position.z.toFixed(6)}</p></div>`
        }
      }
      else {
        let coordinateSystem = getCoordinateSystem()
        if (coordinateSystem === 'EPSG:4326') {
          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;'>经度：-</p><p style='margin: 0;'>维度：-</p><p style='margin: 0;'>海拔：-</p></div>`
        }
        else {
          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;'>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 }