feat: Add Improved Polish Orthophoto Map component with WMTS support

- Introduced ImprovedPolishOrthophotoMap component for displaying Polish orthophoto layers using WMTS.
- Implemented custom WMTSLayer for handling tile requests.
- Added Google Satellite and OpenStreetMap layers for comparison.
- Included debug information for network requests to Geoportal.
- Enhanced LeafletMap to support WMS overlays and improved layer control.
- Created PolishGeoLayers module for easy access to various Polish geospatial layers.
- Added TransparencyDemoMap for adjustable layer opacity controls.
- Updated mapLayers configuration to include new Polish orthophoto layers and WMS overlays.
- Refactored wmtsCapabilities to use updated URLs and parameters for better compatibility.
This commit is contained in:
2025-06-21 01:21:21 +02:00
parent 6df4302396
commit f83cc8e564
25 changed files with 4538 additions and 32 deletions

41
public/wmts-test.html Normal file
View File

@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<title>Direct WMTS Test</title>
<style>
body { margin: 0; padding: 20px; font-family: Arial, sans-serif; }
.test-container { margin-bottom: 20px; }
.test-image { border: 1px solid #ccc; margin: 10px 0; }
.url { font-size: 12px; color: #666; word-break: break-all; }
</style>
</head>
<body>
<h1>Direct WMTS Tile Test</h1>
<div class="test-container">
<h3>Test 1: EPSG:3857, Zoom 12, Krakow Area</h3>
<div class="url">https://mapy.geoportal.gov.pl/wss/service/PZGIK/ORTO/WMTS/StandardResolution?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTO&STYLE=default&TILEMATRIXSET=EPSG:3857&TILEMATRIX=12&TILEROW=1340&TILECOL=2248&FORMAT=image/jpeg</div>
<img class="test-image" src="https://mapy.geoportal.gov.pl/wss/service/PZGIK/ORTO/WMTS/StandardResolution?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTO&STYLE=default&TILEMATRIXSET=EPSG:3857&TILEMATRIX=12&TILEROW=1340&TILECOL=2248&FORMAT=image/jpeg" alt="WMTS Tile Test 1" />
</div>
<div class="test-container">
<h3>Test 2: EPSG:3857, Zoom 10, Broader Area</h3>
<div class="url">https://mapy.geoportal.gov.pl/wss/service/PZGIK/ORTO/WMTS/StandardResolution?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTO&STYLE=default&TILEMATRIXSET=EPSG:3857&TILEMATRIX=10&TILEROW=335&TILECOL=562&FORMAT=image/jpeg</div>
<img class="test-image" src="https://mapy.geoportal.gov.pl/wss/service/PZGIK/ORTO/WMTS/StandardResolution?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTO&STYLE=default&TILEMATRIXSET=EPSG:3857&TILEMATRIX=10&TILEROW=335&TILECOL=562&FORMAT=image/jpeg" alt="WMTS Tile Test 2" />
</div>
<div class="test-container">
<h3>Test 3: EPSG:3857, PNG Format</h3>
<div class="url">https://mapy.geoportal.gov.pl/wss/service/PZGIK/ORTO/WMTS/StandardResolution?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTO&STYLE=default&TILEMATRIXSET=EPSG:3857&TILEMATRIX=10&TILEROW=335&TILECOL=562&FORMAT=image/png</div>
<img class="test-image" src="https://mapy.geoportal.gov.pl/wss/service/PZGIK/ORTO/WMTS/StandardResolution?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTO&STYLE=default&TILEMATRIXSET=EPSG:3857&TILEMATRIX=10&TILEROW=335&TILECOL=562&FORMAT=image/png" alt="WMTS Tile Test 3" />
</div>
<script>
// Log when images load or fail
document.querySelectorAll('.test-image').forEach((img, index) => {
img.onload = () => console.log(`Test ${index + 1}: Image loaded successfully`);
img.onerror = () => console.log(`Test ${index + 1}: Image failed to load`);
});
</script>
</body>
</html>