IOT/web-Iot
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

支持在地图上 可以看到所有地方的经纬度

Browse Source
This commit is contained in:
mmc
2026-09-04 14:36:57 +08:00
parent 4a5d55bc58
commit ab193a3be9
1 changed files with 52 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/Map.jsx
View File

@@ -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) => `
<div style="margin-bottom:4px;"><strong>${device.name}:</strong> ${device.value}${device.unit}</div>
`).join('');
}
tooltip.innerHTML = `
<div style="font-weight:600;margin-bottom:6px;">🤖 ${robot.deviceAlias || robot.serialNumber || robot.name}</div>
${deviceValuesHTML ? `<div style="margin-top:8px;"><strong>${t('devices.deviceData')}:</strong>${deviceValuesHTML}</div>` : ''}
<div>${t('systemSetting.longitude')}：${lonStr}</div>
<div>${t('systemSetting.latitude')}：${latStr}</div>
`;
} else {
tooltip.innerHTML = `
<div style="font-weight:600;margin-bottom:4px;">📍 ${t('systemSetting.longitude')}：${lonStr}</div>
<div style="font-weight:600;">${t('systemSetting.latitude')}：${latStr}</div>
`;
}
}
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";
}