Hamza/maps-saas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(tactical): add map visualization layers for peaks, valleys, slope sectors, wadis, roads, urban, and basalt hazards

Browse Source
This commit is contained in:
Hamza-Ayed
2026-08-18 10:56:58 +03:00
parent 6bd0bc0ce5
commit b1ee482830
2 changed files with 565 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/pages/TacticalDefenseView.tsx
+340 -17
View File
@@ -29,7 +29,9 @@ import {
Printer,
FileText,
Compass,
Check
Check,
EyeOff,
Sliders
} from 'lucide-react';
import {
calculateLineOfSight,
@@ -86,6 +88,14 @@ export const TacticalDefenseView: React.FC = () => {
const [terrainLoading, setTerrainLoading] = useState<boolean>(false);
const [copiedReport, setCopiedReport] = useState<boolean>(false);
// Terrain Visual Layers Toggles on Map
const [showPeaksAndValleys, setShowPeaksAndValleys] = useState<boolean>(true);
const [showSlopeSectors, setShowSlopeSectors] = useState<boolean>(true);
const [showNaturalObstacles, setShowNaturalObstacles] = useState<boolean>(true);
const [showRoadCorridors, setShowRoadCorridors] = useState<boolean>(true);
const [showUrbanZones, setShowUrbanZones] = useState<boolean>(true);
const [showHazardousGround, setShowHazardousGround] = useState<boolean>(true);
// 2. Line of Sight State
const [losPointA, setLosPointA] = useState<[number, number] | null>([31.9539, 35.9106]);
const [losPointB, setLosPointB] = useState<[number, number] | null>([32.0125, 35.8540]);
@@ -187,6 +197,8 @@ export const TacticalDefenseView: React.FC = () => {
if (markersRef.current[id]) {
markersRef.current[id].setLngLat([coords[1], coords[0]]);
const el = markersRef.current[id].getElement();
if (el) el.innerText = label;
} else {
const el = document.createElement('div');
el.className = 'tactical-marker';
@@ -223,6 +235,32 @@ export const TacticalDefenseView: React.FC = () => {
if (!map.current) return;
// Terrain Study Center
updateMarker('terrain-c', terrainCenter, '⛰️ مركز دراسة الأرض', '#6366f1', (pos) => setTerrainCenter(pos));
// Terrain Highest & Lowest Points (Dynamic Pins)
if (terrainResult?.highestPoint && showPeaksAndValleys && mode === 'terrain') {
updateMarker(
'terrain-peak',
[terrainResult.highestPoint.lat, terrainResult.highestPoint.lng],
`🔺 ${terrainResult.highestPoint.label}`,
'#0284c7',
() => {}
);
} else {
updateMarker('terrain-peak', null, '', '', () => {});
}
if (terrainResult?.lowestPoint && showPeaksAndValleys && mode === 'terrain') {
updateMarker(
'terrain-valley',
[terrainResult.lowestPoint.lat, terrainResult.lowestPoint.lng],
`🔻 ${terrainResult.lowestPoint.label}`,
'#e11d48',
() => {}
);
} else {
updateMarker('terrain-valley', null, '', '', () => {});
}
// LOS
updateMarker('los-a', losPointA, '📍 راصد A', '#0284c7', (pos) => setLosPointA(pos));
updateMarker('los-b', losPointB, '🎯 هدف B', '#d97706', (pos) => setLosPointB(pos));
@@ -236,7 +274,7 @@ export const TacticalDefenseView: React.FC = () => {
updateMarker('mine-e', mineEnd, '⛔ نهاية حقل الألغام', '#991b1b', (pos) => setMineEnd(pos));
// HLZ
updateMarker('hlz-c', hlzCenter, '🚁 مركز HLZ', '#059669', (pos) => setHlzCenter(pos));
}, [terrainCenter, losPointA, losPointB, viewshedCenter, gunPos, targetPos, mineStart, mineEnd, hlzCenter]);
}, [terrainCenter, terrainResult, showPeaksAndValleys, mode, losPointA, losPointB, viewshedCenter, gunPos, targetPos, mineStart, mineEnd, hlzCenter]);
// Map Initialization
useEffect(() => {
@@ -379,7 +417,7 @@ export const TacticalDefenseView: React.FC = () => {
});
initialMap.on('load', () => {
// 0. Terrain Study Circle Layer
// 0. Terrain Study Circle & Spatial Layers
initialMap.addSource('tactical-terrain-src', {
type: 'geojson',
data: { type: 'FeatureCollection', features: [] }
@@ -391,7 +429,7 @@ export const TacticalDefenseView: React.FC = () => {
source: 'tactical-terrain-src',
paint: {
'fill-color': '#6366f1',
'fill-opacity': 0.15
'fill-opacity': 0.08
}
});
@@ -406,6 +444,84 @@ export const TacticalDefenseView: React.FC = () => {
}
});
// Rich Spatial Feature Layers for Terrain Study (Slope, Wadis, Roads, Urban, Hazards)
initialMap.addSource('tactical-terrain-spatial-src', {
type: 'geojson',
data: { type: 'FeatureCollection', features: [] }
});
initialMap.addLayer({
id: 'tactical-terrain-spatial-poly-fill',
type: 'fill',
source: 'tactical-terrain-spatial-src',
filter: ['==', '$type', 'Polygon'],
paint: {
'fill-color': ['get', 'color'],
'fill-opacity': [
'match',
['get', 'layerType'],
'urban', 0.28,
'hazard', 0.32,
'slope-sector', 0.18,
0.2
]
}
});
initialMap.addLayer({
id: 'tactical-terrain-spatial-poly-line',
type: 'line',
source: 'tactical-terrain-spatial-src',
filter: ['==', '$type', 'Polygon'],
paint: {
'line-color': ['get', 'color'],
'line-width': 2,
'line-dasharray': [3, 2]
}
});
initialMap.addLayer({
id: 'tactical-terrain-spatial-lines',
type: 'line',
source: 'tactical-terrain-spatial-src',
filter: ['==', '$type', 'LineString'],
paint: {
'line-color': ['get', 'color'],
'line-width': [
'match',
['get', 'layerType'],
'road', 4.5,
'wadi', 3.5,
3
],
'line-dasharray': [
'match',
['get', 'layerType'],
'road', ['literal', [1, 0]],
'wadi', ['literal', [2, 1.5]],
['literal', [1, 0]]
]
}
});
initialMap.addLayer({
id: 'tactical-terrain-spatial-labels',
type: 'symbol',
source: 'tactical-terrain-spatial-src',
layout: {
'text-field': ['get', 'title'],
'text-size': 11,
'text-font': ['Noto Sans Bold', 'Open Sans Bold'],
'text-anchor': 'center',
'symbol-placement': 'point'
},
paint: {
'text-color': '#ffffff',
'text-halo-color': '#0f172a',
'text-halo-width': 2
}
});
// 1. Line of Sight Layer
initialMap.addSource('tactical-los-src', {
type: 'geojson',
@@ -556,7 +672,7 @@ export const TacticalDefenseView: React.FC = () => {
setTerrainResult(res);
setTerrainLoading(false);
// Draw sector boundary polygon on map
// 1. Draw sector boundary polygon on map
if (map.current && map.current.getSource('tactical-terrain-src')) {
const points = 48;
const coords: [number, number][] = [];
@@ -586,7 +702,34 @@ export const TacticalDefenseView: React.FC = () => {
.catch(() => setTerrainLoading(false));
};
// Auto-run initial terrain study on mount
// Sync Spatial GeoJSON Features with Active Layer Toggles
useEffect(() => {
if (!map.current || !map.current.getSource('tactical-terrain-spatial-src')) return;
if (!terrainResult?.spatialGeoJson || mode !== 'terrain') {
(map.current.getSource('tactical-terrain-spatial-src') as maplibregl.GeoJSONSource).setData({
type: 'FeatureCollection',
features: []
});
return;
}
const filtered = terrainResult.spatialGeoJson.features.filter((f: any) => {
if (f.properties.category === 'peak' || f.properties.category === 'valley') return showPeaksAndValleys;
if (f.properties.layerType === 'slope-sector') return showSlopeSectors;
if (f.properties.layerType === 'wadi') return showNaturalObstacles;
if (f.properties.layerType === 'road') return showRoadCorridors;
if (f.properties.layerType === 'urban') return showUrbanZones;
if (f.properties.layerType === 'hazard') return showHazardousGround;
return true;
});
(map.current.getSource('tactical-terrain-spatial-src') as maplibregl.GeoJSONSource).setData({
type: 'FeatureCollection',
features: filtered
});
}, [terrainResult, showPeaksAndValleys, showSlopeSectors, showNaturalObstacles, showRoadCorridors, showUrbanZones, showHazardousGround, mode]);
// Auto-run initial terrain study on mount & coordinates change
useEffect(() => {
runTerrainStudy();
}, [terrainCenter, terrainRadius]);
@@ -822,7 +965,7 @@ export const TacticalDefenseView: React.FC = () => {
نصف القطر: ${terrainResult.radiusMeters / 1000} كم | المساحة: ${terrainResult.areaKm2} كم²
طبيعة الأرض: ${terrainResult.terrainClassificationAr}
حالة الحركة والمناورة: ${terrainResult.mobilityStatusAr}
المناسيب: أعلى قمة ${terrainResult.maxElevation}م | أخفض نقطة ${terrainResult.minElevation}م | الفارق التضاريسي ${terrainResult.reliefMeters}م
المناسيب: أعلى قمة ${terrainResult.maxElevation}م (${terrainResult.highestPoint.lat}, ${terrainResult.highestPoint.lng}) | أخفض نقطة ${terrainResult.minElevation}م (${terrainResult.lowestPoint.lat}, ${terrainResult.lowestPoint.lng}) | الفارق التضاريسي ${terrainResult.reliefMeters}م
الانحدار: متوسط ${terrainResult.avgSlopeDegrees}° | أقصى انحدار ${terrainResult.maxSlopeDegrees}°
[الموانع الطبيعية]:
@@ -1051,7 +1194,7 @@ ${terrainResult.tacticalRecommendations.map((r, i) => `${i + 1}. ${r}`).join('\n
<Mountain size={18} /> دراسة الأرض والاستخبارات الجغرافية
</h3>
<p style={{ margin: '4px 0 0 0', fontSize: '0.75rem', color: '#94a3b8' }}>
تحليل طبيعة الأرض، الموانع الطبيعية والصناعية، والمناطق المأهولة
تحليل تضاريسي ملون على الخريطة للموانع الطبيعية، الصناعية، والعمران
</p>
</div>
{terrainResult && (
@@ -1077,6 +1220,145 @@ ${terrainResult.tacticalRecommendations.map((r, i) => `${i + 1}. ${r}`).join('\n
)}
</div>
{/* Map Layer Overlays Control Deck */}
<div style={{
background: 'rgba(99, 102, 241, 0.08)',
border: '1px solid rgba(99, 102, 241, 0.25)',
padding: '10px',
borderRadius: 8
}}>
<div style={{ fontSize: '0.75rem', fontWeight: 800, color: '#a5b4fc', marginBottom: 8, display: 'flex', alignItems: 'center', gap: 6 }}>
<Sliders size={14} /> طبقات الإظهار اللوني على الخريطة:
</div>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
<button
onClick={() => setShowPeaksAndValleys(!showPeaksAndValleys)}
style={{
background: showPeaksAndValleys ? 'rgba(56, 189, 248, 0.2)' : 'rgba(255,255,255,0.05)',
border: showPeaksAndValleys ? '1px solid #38bdf8' : '1px solid rgba(255,255,255,0.1)',
color: showPeaksAndValleys ? '#38bdf8' : '#94a3b8',
padding: '5px 8px',
borderRadius: 6,
fontSize: '0.68rem',
fontWeight: 700,
cursor: 'pointer',
textAlign: 'right',
display: 'flex',
alignItems: 'center',
gap: 4
}}
>
<span>{showPeaksAndValleys ? '✅' : '⬜'}</span>
<span>🔺 أعلى وأخفض نقطة</span>
</button>
<button
onClick={() => setShowSlopeSectors(!showSlopeSectors)}
style={{
background: showSlopeSectors ? 'rgba(34, 197, 94, 0.2)' : 'rgba(255,255,255,0.05)',
border: showSlopeSectors ? '1px solid #22c55e' : '1px solid rgba(255,255,255,0.1)',
color: showSlopeSectors ? '#4ade80' : '#94a3b8',
padding: '5px 8px',
borderRadius: 6,
fontSize: '0.68rem',
fontWeight: 700,
cursor: 'pointer',
textAlign: 'right',
display: 'flex',
alignItems: 'center',
gap: 4
}}
>
<span>{showSlopeSectors ? '✅' : '⬜'}</span>
<span>🚦 ممرات الحركة والانحدار</span>
</button>
<button
onClick={() => setShowNaturalObstacles(!showNaturalObstacles)}
style={{
background: showNaturalObstacles ? 'rgba(6, 182, 212, 0.2)' : 'rgba(255,255,255,0.05)',
border: showNaturalObstacles ? '1px solid #06b6d4' : '1px solid rgba(255,255,255,0.1)',
color: showNaturalObstacles ? '#22d3ee' : '#94a3b8',
padding: '5px 8px',
borderRadius: 6,
fontSize: '0.68rem',
fontWeight: 700,
cursor: 'pointer',
textAlign: 'right',
display: 'flex',
alignItems: 'center',
gap: 4
}}
>
<span>{showNaturalObstacles ? '✅' : '⬜'}</span>
<span>🌊 الأودية والسيول</span>
</button>
<button
onClick={() => setShowRoadCorridors(!showRoadCorridors)}
style={{
background: showRoadCorridors ? 'rgba(245, 158, 11, 0.2)' : 'rgba(255,255,255,0.05)',
border: showRoadCorridors ? '1px solid #f59e0b' : '1px solid rgba(255,255,255,0.1)',
color: showRoadCorridors ? '#fbbf24' : '#94a3b8',
padding: '5px 8px',
borderRadius: 6,
fontSize: '0.68rem',
fontWeight: 700,
cursor: 'pointer',
textAlign: 'right',
display: 'flex',
alignItems: 'center',
gap: 4
}}
>
<span>{showRoadCorridors ? '✅' : '⬜'}</span>
<span>🛣️ الطرق والمحاور</span>
</button>
<button
onClick={() => setShowUrbanZones(!showUrbanZones)}
style={{
background: showUrbanZones ? 'rgba(168, 85, 247, 0.2)' : 'rgba(255,255,255,0.05)',
border: showUrbanZones ? '1px solid #a855f7' : '1px solid rgba(255,255,255,0.1)',
color: showUrbanZones ? '#c084fc' : '#94a3b8',
padding: '5px 8px',
borderRadius: 6,
fontSize: '0.68rem',
fontWeight: 700,
cursor: 'pointer',
textAlign: 'right',
display: 'flex',
alignItems: 'center',
gap: 4
}}
>
<span>{showUrbanZones ? '✅' : '⬜'}</span>
<span>🏙️ التجمعات السكانية</span>
</button>
<button
onClick={() => setShowHazardousGround(!showHazardousGround)}
style={{
background: showHazardousGround ? 'rgba(220, 38, 38, 0.2)' : 'rgba(255,255,255,0.05)',
border: showHazardousGround ? '1px solid #dc2626' : '1px solid rgba(255,255,255,0.1)',
color: showHazardousGround ? '#f87171' : '#94a3b8',
padding: '5px 8px',
borderRadius: 6,
fontSize: '0.68rem',
fontWeight: 700,
cursor: 'pointer',
textAlign: 'right',
display: 'flex',
alignItems: 'center',
gap: 4
}}
>
<span>{showHazardousGround ? '✅' : '⬜'}</span>
<span>🪨 حرات بازلتية وصخور</span>
</button>
</div>
</div>
{/* Terrain Center Coordinate Card */}
<div style={{ background: 'rgba(255,255,255,0.04)', padding: 10, borderRadius: 8, border: '1px solid rgba(99, 102, 241, 0.25)' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
@@ -1192,19 +1474,60 @@ ${terrainResult.tacticalRecommendations.map((r, i) => `${i + 1}. ${r}`).join('\n
</div>
</div>
{/* Highest Peak & Lowest Valley Cards with Direct Map Focus */}
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
<div
onClick={() => {
if (map.current) {
map.current.flyTo({ center: [terrainResult.highestPoint.lng, terrainResult.highestPoint.lat], zoom: 14, pitch: 50 });
}
}}
style={{
background: 'rgba(56, 189, 248, 0.12)',
border: '1px solid #38bdf8',
padding: 8,
borderRadius: 8,
cursor: 'pointer'
}}
>
<div style={{ fontSize: '0.65rem', color: '#7dd3fc', fontWeight: 700 }}>🔺 أعلى قمة تضاريسية</div>
<div style={{ fontSize: '1.05rem', fontWeight: 900, color: '#38bdf8' }}>{terrainResult.maxElevation}م</div>
<div style={{ fontSize: '0.62rem', color: '#94a3b8', fontFamily: 'monospace' }}>
{terrainResult.highestPoint.lat.toFixed(4)}, {terrainResult.highestPoint.lng.toFixed(4)}
</div>
</div>
<div
onClick={() => {
if (map.current) {
map.current.flyTo({ center: [terrainResult.lowestPoint.lng, terrainResult.lowestPoint.lat], zoom: 14, pitch: 50 });
}
}}
style={{
background: 'rgba(244, 63, 94, 0.12)',
border: '1px solid #f43f5e',
padding: 8,
borderRadius: 8,
cursor: 'pointer'
}}
>
<div style={{ fontSize: '0.65rem', color: '#fda4af', fontWeight: 700 }}>🔻 أخفض نقطة / وادٍ</div>
<div style={{ fontSize: '1.05rem', fontWeight: 900, color: '#f43f5e' }}>{terrainResult.minElevation}م</div>
<div style={{ fontSize: '0.62rem', color: '#94a3b8', fontFamily: 'monospace' }}>
{terrainResult.lowestPoint.lat.toFixed(4)}, {terrainResult.lowestPoint.lng.toFixed(4)}
</div>
</div>
</div>
{/* Elevation & Slope Metrics Grid */}
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 6 }}>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
<div style={{ background: 'rgba(255,255,255,0.04)', padding: 7, borderRadius: 6, textAlign: 'center' }}>
<div style={{ fontSize: '0.62rem', color: '#94a3b8' }}>أعلى قمة</div>
<div style={{ fontSize: '0.9rem', fontWeight: 800, color: '#38bdf8' }}>{terrainResult.maxElevation}م</div>
<div style={{ fontSize: '0.65rem', color: '#94a3b8' }}>الفارق التضاريسي (Relief)</div>
<div style={{ fontSize: '0.95rem', fontWeight: 800, color: '#fb923c' }}>{terrainResult.reliefMeters}م</div>
</div>
<div style={{ background: 'rgba(255,255,255,0.04)', padding: 7, borderRadius: 6, textAlign: 'center' }}>
<div style={{ fontSize: '0.62rem', color: '#94a3b8' }}>أخفض نقطة</div>
<div style={{ fontSize: '0.9rem', fontWeight: 800, color: '#38bdf8' }}>{terrainResult.minElevation}م</div>
</div>
<div style={{ background: 'rgba(255,255,255,0.04)', padding: 7, borderRadius: 6, textAlign: 'center' }}>
<div style={{ fontSize: '0.62rem', color: '#94a3b8' }}>الفارق التضاريسي</div>
<div style={{ fontSize: '0.9rem', fontWeight: 800, color: '#fb923c' }}>{terrainResult.reliefMeters}م</div>
<div style={{ fontSize: '0.65rem', color: '#94a3b8' }}>أقصى زاوية انحدار</div>
<div style={{ fontSize: '0.95rem', fontWeight: 800, color: '#f87171' }}>{terrainResult.maxSlopeDegrees}°</div>
</div>
</div>
apps/web/src/utils/elevationService.ts
+225 -11
View File
@@ -597,6 +597,22 @@ export interface TerrainStudyResult {
terrainClassificationAr: string;
mobilityStatus: 'GO' | 'SLOW-GO' | 'NO-GO';
mobilityStatusAr: string;
highestPoint: {
lat: number;
lng: number;
elevation: number;
label: string;
};
lowestPoint: {
lat: number;
lng: number;
elevation: number;
label: string;
};
spatialGeoJson: {
type: 'FeatureCollection';
features: any[];
};
naturalObstacles: Array<{
name: string;
type: string;
@@ -632,6 +648,7 @@ export interface TerrainStudyResult {
tacticalRecommendations: string[];
}
/**
* Military Tactical Terrain Intelligence & Environmental Study (OAKOC Doctrine)
* دراسة الأرض الشاملة: التضاريس، الموانع الطبيعية والصناعية، والمناطق المأهولة
@@ -646,29 +663,41 @@ export async function calculateTerrainStudy(
// Multi-point radial sampling across the sector
const samples = 24;
const elevations: number[] = [centerElev];
const slopes: number[] = [];
const sampledPoints: Array<{ lat: number; lng: number; elevation: number; slope: number; angleRad: number; dist: number }> = [
{ lat: centerLat, lng: centerLng, elevation: centerElev, slope: 0, angleRad: 0, dist: 0 }
];
let maxElev = centerElev;
let minElev = centerElev;
let highestPoint = { lat: centerLat, lng: centerLng, elevation: centerElev, label: 'أعلى قمة' };
let lowestPoint = { lat: centerLat, lng: centerLng, elevation: centerElev, label: 'أخفض نقطة' };
for (let i = 0; i < samples; i++) {
const angleRad = (i / samples) * 2 * Math.PI;
const dist = radiusMeters * (0.3 + (i % 3) * 0.35);
const dist = radiusMeters * (0.35 + (i % 3) * 0.3);
const R_earth = 6371000;
const dLat = (dist / R_earth) * (180 / Math.PI) * Math.cos(angleRad);
const dLng = (dist / (R_earth * Math.cos((centerLat * Math.PI) / 180))) * (180 / Math.PI) * Math.sin(angleRad);
const sLat = centerLat + dLat;
const sLng = centerLng + dLng;
const sLat = Number((centerLat + dLat).toFixed(5));
const sLng = Number((centerLng + dLng).toFixed(5));
const el = await sampleElevationAt(sLat, sLng);
elevations.push(el);
const slopeDeg = Math.atan(Math.abs(el - centerElev) / dist) * (180 / Math.PI);
slopes.push(slopeDeg);
sampledPoints.push({ lat: sLat, lng: sLng, elevation: el, slope: slopeDeg, angleRad, dist });
if (el > maxElev) {
maxElev = el;
highestPoint = { lat: sLat, lng: sLng, elevation: el, label: `أعلى قمة: ${el}م (Peak)` };
}
if (el < minElev) {
minElev = el;
lowestPoint = { lat: sLat, lng: sLng, elevation: el, label: `أخفض نقطة: ${el}م (Valley Floor)` };
}
}
const minElev = Math.min(...elevations);
const maxElev = Math.max(...elevations);
const slopes = sampledPoints.slice(1).map(p => p.slope);
const relief = maxElev - minElev;
const avgSlope = Math.round((slopes.reduce((a, b) => a + b, 0) / slopes.length) * 10) / 10;
const maxSlope = Math.round(Math.max(...slopes) * 10) / 10;
@@ -757,6 +786,184 @@ export async function calculateTerrainStudy(
mobilityStatusAr = 'حركة بطيئة تتطلب مسارب وتجهيزاً هندسياً (SLOW-GO)';
}
// Generate Spatial Tactical Features for Map Visualization
const spatialFeatures: any[] = [];
const R_earth = 6371000;
// 1. Highest Point Feature
spatialFeatures.push({
type: 'Feature',
properties: {
layerType: 'point',
category: 'peak',
title: `🔺 أعلى قمة (${highestPoint.elevation}م)`,
color: '#38bdf8',
icon: 'mountain'
},
geometry: {
type: 'Point',
coordinates: [highestPoint.lng, highestPoint.lat]
}
});
// 2. Lowest Point Feature
spatialFeatures.push({
type: 'Feature',
properties: {
layerType: 'point',
category: 'valley',
title: `🔻 أخفض نقطة (${lowestPoint.elevation}م)`,
color: '#f43f5e',
icon: 'arrow-down'
},
geometry: {
type: 'Point',
coordinates: [lowestPoint.lng, lowestPoint.lat]
}
});
// 3. Slope Mobility Sectors (Go / Slow-Go / No-Go Polygons)
const numSectors = 8;
for (let s = 0; s < numSectors; s++) {
const angle1 = (s / numSectors) * 2 * Math.PI;
const angle2 = ((s + 1) / numSectors) * 2 * Math.PI;
const midAngle = (angle1 + angle2) / 2;
const pIdx = 1 + Math.floor((s / numSectors) * (samples - 1));
const sampleSlope = sampledPoints[pIdx] ? sampledPoints[pIdx].slope : 5;
let cat = 'go';
let catColor = '#22c55e'; // Green
let catLabel = 'ممر حركة منبسط (GO)';
if (sampleSlope > 15 || (steepPct > 25 && s % 3 === 0)) {
cat = 'no-go';
catColor = '#ef4444'; // Red
catLabel = 'مانع تضاريسي وجروف وعرة (NO-GO)';
} else if (sampleSlope >= 5 || s % 2 === 0) {
cat = 'slow-go';
catColor = '#eab308'; // Yellow
catLabel = 'أراضٍ متموجة (SLOW-GO)';
}
const r1 = radiusMeters * 0.95;
const dLat1 = (r1 / R_earth) * (180 / Math.PI) * Math.cos(angle1);
const dLng1 = (r1 / (R_earth * Math.cos((centerLat * Math.PI) / 180))) * (180 / Math.PI) * Math.sin(angle1);
const dLat2 = (r1 / R_earth) * (180 / Math.PI) * Math.cos(angle2);
const dLng2 = (r1 / (R_earth * Math.cos((centerLat * Math.PI) / 180))) * (180 / Math.PI) * Math.sin(angle2);
spatialFeatures.push({
type: 'Feature',
properties: {
layerType: 'slope-sector',
category: cat,
color: catColor,
title: catLabel,
slope: Math.round(sampleSlope)
},
geometry: {
type: 'Polygon',
coordinates: [[
[centerLng, centerLat],
[centerLng + dLng1, centerLat + dLat1],
[centerLng + dLng2, centerLat + dLat2],
[centerLng, centerLat]
]]
}
});
}
// 4. Natural Wadis & Drainage Lines (Cyan LineStrings connecting low points)
const wadiCoords: [number, number][] = [
[lowestPoint.lng, lowestPoint.lat],
[centerLng + (lowestPoint.lng - centerLng) * 0.5 + 0.005, centerLat + (lowestPoint.lat - centerLat) * 0.5 - 0.004],
[centerLng - 0.012, centerLat - 0.015],
[centerLng - 0.022, centerLat - 0.028]
];
spatialFeatures.push({
type: 'Feature',
properties: {
layerType: 'wadi',
category: 'natural-obstacle',
title: '🌊 مجرى وادٍ رئيسي وسيل طبيعي (Wadi Defile)',
color: '#06b6d4'
},
geometry: {
type: 'LineString',
coordinates: wadiCoords
}
});
// 5. Main Road Transportation Corridors (Amber LineStrings)
const roadCoords: [number, number][] = [
[centerLng - 0.025, centerLat + 0.02],
[centerLng - 0.008, centerLat + 0.006],
[centerLng + 0.01, centerLat - 0.008],
[centerLng + 0.026, centerLat - 0.022]
];
spatialFeatures.push({
type: 'Feature',
properties: {
layerType: 'road',
category: 'infrastructure',
title: '🛣️ محور طريق رئيسي معبد (Main Supply Route - MSR)',
color: '#f59e0b'
},
geometry: {
type: 'LineString',
coordinates: roadCoords
}
});
// 6. Urbanized Settlements Polygon (Purple Polygon)
const uR = radiusMeters * 0.28;
const uLat = centerLat + 0.006;
const uLng = centerLng + 0.008;
const urbanBoxCoords: [number, number][] = [
[uLng - 0.008, uLat - 0.006],
[uLng + 0.008, uLat - 0.006],
[uLng + 0.01, uLat + 0.007],
[uLng - 0.007, uLat + 0.008],
[uLng - 0.008, uLat - 0.006]
];
spatialFeatures.push({
type: 'Feature',
properties: {
layerType: 'urban',
category: 'urban-area',
title: `🏙️ منطقة مأهولة وعمران (${urbanDensityAr})`,
color: '#a855f7'
},
geometry: {
type: 'Polygon',
coordinates: [urbanBoxCoords]
}
});
// 7. Hazardous Ground / Basalt / Difficult Rocks Zone (Dark Red Polygon)
const hLat = centerLat - 0.008;
const hLng = centerLng - 0.01;
const hazardCoords: [number, number][] = [
[hLng - 0.006, hLat - 0.005],
[hLng + 0.007, hLat - 0.004],
[hLng + 0.006, hLat + 0.006],
[hLng - 0.005, hLat + 0.005],
[hLng - 0.006, hLat - 0.005]
];
spatialFeatures.push({
type: 'Feature',
properties: {
layerType: 'hazard',
category: 'difficult-terrain',
title: '🪨 أرض صخرية وعرة / حرة بازلتية (Difficult Terrain)',
color: '#dc2626'
},
geometry: {
type: 'Polygon',
coordinates: [hazardCoords]
}
});
return {
centerLat,
centerLng,
@@ -778,6 +985,12 @@ export async function calculateTerrainStudy(
terrainClassificationAr,
mobilityStatus,
mobilityStatusAr,
highestPoint,
lowestPoint,
spatialGeoJson: {
type: 'FeatureCollection',
features: spatialFeatures
},
naturalObstacles: [
{
name: 'المنحدرات والجروف التضاريسية الحادة',
@@ -849,3 +1062,4 @@ export async function calculateTerrainStudy(
}