rainer
a225feef98
This major update introduces a complete system for visualizing protected areas on the OpenLayers map. It adds a new sync script to process area data and heavily modifies the frontend to support interactive, multi-layer display with custom popups. Additionally, data-sync scripts were refactored to run globally on all configured worlds, simplifying cron automation.
252 lines
15 KiB
Text
252 lines
15 KiB
Text
<h3 id='weltradar' class="section-header-flex">
|
|
<span>Weltradar</span>
|
|
<div class="map-toggle-controls">
|
|
<button id="toggle-live-btn-%%current_world_key%%" class="map-toggle-button active">Live</button>
|
|
<button id="toggle-archive-btn-%%current_world_key%%" class="map-toggle-button">Archiv</button>
|
|
</div>
|
|
</h3>
|
|
|
|
<div id="live-map-container-%%current_world_key%%">
|
|
<div id="ol-map-container-%%current_world_key%%" class="map-view-container" style="background-color: %%map_background_color%%;"></div>
|
|
|
|
<div id="popup-%%current_world_key%%" class="ol-popup">
|
|
<a href="#" id="popup-closer-%%current_world_key%%" class="ol-popup-closer"></a>
|
|
<div id="popup-content-%%current_world_key%%" class="ol-popup-content"></div>
|
|
</div>
|
|
<div class='map-sub-info'>
|
|
%%map_sub_info_link%%
|
|
<span class='map-last-update'>Letzte Kartenaktualisierung: <span id='map-last-update-text-%%current_world_key%%'><em>wird geladen...</em></span></span>
|
|
</div>
|
|
</div>
|
|
<div id="archive-view-container-%%current_world_key%%" style="display: none;">
|
|
%%ARCHIVE_HTML%%
|
|
</div>
|
|
|
|
<script>
|
|
// Globale Referenzen
|
|
window.olMap_%%current_world_key%% = null;
|
|
window.playerMarkerSource_%%current_world_key%% = new ol.source.Vector();
|
|
window.parentAreaLayerSource_%%current_world_key%% = new ol.source.Vector();
|
|
window.subAreaLayerSource_%%current_world_key%% = new ol.source.Vector();
|
|
window.mapData_%%current_world_key%% = {};
|
|
|
|
// Konvertiert Minetest-Koordinaten in OpenLayers-Pixel-Koordinaten
|
|
function convertMinetestToOpenLayers_%%current_world_key%%(posX, posZ) {
|
|
const mapData = window.mapData_%%current_world_key%%;
|
|
if (!mapData || !mapData.mapWidth) return null;
|
|
const percentX = (posX - mapData.minX) / mapData.extentWidth;
|
|
const percentZ = (posZ - mapData.minZ) / mapData.extentHeight;
|
|
const pixelX = percentX * mapData.mapWidth;
|
|
const pixelY = - (mapData.mapHeight - (percentZ * mapData.mapHeight));
|
|
return [pixelX, pixelY];
|
|
}
|
|
|
|
function createPolygonFromPos_%%current_world_key%%(pos1, pos2) {
|
|
const p1 = convertMinetestToOpenLayers_%%current_world_key%%(pos1.x, pos1.z);
|
|
const p2 = convertMinetestToOpenLayers_%%current_world_key%%(pos2.x, pos2.z);
|
|
if (!p1 || !p2) return null;
|
|
const minX = Math.min(p1[0], p2[0]);
|
|
const minY = Math.min(p1[1], p2[1]);
|
|
const maxX = Math.max(p1[0], p2[0]);
|
|
const maxY = Math.max(p1[1], p2[1]);
|
|
const coordinates = [[ [minX, minY], [maxX, minY], [maxX, maxY], [minX, maxY], [minX, minY] ]];
|
|
return new ol.geom.Polygon(coordinates);
|
|
}
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const mapContainer = document.getElementById('ol-map-container-%%current_world_key%%');
|
|
const mapInfoPath = '/%%web_map_info_rel_path%%?v=' + new Date().getTime();
|
|
const areasPath = '/%%web_areas_json_rel_path%%?v=' + new Date().getTime();
|
|
|
|
Promise.all([
|
|
fetch(mapInfoPath).then(res => { if (!res.ok) throw new Error('map_info.txt'); return res.text(); }),
|
|
fetch(areasPath).then(res => { if (!res.ok) return {}; return res.json(); })
|
|
]).then(([mapInfoText, areaData]) => {
|
|
|
|
const mapInfo = (text => {
|
|
const data = {};
|
|
text.split('\n').forEach(line => {
|
|
const parts = line.split('=');
|
|
if (parts.length === 2 && parts[0] && parts[1]) data[parts[0].trim()] = parts[1].trim();
|
|
});
|
|
return data;
|
|
})(mapInfoText);
|
|
if (!mapInfo.map_dimension || !mapInfo.map_extent) throw new Error('map_info.txt ist unvollständig.');
|
|
|
|
const mapData = window.mapData_%%current_world_key%%;
|
|
const mapDim = mapInfo.map_dimension.split('x');
|
|
mapData.mapWidth = parseInt(mapDim[0], 10);
|
|
mapData.mapHeight = parseInt(mapDim[1], 10);
|
|
const mapExt = mapInfo.map_extent.split(/[+:]/);
|
|
mapData.minX = parseInt(mapExt[0], 10);
|
|
mapData.minZ = parseInt(mapExt[1], 10);
|
|
mapData.extentWidth = parseInt(mapExt[2], 10);
|
|
mapData.extentHeight = parseInt(mapExt[3], 10);
|
|
|
|
if (mapContainer && typeof ol !== 'undefined' && mapData.mapWidth > 0) {
|
|
mapContainer.innerHTML = '';
|
|
|
|
const extent = [0, -mapData.mapHeight, mapData.mapWidth, 0];
|
|
const sourceResolutions = %%RESOLUTIONS_JS_ARRAY%%;
|
|
|
|
// HINZUGEFÜGT: Logik für digitalen Zoom wiederhergestellt
|
|
const maxNativeZoom = sourceResolutions.length -1;
|
|
const viewResolutions = [...sourceResolutions];
|
|
const digitalZoomLevels = 3;
|
|
let lastResolution = viewResolutions[viewResolutions.length - 1];
|
|
for (let i = 0; i < digitalZoomLevels; i++) {
|
|
lastResolution = lastResolution / 2;
|
|
viewResolutions.push(lastResolution);
|
|
}
|
|
|
|
const projection = new ol.proj.Projection({ code: 'pixel-map-%%current_world_key%%', units: 'pixels', extent: extent });
|
|
const tileGrid = new ol.tilegrid.TileGrid({ origin: ol.extent.getTopLeft(extent), resolutions: sourceResolutions });
|
|
|
|
const tileSource = new ol.source.TileImage({
|
|
projection: projection,
|
|
tileGrid: tileGrid,
|
|
tileUrlFunction: function(tileCoord) {
|
|
if (!tileCoord) return '';
|
|
let z = tileCoord[0]; let x = tileCoord[1]; let y = tileCoord[2];
|
|
if (z > maxNativeZoom) {
|
|
const zoomDiff = z - maxNativeZoom;
|
|
const scale = Math.pow(2, zoomDiff);
|
|
x = Math.floor(x / scale);
|
|
y = Math.floor(y / scale);
|
|
z = maxNativeZoom;
|
|
}
|
|
return ('/%%web_tiles_rel_path%%/' + z + '/' + x + '/' + y + '.png?v=%%CACHE_BUSTER%%');
|
|
}
|
|
});
|
|
|
|
const tileLayer = new ol.layer.Tile({ source: tileSource, title: 'Basiskarte', type: 'base' });
|
|
|
|
const parentAreaStyle = new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'rgba(0, 100, 255, 0.8)', width: 2 }), fill: new ol.style.Fill({ color: 'rgba(0, 100, 255, 0.2)' }) });
|
|
const subAreaStyle = new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'rgba(0, 100, 255, 0.8)', width: 1.5, lineDash: [6, 6] }), fill: new ol.style.Fill({ color: 'transparent' }) });
|
|
const parentAreaLayer = new ol.layer.Vector({ source: window.parentAreaLayerSource_%%current_world_key%%, style: parentAreaStyle, title: 'Grundstücke' });
|
|
const subAreaLayer = new ol.layer.Vector({ source: window.subAreaLayerSource_%%current_world_key%%, style: subAreaStyle, title: 'Parzellen', visible: false });
|
|
const playerLayer = new ol.layer.Vector({ source: window.playerMarkerSource_%%current_world_key%%, style: f => f.get('style'), title: 'Spielerpositionen' });
|
|
|
|
const overlayLayers = new ol.layer.Group({ title: 'Overlays', layers: [subAreaLayer, parentAreaLayer, playerLayer] });
|
|
const view = new ol.View({ projection: projection, center: ol.extent.getCenter(extent), resolutions: viewResolutions });
|
|
|
|
const popupContainer = document.getElementById('popup-%%current_world_key%%');
|
|
const popupContent = document.getElementById('popup-content-%%current_world_key%%');
|
|
const popupCloser = document.getElementById('popup-closer-%%current_world_key%%');
|
|
const overlay = new ol.Overlay({ element: popupContainer, autoPan: { animation: { duration: 250 } } });
|
|
popupCloser.onclick = () => { overlay.setPosition(undefined); popupCloser.blur(); return false; };
|
|
|
|
const mapControls = [ new ol.control.Zoom(), new ol.control.Rotate(), new ol.control.Attribution({ collapsible: false }), new ol.control.FullScreen(), new ol.control.LayerSwitcher() ];
|
|
|
|
window.olMap_%%current_world_key%% = new ol.Map({
|
|
controls: mapControls,
|
|
layers: [tileLayer, overlayLayers],
|
|
overlays: [overlay],
|
|
target: mapContainer,
|
|
view: view
|
|
});
|
|
|
|
const map = window.olMap_%%current_world_key%%;
|
|
map.getView().fit(extent, { size: map.getSize() });
|
|
|
|
for (const id in areaData) {
|
|
const area = areaData[id];
|
|
const polygon = createPolygonFromPos_%%current_world_key%%(area.pos1, area.pos2);
|
|
if (polygon) {
|
|
const feature = new ol.Feature({ geometry: polygon, areaData: area });
|
|
window.parentAreaLayerSource_%%current_world_key%%.addFeature(feature);
|
|
}
|
|
}
|
|
|
|
// KORREKTUR: Klick-Handler mit korrekter Priorisierung
|
|
map.on('click', function(evt) {
|
|
// Reset
|
|
overlay.setPosition(undefined);
|
|
popupCloser.blur();
|
|
|
|
// Priorität 1: Spieler-Marker
|
|
const playerFeature = map.forEachFeatureAtPixel(evt.pixel, (f, l) => l === playerLayer ? f : undefined);
|
|
if (playerFeature) {
|
|
window.subAreaLayerSource_%%current_world_key%%.clear(); // Sub-Areas ausblenden, wenn ein Spieler geklickt wird
|
|
subAreaLayer.setVisible(false);
|
|
|
|
const playerData = playerFeature.get('playerData');
|
|
if (playerData) {
|
|
const statusDotClass = playerFeature.get('statusDotClass');
|
|
const lastLoginFormatted = playerFeature.get('lastLoginFormatted');
|
|
const popupHTML = `
|
|
<div class='popup-player-box'>
|
|
<div class="player-header">
|
|
<div class="player-identity">
|
|
<img src="/images/players/${encodeURIComponent(playerData.name)}.png?v=%%CACHE_BUSTER%%" class="player-icon" onerror="this.onerror=null;this.src='/%%DEFAULT_PLAYER_SKIN_URL%%?v=%%CACHE_BUSTER%%';">
|
|
<span class="player-name-status">
|
|
<span class="status-dot ${statusDotClass}" title="Letzter Login: ${lastLoginFormatted}"></span>
|
|
<strong class="player-name">${playerData.name}</strong>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<hr class="privilege-separator">
|
|
<div class="popup-player-vitals">
|
|
<span class="vital"><span class="icon">❤️</span> ${playerData.hp ?? '?'}</span>
|
|
<span class="vital"><span class="icon">💨</span> ${playerData.breath ?? '?'}</span>
|
|
<span class="vital"><span class="icon">🍖</span> ${playerData.stamina ?? '?'}</span>
|
|
</div>
|
|
</div>`;
|
|
popupContent.innerHTML = popupHTML;
|
|
overlay.setPosition(playerFeature.getGeometry().getCoordinates());
|
|
}
|
|
return; // Verarbeitung hier beenden
|
|
}
|
|
|
|
// Priorität 2: Hauptgrundstück (nur wenn kein Spieler geklickt wurde)
|
|
window.subAreaLayerSource_%%current_world_key%%.clear(); // Alte Sub-Areas immer entfernen
|
|
const areaFeature = map.forEachFeatureAtPixel(evt.pixel, (f, l) => l === parentAreaLayer ? f : undefined);
|
|
if (areaFeature) {
|
|
const areaData = areaFeature.get('areaData');
|
|
if (areaData.sub_areas && areaData.sub_areas.length > 0) {
|
|
const sub_features = [];
|
|
areaData.sub_areas.forEach(sub => {
|
|
const sub_polygon = createPolygonFromPos_%%current_world_key%%(sub.pos1, sub.pos2);
|
|
if(sub_polygon) sub_features.push(new ol.Feature({ geometry: sub_polygon }));
|
|
});
|
|
window.subAreaLayerSource_%%current_world_key%%.addFeatures(sub_features);
|
|
subAreaLayer.setVisible(true);
|
|
} else {
|
|
subAreaLayer.setVisible(false);
|
|
}
|
|
|
|
let popupHTML = `<strong>${areaData.name}</strong><br>Besitzer: ${areaData.owner}`;
|
|
if (areaData.sub_areas && areaData.sub_areas.length > 0) {
|
|
popupHTML += `<hr class="privilege-separator"><p><strong>Parzellen:</strong></p><ul>`;
|
|
areaData.sub_areas.forEach(sub => { popupHTML += `<li>${sub.name} (${sub.owner})</li>`; });
|
|
popupHTML += `</ul>`;
|
|
}
|
|
popupContent.innerHTML = popupHTML;
|
|
overlay.setPosition(evt.coordinate);
|
|
} else {
|
|
// Wenn nichts geklickt wurde, auch die sub-areas ausblenden
|
|
subAreaLayer.setVisible(false);
|
|
}
|
|
});
|
|
|
|
if (window.playerListLogic_%%current_world_key%% && window.playerListLogic_%%current_world_key%%.masterPlayerData) {
|
|
window.playerListLogic_%%current_world_key%%.updatePlayerMarkers(window.playerListLogic_%%current_world_key%%.masterPlayerData);
|
|
}
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error("Fehler beim Initialisieren der Karte oder der Grundstücksdaten:", error);
|
|
mapContainer.innerHTML = "<p><em>Karte konnte nicht initialisiert werden: " + error.message + "</em></p>";
|
|
});
|
|
|
|
const liveBtn = document.getElementById('toggle-live-btn-%%current_world_key%%');
|
|
const archiveBtn = document.getElementById('toggle-archive-btn-%%current_world_key%%');
|
|
const liveContainer = document.getElementById('live-map-container-%%current_world_key%%');
|
|
const archiveContainer = document.getElementById('archive-view-container-%%current_world_key%%');
|
|
if (liveBtn && archiveBtn && liveContainer && archiveContainer) {
|
|
liveBtn.addEventListener('click', () => { liveContainer.style.display = 'block'; archiveContainer.style.display = 'none'; if (window.olMap_%%current_world_key%%) { setTimeout(() => window.olMap_%%current_world_key%%.updateSize(), 10); } });
|
|
archiveBtn.addEventListener('click', () => { archiveContainer.style.display = 'block'; liveContainer.style.display = 'none'; });
|
|
}
|
|
});
|
|
</script>
|