diff --git a/src/components/Map.jsx b/src/components/Map.jsx index a24eba2..4763133 100644 --- a/src/components/Map.jsx +++ b/src/components/Map.jsx @@ -527,6 +527,52 @@ const CesiumMap = React.forwardRef(({ ifClear, ifClearPlanLine, ifClearNavLine, `; } +const getCursorLngLat = (viewer, screenPos) => { + const cartesian = viewer.camera.pickEllipsoid(screenPos, viewer.scene.globe.ellipsoid); + if (!window.Cesium.defined(cartesian)) return { lon: NaN, lat: NaN }; + const cartographic = window.Cesium.Cartographic.fromCartesian(cartesian); + return { + lon: window.Cesium.Math.toDegrees(cartographic.longitude), + lat: window.Cesium.Math.toDegrees(cartographic.latitude), + }; + }; + + function showCoordinateTooltip(tooltip, position, t, lon, lat, robot) { + tooltip.style.display = "block"; + tooltip.style.left = position.x + 12 + "px"; + tooltip.style.top = position.y + 12 + "px"; + tooltip.style.whiteSpace = "nowrap"; + + const lonStr = Number.isFinite(lon) ? lon.toFixed(6) : "--"; + const latStr = Number.isFinite(lat) ? lat.toFixed(6) : "--"; + + if (robot) { + const statusMap = { + 1: { text: t('common.working'), color: "#10b981" }, + 2: { text: t('devices.idle'), color: "#f59e0b" }, + 3: { text: t('devices.offline'), color: "#f87171" } + }; + const status = statusMap[robot.feStatus] || statusMap[1]; + let deviceValuesHTML = ''; + if (robot.devicevalue && robot.devicevalue.length > 0) { + deviceValuesHTML = robot.devicevalue.map((device) => ` +
${device.name}: ${device.value}${device.unit}
+ `).join(''); + } + tooltip.innerHTML = ` +
🤖 ${robot.deviceAlias || robot.serialNumber || robot.name}
+ ${deviceValuesHTML ? `
${t('devices.deviceData')}:${deviceValuesHTML}
` : ''} +
${t('systemSetting.longitude')}:${lonStr}
+
${t('systemSetting.latitude')}:${latStr}
+ `; + } else { + tooltip.innerHTML = ` +
📍 ${t('systemSetting.longitude')}:${lonStr}
+
${t('systemSetting.latitude')}:${latStr}
+ `; + } + } + function fetchPublishedLayers() { const baseUrl = envConfig.geoserver_url; //const baseUrl = 'https://gis.caasrobot.com/geoserver'; @@ -1569,9 +1615,12 @@ const CesiumMap = React.forwardRef(({ ifClear, ifClearPlanLine, ifClearNavLine, handler.setInputAction((movement) => { const picked = viewer.scene.pick(movement.endPosition); - if (window.Cesium.defined(picked) && picked.id?.properties?.robot) { - const robot = picked.id.properties.robot.getValue(); - showRobotTooltip(tooltipRef.current, robot, movement.endPosition, t); + const pickedRobot = (window.Cesium.defined(picked) && picked.id?.properties?.robot) ? picked.id.properties.robot.getValue() : null; + const { lon, lat } = getCursorLngLat(viewer, movement.endPosition); + if (window.Cesium.defined(lon) && Number.isFinite(lon)) { + showCoordinateTooltip(tooltipRef.current, movement.endPosition, t, lon, lat, pickedRobot); + } else if (pickedRobot) { + showCoordinateTooltip(tooltipRef.current, movement.endPosition, t, NaN, NaN, pickedRobot); } else { tooltipRef.current.style.display = "none"; }