241 lines
9.3 KiB
JavaScript
241 lines
9.3 KiB
JavaScript
/**
|
||
* 鼠标坐标
|
||
*/
|
||
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 }
|