ivan-igorevich/dc-observatio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Прототип страницы расчета ПУУД

Browse Source
This commit is contained in:
emelianov
2026-06-15 11:58:49 +03:00
parent 3b1a13e532
commit 07ba650e03
11 changed files with 550 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/pcp-ui-service/src/main/kotlin/space/nstart/pcp/slots_service/service/DynamicPlanService.kt
+3 -2
View File
@@ -9,6 +9,7 @@ import space.nstart.pcp.slots_service.configuration.CustomErrorException
import space.nstart.pcp.slots_service.dto.dynamicplan.DynamicPlanCalculationRequestDTO
import tools.jackson.databind.JsonNode
import tools.jackson.databind.ObjectMapper
import java.net.URI
import java.net.URLEncoder
import java.nio.charset.StandardCharsets
import java.util.UUID
@@ -118,7 +119,7 @@ class DynamicPlanService(webClientBuilderProvider: ObjectProvider<WebClient.Buil
return webClientBuilder.build()
.get()
.uri("$ballisticsServiceUrl/api/angular-motion/satellites$timeParam")
.uri(URI.create("$ballisticsServiceUrl/api/angular-motion/satellites$timeParam"))
.retrieve()
.onStatus({ status -> status.isError }) { response ->
response.bodyToMono(String::class.java)
@@ -132,7 +133,7 @@ class DynamicPlanService(webClientBuilderProvider: ObjectProvider<WebClient.Buil
fun getAngularMotionFlightLine(satelliteId: Long, time: String): JsonNode =
webClientBuilder.build()
.get()
.uri("$ballisticsServiceUrl/api/angular-motion/satellites/$satelliteId/flight-line?time=${URLEncoder.encode(time, StandardCharsets.UTF_8)}")
.uri(URI.create("$ballisticsServiceUrl/api/angular-motion/satellites/$satelliteId/flight-line?time=${URLEncoder.encode(time, StandardCharsets.UTF_8)}"))
.retrieve()
.onStatus({ status -> status.isError }) { response ->
response.bodyToMono(String::class.java)
services/pcp-ui-service/src/main/resources/static/angular_motion_scripts.js
Vendored
+213 -80
View File
@@ -5,6 +5,10 @@
flightLine: [],
picking: false,
result: null,
viewer: null,
mapDataSource: null,
pickHandler: null,
cursorCoordsPanel: null,
};
function el(id) {
@@ -56,6 +60,15 @@
return value && value.length === 16 ? `${value}:00` : value;
}
function toDateTimeInputValue(value) {
return text(value).slice(0, 16);
}
function normalizeDateTimeSeconds(value) {
const textValue = text(value);
return textValue && textValue.length === 16 ? `${textValue}:00` : textValue;
}
function formatDateTime(value) {
return text(value, '-').replace('T', ' ');
}
@@ -96,9 +109,22 @@
select.value = previous;
}
state.selectedSatellite = satellites.find(item => String(item.satelliteId) === select.value) || satellites[0];
ensureTimeInsideSelectedSatelliteAvailability();
renderSatelliteMeta();
}
function ensureTimeInsideSelectedSatelliteAvailability() {
const sat = state.selectedSatellite;
if (!sat?.availabilityStart || !sat?.availabilityStop) return;
const current = normalizeDateTimeSeconds(localDateTimeValue());
const start = normalizeDateTimeSeconds(sat.availabilityStart);
const stop = normalizeDateTimeSeconds(sat.availabilityStop);
if (!current || current < start || current > stop) {
el('angular-motion-time').value = toDateTimeInputValue(start);
}
}
function renderSatelliteMeta() {
const sat = state.selectedSatellite;
el('angular-motion-satellite-meta').textContent = sat
@@ -118,98 +144,211 @@
el('angular-motion-map-meta').textContent = state.flightLine.length > 0
? `Трасса и полосы обзора на интервале ${formatDateTime(time)} ± 5 минут.`
: 'Нет данных трассы полета для выбранного КА и времени.';
drawMap();
drawMap(true);
}
function lonToX(lon, width) {
return (Number(lon) + 180) / 360 * width;
function initMap() {
if (typeof Cesium === 'undefined') {
el('angular-motion-map-meta').textContent = 'Библиотека Cesium не загружена.';
return;
}
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(20, 35, 190, 80);
state.viewer = new Cesium.Viewer('angular-motion-map', {
animation: false,
timeline: false,
fullscreenButton: false,
geocoder: false,
homeButton: false,
infoBox: false,
navigationHelpButton: false,
sceneModePicker: false,
selectionIndicator: false,
baseLayerPicker: false,
sceneMode: Cesium.SceneMode.SCENE2D,
...naturalEarthLayerOptions(),
});
state.viewer.scene.globe.enableLighting = false;
state.viewer.scene.requestRenderMode = true;
state.mapDataSource = new Cesium.CustomDataSource('angular-motion-map-data');
state.viewer.dataSources.add(state.mapDataSource);
initCursorCoordinates();
state.pickHandler = new Cesium.ScreenSpaceEventHandler(state.viewer.scene.canvas);
state.pickHandler.setInputAction(function (movement) {
if (!state.picking) return;
const cartesian = pickGlobePoint(movement.position);
if (!cartesian) return;
const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
el('angular-motion-lat').value = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);
el('angular-motion-lon').value = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);
setPicking(false);
drawMap(false);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
drawMap(false);
}
function latToY(lat, height) {
return (90 - Number(lat)) / 180 * height;
function initCursorCoordinates() {
state.cursorCoordsPanel = document.createElement('div');
state.cursorCoordsPanel.className = 'angular-motion-cursor-coords-panel';
state.cursorCoordsPanel.textContent = 'Координаты: наведите курсор на карту';
state.viewer.cesiumWidget.container.appendChild(state.cursorCoordsPanel);
state.viewer.scene.canvas.addEventListener('mousemove', event => {
const rect = state.viewer.scene.canvas.getBoundingClientRect();
const screenPosition = new Cesium.Cartesian2(
event.clientX - rect.left,
event.clientY - rect.top
);
state.cursorCoordsPanel.textContent = formatCursorCoordinates(screenPosition);
});
state.viewer.scene.canvas.addEventListener('mouseleave', () => {
state.cursorCoordsPanel.textContent = 'Координаты: курсор вне карты';
});
}
function canvasToLonLat(event) {
const canvas = el('angular-motion-map');
const rect = canvas.getBoundingClientRect();
const scaleX = canvas.width / rect.width;
const scaleY = canvas.height / rect.height;
const x = (event.clientX - rect.left) * scaleX;
const y = (event.clientY - rect.top) * scaleY;
function naturalEarthLayerOptions() {
const url = '/webjars/cesium/1.107.2/Build/Cesium/Assets/Textures/NaturalEarthII';
if (Cesium.ImageryLayer?.fromProviderAsync && Cesium.TileMapServiceImageryProvider?.fromUrl) {
return {
baseLayer: Cesium.ImageryLayer.fromProviderAsync(
Cesium.TileMapServiceImageryProvider.fromUrl(url)
),
};
}
return {
lon: x / canvas.width * 360 - 180,
lat: 90 - y / canvas.height * 180,
imageryProvider: new Cesium.TileMapServiceImageryProvider({ url }),
};
}
function drawGrid(ctx, width, height) {
ctx.clearRect(0, 0, width, height);
ctx.fillStyle = '#f8fbff';
ctx.fillRect(0, 0, width, height);
ctx.strokeStyle = '#e2e8f0';
ctx.lineWidth = 1;
for (let lon = -180; lon <= 180; lon += 30) {
const x = lonToX(lon, width);
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, height);
ctx.stroke();
function pickGlobePoint(position) {
if (!state.viewer || !position) return null;
const scene = state.viewer.scene;
if (scene.pickPositionSupported) {
const picked = scene.pickPosition(position);
if (Cesium.defined(picked)) return picked;
}
for (let lat = -60; lat <= 60; lat += 30) {
const y = latToY(lat, height);
ctx.beginPath();
ctx.moveTo(0, y);
ctx.lineTo(width, y);
ctx.stroke();
}
ctx.fillStyle = '#94a3b8';
ctx.font = '12px sans-serif';
ctx.fillText('Широта / долгота, схематичная проекция', 12, 20);
return state.viewer.camera.pickEllipsoid(position, scene.globe.ellipsoid);
}
function drawLine(ctx, points, latKey, lonKey, color, width) {
const valid = points.filter(point => Number.isFinite(Number(point[latKey])) && Number.isFinite(Number(point[lonKey])));
if (valid.length < 2) return;
ctx.strokeStyle = color;
ctx.lineWidth = width;
ctx.beginPath();
valid.forEach((point, index) => {
const x = lonToX(point[lonKey], ctx.canvas.width);
const y = latToY(point[latKey], ctx.canvas.height);
if (index === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
function formatDegree(value, positiveSuffix, negativeSuffix) {
if (!Number.isFinite(value)) {
return '-';
}
const suffix = value >= 0 ? positiveSuffix : negativeSuffix;
return `${Math.abs(value).toFixed(6)}° ${suffix}`;
}
function formatCursorCoordinates(screenPosition) {
const point = pickGlobePoint(screenPosition);
if (!Cesium.defined(point)) {
return 'Координаты: -';
}
const cartographic = state.viewer.scene.globe.ellipsoid.cartesianToCartographic(point);
if (!Cesium.defined(cartographic)) {
return 'Координаты: -';
}
const lon = Cesium.Math.toDegrees(cartographic.longitude);
const lat = Cesium.Math.toDegrees(cartographic.latitude);
return `Lon: ${formatDegree(lon, 'E', 'W')} | Lat: ${formatDegree(lat, 'N', 'S')}`;
}
function validDegreesArray(points, latKey, lonKey) {
const result = [];
(Array.isArray(points) ? points : []).forEach(point => {
const lat = Number(point[latKey]);
const lon = Number(point[lonKey]);
if (Number.isFinite(lat) && Number.isFinite(lon)) {
result.push(lon, lat);
}
});
ctx.stroke();
return result;
}
function drawTarget(ctx) {
function addPolyline(points, latKey, lonKey, color, width, name) {
if (!state.mapDataSource) return;
const degrees = validDegreesArray(points, latKey, lonKey);
if (degrees.length < 4) return;
state.mapDataSource.entities.add({
name,
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray(degrees),
width,
material: color,
clampToGround: true,
},
});
}
function addTarget() {
if (!state.mapDataSource) return;
const lat = Number(el('angular-motion-lat').value);
const lon = Number(el('angular-motion-lon').value);
if (!Number.isFinite(lat) || !Number.isFinite(lon)) return;
const x = lonToX(lon, ctx.canvas.width);
const y = latToY(lat, ctx.canvas.height);
ctx.strokeStyle = '#dc2626';
ctx.fillStyle = '#dc2626';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.arc(x, y, 5, 0, Math.PI * 2);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(x - 9, y);
ctx.lineTo(x + 9, y);
ctx.moveTo(x, y - 9);
ctx.lineTo(x, y + 9);
ctx.stroke();
state.mapDataSource.entities.add({
name: 'Точка съемки',
position: Cesium.Cartesian3.fromDegrees(lon, lat, 0),
point: {
pixelSize: 10,
color: Cesium.Color.RED,
outlineColor: Cesium.Color.WHITE,
outlineWidth: 2,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
},
label: {
text: 'ЦЛМ',
font: '12px sans-serif',
fillColor: Cesium.Color.RED,
outlineColor: Cesium.Color.WHITE,
outlineWidth: 2,
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
pixelOffset: new Cesium.Cartesian2(0, -18),
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
},
});
}
function drawMap() {
const canvas = el('angular-motion-map');
const ctx = canvas.getContext('2d');
drawGrid(ctx, canvas.width, canvas.height);
function fitMapToData() {
if (!state.viewer) return;
const points = Array.isArray(state.flightLine) ? state.flightLine : [];
drawLine(ctx, points, 'leftLatitudeDeg', 'leftLongitudeDeg', '#93c5fd', 1.5);
drawLine(ctx, points, 'rightLatitudeDeg', 'rightLongitudeDeg', '#93c5fd', 1.5);
drawLine(ctx, points, 'latitudeDeg', 'longitudeDeg', '#0f172a', 2.5);
drawTarget(ctx);
const lats = [];
const lons = [];
points.forEach(point => {
['latitudeDeg', 'leftLatitudeDeg', 'rightLatitudeDeg'].forEach(key => {
const value = Number(point[key]);
if (Number.isFinite(value)) lats.push(value);
});
['longitudeDeg', 'leftLongitudeDeg', 'rightLongitudeDeg'].forEach(key => {
const value = Number(point[key]);
if (Number.isFinite(value)) lons.push(value);
});
});
if (lats.length === 0 || lons.length === 0) return;
const minLat = Math.max(-89.0, Math.min(...lats) - 1.0);
const maxLat = Math.min(89.0, Math.max(...lats) + 1.0);
const minLon = Math.max(-180.0, Math.min(...lons) - 1.0);
const maxLon = Math.min(180.0, Math.max(...lons) + 1.0);
if (maxLon - minLon > 180.0) return;
state.viewer.camera.flyTo({
destination: Cesium.Rectangle.fromDegrees(minLon, minLat, maxLon, maxLat),
duration: 0.4,
});
}
function drawMap(fit = false) {
if (!state.mapDataSource || typeof Cesium === 'undefined') return;
state.mapDataSource.entities.removeAll();
const points = Array.isArray(state.flightLine) ? state.flightLine : [];
addPolyline(points, 'leftLatitudeDeg', 'leftLongitudeDeg', Cesium.Color.CORNFLOWERBLUE.withAlpha(0.85), 2, 'Левая граница полосы');
addPolyline(points, 'rightLatitudeDeg', 'rightLongitudeDeg', Cesium.Color.CORNFLOWERBLUE.withAlpha(0.85), 2, 'Правая граница полосы');
addPolyline(points, 'latitudeDeg', 'longitudeDeg', Cesium.Color.YELLOW, 3, 'Трасса полета');
addTarget();
if (fit) fitMapToData();
state.viewer.scene.requestRender();
}
function setPicking(value) {
@@ -228,6 +367,7 @@
}
function payloadFromForm() {
ensureTimeInsideSelectedSatelliteAvailability();
const mode = el('angular-motion-mode').value;
const payload = {
satelliteId: Number(el('angular-motion-satellite').value),
@@ -322,28 +462,21 @@
function init() {
el('angular-motion-time').value = nowLocalInput();
initMap();
el('angular-motion-form').addEventListener('submit', calculate);
el('angular-motion-refresh-satellites').addEventListener('click', () => loadSatellites().catch(error => showAlert(error.message || String(error))));
el('angular-motion-time').addEventListener('change', () => loadSatellites().catch(error => showAlert(error.message || String(error))));
el('angular-motion-satellite').addEventListener('change', () => {
state.selectedSatellite = state.satellites.find(item => String(item.satelliteId) === el('angular-motion-satellite').value) || null;
ensureTimeInsideSelectedSatelliteAvailability();
renderSatelliteMeta();
loadFlightLine().catch(error => showAlert(error.message || String(error)));
});
el('angular-motion-mode').addEventListener('change', modeChanged);
el('angular-motion-pick-from-map').addEventListener('click', () => setPicking(!state.picking));
el('angular-motion-map').addEventListener('click', event => {
if (!state.picking) return;
const coord = canvasToLonLat(event);
el('angular-motion-lat').value = coord.lat.toFixed(6);
el('angular-motion-lon').value = coord.lon.toFixed(6);
setPicking(false);
drawMap();
});
['angular-motion-lat', 'angular-motion-lon'].forEach(id => el(id).addEventListener('input', drawMap));
['angular-motion-lat', 'angular-motion-lon'].forEach(id => el(id).addEventListener('input', () => drawMap(false)));
el('angular-motion-export-csv').addEventListener('click', exportCsv);
modeChanged();
drawMap();
loadSatellites().catch(error => showAlert(error.message || String(error)));
}
services/pcp-ui-service/src/main/resources/static/css/angular-motion.css
+31 -1
View File
@@ -23,18 +23,48 @@
}
.angular-motion-map {
position: relative;
width: 100%;
height: 420px;
min-height: 320px;
border: 1px solid #dbe4f0;
border-radius: 0.5rem;
background: #f8fbff;
cursor: crosshair;
overflow: hidden;
}
.angular-motion-map.angular-motion-pick-active {
outline: 3px solid rgba(13, 110, 253, 0.25);
}
.angular-motion-map .cesium-viewer,
.angular-motion-map .cesium-widget,
.angular-motion-map .cesium-widget canvas {
width: 100%;
height: 100%;
}
.angular-motion-map.angular-motion-pick-active,
.angular-motion-map.angular-motion-pick-active canvas {
cursor: crosshair;
}
.angular-motion-cursor-coords-panel {
position: absolute;
top: 10px;
right: 10px;
z-index: 1000;
max-width: calc(100% - 20px);
padding: 6px 10px;
border-radius: 4px;
background: rgba(0, 0, 0, 0.75);
color: #fff;
font-size: 12px;
line-height: 1.3;
pointer-events: none;
white-space: nowrap;
}
.angular-motion-result-card {
min-height: 360px;
}
services/pcp-ui-service/src/main/resources/templates/angular-motion.html
+3 -1
View File
@@ -4,6 +4,7 @@
layout:decorate="~{layouts/main-layout}">
<head>
<title>ПУУД</title>
<link href="/webjars/cesium/1.107.2/Build/Cesium/Widgets/widgets.css" rel="stylesheet"/>
<link rel="stylesheet" href="/css/angular-motion.css"/>
</head>
<body>
@@ -123,7 +124,7 @@
</div>
</div>
<div class="card-body">
<canvas id="angular-motion-map" width="980" height="360" class="angular-motion-map" aria-label="Мини-карта трассы и полос обзора"></canvas>
<div id="angular-motion-map" class="angular-motion-map" aria-label="Мини-карта трассы и полос обзора"></div>
</div>
</div>
@@ -166,6 +167,7 @@
</div>
</div>
</div>
<script src="/webjars/cesium/1.107.2/Build/Cesium/Cesium.js"></script>
<script src="/angular_motion_scripts.js"></script>
</th:block>
</body>