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

fix(tactical): remove label spam on terrain grid, refine realistic cliff gradient >= 28 deg, and soften overlay opacities

Browse Source
This commit is contained in:
Hamza-Ayed
2026-08-18 11:43:28 +03:00
parent c35f6e61f2
commit ba2f211438
2 changed files with 80 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/pages/TacticalDefenseView.tsx
+41 -26
View File
@@ -551,11 +551,11 @@ export const TacticalDefenseView: React.FC = () => {
'fill-opacity': [
'match',
['get', 'layerType'],
'cliff', 0.50,
'urban', 0.28,
'hazard', 0.32,
'slope-sector', 0.18,
0.2
'cliff', 0.38,
'urban', 0.20,
'hazard', 0.24,
'slope-sector', 0.14,
0.15
]
}
});
@@ -566,18 +566,17 @@ export const TacticalDefenseView: React.FC = () => {
source: 'tactical-terrain-spatial-src',
filter: ['==', '$type', 'Polygon'],
paint: {
'line-color': ['get', 'color'],
'line-color': [
'match',
['get', 'layerType'],
'cliff', '#ef4444',
'rgba(255, 255, 255, 0.10)'
],
'line-width': [
'match',
['get', 'layerType'],
'cliff', 3.5,
2
],
'line-dasharray': [
'match',
['get', 'layerType'],
'cliff', ['literal', [2, 1]],
['literal', [3, 2]]
'cliff', 1.8,
0.4
]
}
});
@@ -592,10 +591,10 @@ export const TacticalDefenseView: React.FC = () => {
'line-width': [
'match',
['get', 'layerType'],
'cliff', 4.5,
'road', 4.5,
'wadi', 3.5,
3
'cliff', 3.5,
'road', 4.0,
'wadi', 3.0,
2.5
],
'line-dasharray': [
'match',
@@ -608,21 +607,37 @@ export const TacticalDefenseView: React.FC = () => {
}
});
initialMap.addLayer({
id: 'tactical-terrain-spatial-points',
type: 'circle',
source: 'tactical-terrain-spatial-src',
filter: ['==', '$type', 'Point'],
paint: {
'circle-radius': 5,
'circle-color': ['coalesce', ['get', 'color'], '#38bdf8'],
'circle-stroke-width': 2,
'circle-stroke-color': '#ffffff'
}
});
initialMap.addLayer({
id: 'tactical-terrain-spatial-labels',
type: 'symbol',
source: 'tactical-terrain-spatial-src',
filter: ['all', ['==', '$type', 'Point'], ['has', 'title']],
layout: {
'text-field': ['get', 'title'],
'text-size': 11,
'text-size': 12,
'text-font': ['Noto Sans Bold', 'Open Sans Bold'],
'text-anchor': 'center',
'symbol-placement': 'point'
'text-anchor': 'bottom',
'text-offset': [0, -0.6],
'symbol-placement': 'point',
'text-allow-overlap': false
},
paint: {
'text-color': '#ffffff',
'text-halo-color': '#0f172a',
'text-halo-width': 2
'text-halo-width': 2.5
}
});
@@ -1674,14 +1689,14 @@ ${terrainResult.tacticalRecommendations.map((r, i) => `${i + 1}. ${r}`).join('\n
<div style={{ height: 10, width: '100%', display: 'flex', borderRadius: 5, overflow: 'hidden', marginBottom: 6 }}>
<div style={{ width: `${terrainResult.slopeDistribution.flatPercentage}%`, background: '#22c55e' }} title={`منبسط (<7°): ${terrainResult.slopeDistribution.flatPercentage}%`} />
<div style={{ width: `${terrainResult.slopeDistribution.moderatePercentage}%`, background: '#eab308' }} title={`تضاريس متموجة (7-15°): ${terrainResult.slopeDistribution.moderatePercentage}%`} />
<div style={{ width: `${terrainResult.slopeDistribution.steepPercentage}%`, background: '#f97316' }} title={`انحدار وعر (15-25°): ${terrainResult.slopeDistribution.steepPercentage}%`} />
<div style={{ width: `${terrainResult.slopeDistribution.cliffPercentage}%`, background: '#ef4444' }} title={`قواطع وجروف صخرية (>25°): ${terrainResult.slopeDistribution.cliffPercentage}%`} />
<div style={{ width: `${terrainResult.slopeDistribution.steepPercentage}%`, background: '#f97316' }} title={`انحدار وعر (15-28°): ${terrainResult.slopeDistribution.steepPercentage}%`} />
<div style={{ width: `${terrainResult.slopeDistribution.cliffPercentage}%`, background: '#ef4444' }} title={`قواطع وجروف صخرية (≥28°): ${terrainResult.slopeDistribution.cliffPercentage}%`} />
</div>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '3px 8px', fontSize: '0.66rem', color: '#94a3b8' }}>
<span style={{ color: '#4ade80' }}>■ منبسط (&lt;7°): {terrainResult.slopeDistribution.flatPercentage}%</span>
<span style={{ color: '#facc15' }}>■ متموج (7-15°): {terrainResult.slopeDistribution.moderatePercentage}%</span>
<span style={{ color: '#fb923c' }}>■ وعر (15-25°): {terrainResult.slopeDistribution.steepPercentage}%</span>
<span style={{ color: '#f87171' }}>■ جروف صخرية (&gt;25°): {terrainResult.slopeDistribution.cliffPercentage}%</span>
<span style={{ color: '#fb923c' }}>■ وعر (15-28°): {terrainResult.slopeDistribution.steepPercentage}%</span>
<span style={{ color: '#f87171' }}>■ جروف صخرية (≥28°): {terrainResult.slopeDistribution.cliffPercentage}%</span>
</div>
</div>