Integrate sync_tpads.sh to show Teleporter Pdas in a new created overlay
This commit is contained in:
parent
a3556c44e1
commit
e57dc8f498
4 changed files with 243 additions and 32 deletions
|
|
@ -28,6 +28,7 @@ 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.tpadMarkerSource_%%current_world_key%% = new ol.source.Vector();
|
||||
window.mapData_%%current_world_key%% = {};
|
||||
|
||||
// Konvertiert Minetest-Koordinaten in OpenLayers-Pixel-Koordinaten
|
||||
|
|
@ -41,6 +42,23 @@ function convertMinetestToOpenLayers_%%current_world_key%%(posX, posZ) {
|
|||
return [pixelX, pixelY];
|
||||
}
|
||||
|
||||
// Konvertiert OpenLayers-Pixel-Koordinaten zurück in Minetest-Koordinaten
|
||||
function convertOpenLayersToMinetest_%%current_world_key%%(coordinate) {
|
||||
const mapData = window.mapData_%%current_world_key%%;
|
||||
if (!mapData || !mapData.mapWidth || !coordinate) return '';
|
||||
|
||||
const pixelX = coordinate[0];
|
||||
const pixelY = coordinate[1];
|
||||
|
||||
const percentX = pixelX / mapData.mapWidth;
|
||||
const percentZ = -pixelY / mapData.mapHeight;
|
||||
|
||||
const posX = Math.round((percentX * mapData.extentWidth) + mapData.minX);
|
||||
const posZ = Math.round((percentZ * mapData.extentHeight) + mapData.minZ);
|
||||
|
||||
return `X: ${posX}, Z: ${posZ}`;
|
||||
}
|
||||
|
||||
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);
|
||||
|
|
@ -58,11 +76,13 @@ 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();
|
||||
const tpadsPath = '/%%web_tpads_txt_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]) => {
|
||||
fetch(areasPath).then(res => { if (!res.ok) return {}; return res.json(); }),
|
||||
fetch(tpadsPath).then(res => { if (!res.ok) return []; return res.json(); })
|
||||
]).then(([mapInfoText, areaData, tpadData]) => {
|
||||
|
||||
const mapInfo = (text => {
|
||||
const data = {};
|
||||
|
|
@ -123,15 +143,22 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
|
||||
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 tpadStyle = new ol.style.Style({
|
||||
image: new ol.style.Icon({
|
||||
anchor: [0.5, 1], anchorXUnits: 'fraction', anchorYUnits: 'fraction',
|
||||
src: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="turquoise" stroke="black" stroke-width="0.5" d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>',
|
||||
scale: 1.5
|
||||
})
|
||||
});
|
||||
|
||||
const playerLayer = new ol.layer.Vector({ source: window.playerMarkerSource_%%current_world_key%%, style: f => f.get('style'), title: 'Spieler' });
|
||||
const parentAreaLayer = new ol.layer.Vector({ source: window.parentAreaLayerSource_%%current_world_key%%, style: parentAreaStyle, title: 'Grundstücke' });
|
||||
// KORREKTUR: Die 'title'-Eigenschaft wurde von diesem Layer entfernt
|
||||
const tpadLayer = new ol.layer.Vector({ source: window.tpadMarkerSource_%%current_world_key%%, style: tpadStyle, title: 'Teleporter' });
|
||||
const parentAreaLayer = new ol.layer.Vector({ source: window.parentAreaLayerSource_%%current_world_key%%, style: parentAreaStyle, title: 'Grundstücke', visible: false });
|
||||
const subAreaLayer = new ol.layer.Vector({ source: window.subAreaLayerSource_%%current_world_key%%, style: subAreaStyle, visible: false });
|
||||
|
||||
const overlayLayers = new ol.layer.Group({ title: 'Overlays', layers: [subAreaLayer, parentAreaLayer, playerLayer] });
|
||||
const overlayLayers = new ol.layer.Group({ title: 'Overlays', layers: [subAreaLayer, parentAreaLayer, tpadLayer, playerLayer] });
|
||||
|
||||
const view = new ol.View({ projection: projection, center: ol.extent.getCenter(extent), resolutions: viewResolutions });
|
||||
const view = new ol.View({ projection: projection, center: ol.extent.getCenter(extent), resolutions: viewResolutions, maxZoom: viewResolutions.length - 1 });
|
||||
|
||||
const popupContainer = document.getElementById('popup-%%current_world_key%%');
|
||||
const popupContent = document.getElementById('popup-content-%%current_world_key%%');
|
||||
|
|
@ -139,7 +166,15 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
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() ];
|
||||
const mousePositionControl = new ol.control.MousePosition({
|
||||
className: 'custom-mouse-position',
|
||||
coordinateFormat: function(coordinate) {
|
||||
return convertOpenLayersToMinetest_%%current_world_key%%(coordinate);
|
||||
},
|
||||
undefinedHTML: ' '
|
||||
});
|
||||
|
||||
const mapControls = [ new ol.control.Zoom(), new ol.control.Rotate(), new ol.control.Attribution({ collapsible: false }), new ol.control.FullScreen(), new ol.control.LayerSwitcher(), mousePositionControl ];
|
||||
|
||||
window.olMap_%%current_world_key%% = new ol.Map({
|
||||
controls: mapControls,
|
||||
|
|
@ -160,6 +195,14 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
window.parentAreaLayerSource_%%current_world_key%%.addFeature(feature);
|
||||
}
|
||||
}
|
||||
|
||||
tpadData.forEach(tpad => {
|
||||
const coords = convertMinetestToOpenLayers_%%current_world_key%%(tpad.posX, tpad.posZ);
|
||||
if (coords) {
|
||||
const feature = new ol.Feature({ geometry: new ol.geom.Point(coords), tpadData: tpad });
|
||||
window.tpadMarkerSource_%%current_world_key%%.addFeature(feature);
|
||||
}
|
||||
});
|
||||
|
||||
map.on('click', function(evt) {
|
||||
overlay.setPosition(undefined);
|
||||
|
|
@ -173,17 +216,16 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
if (playerData) {
|
||||
const statusDotClass = playerFeature.get('statusDotClass');
|
||||
const lastLoginFormatted = playerFeature.get('lastLoginFormatted');
|
||||
// KORREKTUR: Layout des Spieler-Popups
|
||||
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>
|
||||
<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>
|
||||
|
|
@ -197,6 +239,31 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
return;
|
||||
}
|
||||
|
||||
const tpadFeature = map.forEachFeatureAtPixel(evt.pixel, (f, l) => l === tpadLayer ? f : undefined);
|
||||
if (tpadFeature) {
|
||||
window.subAreaLayerSource_%%current_world_key%%.clear();
|
||||
subAreaLayer.setVisible(false);
|
||||
const tpadData = tpadFeature.get('tpadData');
|
||||
if (tpadData) {
|
||||
// KORREKTUR: Layout des TPAD-Popups
|
||||
const popupHTML = `
|
||||
<div class='popup-player-box'>
|
||||
<div class="player-header"><div class="player-identity">
|
||||
<img src="/images/tpad.png?v=%%CACHE_BUSTER%%" class="player-icon" alt="Teleporter">
|
||||
<div class="player-name-status" style="display: block;">
|
||||
<strong class="player-name">${tpadData.name}</strong><br>
|
||||
<span style="font-size: 0.9em; color: #ccc;">Teleporter</span>
|
||||
</div>
|
||||
</div></div>
|
||||
<hr class="privilege-separator">
|
||||
<div>Besitzer: ${tpadData.owner}</div>
|
||||
</div>`;
|
||||
popupContent.innerHTML = popupHTML;
|
||||
overlay.setPosition(tpadFeature.getGeometry().getCoordinates());
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
window.subAreaLayerSource_%%current_world_key%%.clear();
|
||||
const areaFeature = map.forEachFeatureAtPixel(evt.pixel, (f, l) => l === parentAreaLayer ? f : undefined);
|
||||
if (areaFeature) {
|
||||
|
|
@ -212,12 +279,27 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
} else {
|
||||
subAreaLayer.setVisible(false);
|
||||
}
|
||||
let popupHTML = `<strong>${areaData.name}</strong><br>Besitzer: ${areaData.owner}`;
|
||||
|
||||
let parcelsHTML = '';
|
||||
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>`;
|
||||
parcelsHTML += `<div style="margin-top: 5px;"><p style="margin: 0; font-weight: bold;">Parzellen:</p><ul>`;
|
||||
areaData.sub_areas.forEach(sub => { parcelsHTML += `<li style="font-size: 0.9em;">${sub.name} (${sub.owner})</li>`; });
|
||||
parcelsHTML += `</ul></div>`;
|
||||
}
|
||||
// KORREKTUR: Layout des Grundstück-Popups
|
||||
const popupHTML = `
|
||||
<div class='popup-player-box'>
|
||||
<div class="player-header"><div class="player-identity">
|
||||
<img src="/images/area.png?v=%%CACHE_BUSTER%%" class="player-icon" alt="Grundstück">
|
||||
<div class="player-name-status" style="display: block;">
|
||||
<strong class="player-name">${areaData.name}</strong><br>
|
||||
<span style="font-size: 0.9em; color: #ccc;">Grundstück</span>
|
||||
</div>
|
||||
</div></div>
|
||||
<hr class="privilege-separator">
|
||||
<div>Besitzer: ${areaData.owner}</div>
|
||||
${parcelsHTML}
|
||||
</div>`;
|
||||
popupContent.innerHTML = popupHTML;
|
||||
overlay.setPosition(evt.coordinate);
|
||||
} else {
|
||||
|
|
@ -231,7 +313,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error("Fehler beim Initialisieren der Karte oder der Grundstücksdaten:", error);
|
||||
console.error("Fehler beim Initialisieren der Kartendaten:", error);
|
||||
mapContainer.innerHTML = "<p><em>Karte konnte nicht initialisiert werden: " + error.message + "</em></p>";
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue