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-08-25 16:54:36 +08:00
parent a3b2f14620
commit 2a531f9e32
6 changed files with 44 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
env.js
View File

@@ -9,7 +9,9 @@ const currentEnv = import.meta.env?.MODE || process.env.NODE_ENV;
// 环境配置映射
const envConfig = {
[ENV.DEV]: {
baseURL: 'http://1.95.137.212:8081',//http://192.168.2.56:8081
//baseURL: 'http://1.95.137.212:8081',//http://192.168.2.56:8081
baseURL: 'http://192.168.2.249:8081',//http://192.168.2.56:8081
////baseURL: 'http://1.95.137.212:59015',//http://192.168.2.56:8081
//WS_URL: 'ws://192.168.2.59:9002/ws/',
//mqtt_url: "ws://1.95.137.212:8083/mqtt",
@@ -17,8 +19,10 @@ const envConfig = {
//baseURL: 'http://1.95.137.212:8081',//http://192.168.2.56:8081
//baseURL: 'http://192.168.2.62:8081',//http://192.168.2.56:8081
WS_URL: 'ws://192.168.2.249:9002/ws/',
//baseURL: 'https://serviceri.satabot.com',
WS_URL: 'ws://1.95.137.212:9002/ws/',
//WS_URL: 'ws://1.95.137.212:9002/ws/',
//WS_URL: 'ws://192.168.2.62:9002/ws/',
mqtt_url: "ws://1.95.137.212:8083/mqtt",
geoserver_url: "http://1.95.137.212:7900/geoserver"

10
src/components/Map.jsx
View File

@@ -1,4 +1,4 @@
import React, { useEffect, useRef, useState, useMemo, useImperativeHandle, forwardRef, useCallback } from 'react';
import React, { useEffect, useRef, useState, useMemo, useImperativeHandle, forwardRef, useCallback } from 'react';
import carImg from '../assets/images/carplane.png';
import inspectImg from "../assets/images/inspectCar.png"
import planeImg from '../assets/images/planeicon.png';
@@ -27,7 +27,7 @@ const CYAN_GLOW_COLOR = new window.Cesium.Color(
);
window.Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNjk0NjI1MC0wZGYyLTQ1YzItYjJmZi0wY2M5ODEwODllYzIiLCJpZCI6Mzk3MTQxLCJpYXQiOjE3NzI1MjkwMjV9.U6qmakhDgXJVXwLFyWzSxAUOFZRrDkIsRUPP6CCdnKg";
const CesiumMap = React.forwardRef(({ ifClear, ifClearPlanLine, ifClearNavLine, finishPoint, drawRealTime, realtimePosition, realtimeType, pathPoints = [], devices = [], onCameraClick, focusLocation, points = [], markedPoints = [], onPathChange, from, onClearDraw }, ref) => {
const CesiumMap = React.forwardRef(({ ifClear, ifClearPlanLine, ifClearNavLine, finishPoint, drawRealTime, realtimePosition, realtimeType, pathPoints = [], devices = [], onCameraClick, focusLocation, points = [], markedPoints = [], onPathChange, from, onClearDraw, onMarkPoint }, ref) => {
const containerRef = useRef(null);
const viewerRef = useRef(null);
const tooltipRef = useRef(null);
@@ -153,6 +153,7 @@ const CesiumMap = React.forwardRef(({ ifClear, ifClearPlanLine, ifClearNavLine,
}
});
}
console.log(newPoints, "newPoints")
onPathChange && onPathChange(newPoints);
};
@@ -1416,8 +1417,8 @@ const CesiumMap = React.forwardRef(({ ifClear, ifClearPlanLine, ifClearNavLine,
}, window.Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.setInputAction((movement) => {
//if (from !== "device-control")
return;
if (from !== "deviceStatus")
return;
const cartesian = viewer.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);
if (!cartesian) return;
const cartographic = window.Cesium.Cartographic.fromCartesian(cartesian);
@@ -1427,6 +1428,7 @@ const CesiumMap = React.forwardRef(({ ifClear, ifClearPlanLine, ifClearNavLine,
const newPoints = [...drawPoints, newPoint];
setDrawPoints(newPoints);
updateDrawPath(newPoints);
onMarkPoint?.({ lon, lat });
}, window.Cesium.ScreenSpaceEventType.LEFT_CLICK);
if (onClearDraw) {

4
src/components/devices/DeviceOverviewPage.tsx
View File

@@ -750,8 +750,8 @@ export default function DeviceOverviewPage() {
String(option?.label || "").toLowerCase().includes(input.toLowerCase())
}
options={[
{ label: <span>devices.robot</span>, options: devices.map(item => ({ value: item.device_sn || item.serialNumber, label: item.deviceAlias || item.deviceName || '未知设备' })) },
{ label: <span>constants.uav</span>, options: planedevices.map(item => ({ value: item.device_sn, label: item.drone_callsign || item.callsign || '未知设备' })) },
{ label: <span>{t('devices.robot')}</span>, options: devices.map(item => ({ value: item.device_sn || item.serialNumber, label: item.deviceAlias || item.deviceName || '未知设备' })) },
{ label: <span>{t('constants.uav')}</span>, options: planedevices.map(item => ({ value: item.device_sn, label: item.drone_callsign || item.callsign || '未知设备' })) },
]}
/>

30
src/components/devices/DeviceStatusPage.tsx
View File

@@ -123,7 +123,8 @@ export default function DeviceStatusPage() {
const [isSaveModalVisible, setIsSaveModalVisible] = useState(false); // 保存模态框可见性
const [plotName, setPlotName] = useState(''); // 地块名称
const [isSaving, setIsSaving] = useState(false); // 是否正在保存
const mapRef = useRef(null); // 地图 ref
const mapRef = useRef(null);
const clearDrawRef = useRef<(() => void) | null>(null); // 地图 ref
const location = useLocation();
const queryParams = new URLSearchParams(location.search);
@@ -658,13 +659,34 @@ export default function DeviceStatusPage() {
messageApi.success(t('devices.pointMarked', { count: markedPoints.length + 1 }));
};
// Map click to add marked point
const handleMapMarkPoint = (point) => {
setMarkedPoints([...markedPoints, { lon: Number(point.lon), lat: Number(point.lat) }]);
messageApi.success(t('devices.pointMarked', { count: markedPoints.length + 1 }));
};
// 清空标记点
const handleClearPoints = () => {
setMarkedPoints([]);
setCompleteFlag(false);
setSavePath(null);
clearDrawRef.current?.();
};
const getPathPoints = (coords) => {
console.log("getPathPoints", coords)
//setPathPoints(coords);
if (!coords || coords.length === 0) return;
const newWps = coords.map((p, i) => ({
id: i + 1,
lon: p.lon.toFixed(6),
lat: p.lat.toFixed(6),
}));
console.log("newWps", newWps)
//setWaypoints(newWps);
};
// 完成功能 - 调用路径规划接口
const handleSave = async () => {
if (!plotName.trim()) {
@@ -1034,11 +1056,13 @@ export default function DeviceStatusPage() {
markedPoints={markedPoints}
realtimePosition={realtimePosition}
realtimeType={realtimeType}
onPathChange={getPathPoints}
drawRealTime={true}
finishPoint={arrivedPoint}
ifClearNavLine={clearNavLine}
ifClearPlanLine={clearPlanLine}
from="deviceStatus"
from="deviceStatus" onMarkPoint={handleMapMarkPoint} onClearDraw={(fn) => { clearDrawRef.current = fn; }}
/>
</Card>
</Col>
@@ -1324,7 +1348,7 @@ export default function DeviceStatusPage() {
finishPoint={arrivedPoint}
ifClearNavLine={clearNavLine}
ifClearPlanLine={clearPlanLine}
from="deviceStatus"
from="deviceStatus" onMarkPoint={handleMapMarkPoint} onClearDraw={(fn) => { clearDrawRef.current = fn; }}
/>
</Card>

3
src/locales/en/index.ts
View File

@@ -241,6 +241,7 @@ const en = {
},
devices: {
deviceManagement: 'Device Management',
distributable: 'Distributable',
deviceOverview: 'Device Overview',
deviceStatus: 'Device Status',
waylineTask: 'Wayline Tasks',
@@ -1290,7 +1291,7 @@ const en = {
noneControl: 'None Control jurisdiction',
fixed2ControlFixed2: 'Fixed2 Control 请求 超时 Fixed2',
controlFailed:"请求被拒绝",
controlFailed: "controlFailed",
},
video: {
onlineVideo: 'Online Video',

1
src/locales/zh/index.ts
View File

@@ -244,6 +244,7 @@ const zh = {
},
devices: {
deviceManagement: '设备管理',
distributable: '可调度',
deviceOverview: '设备总览',
deviceStatus: '设备状态',
waylineTask: '航线任务',