feat: Filterung der Stationen nach Erlaubniswert hinzugefügt
- Die Funktion `createAndSetMarkers` wurde angepasst, sodass nur Stationen angezeigt werden, wenn ihr Erlaubniswert (`Allow`) auf 1 gesetzt ist. - Eine neue Map `getIdSystemAndAllowValueMap` wurde eingeführt, um die Zuordnung von System-IDs zu ihren Erlaubniswerten abzubilden. - Die Stationen werden jetzt entsprechend gefiltert, bevor sie auf der Karte dargestellt werden. - Der Code wurde entsprechend umbenannt und bereinigt, um die Lesbarkeit und Verständlichkeit zu verbessern.
This commit is contained in:
ISA
@@ -31,6 +31,25 @@ const plusRoundIcon = L.icon({
|
||||
});
|
||||
|
||||
const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
const zoomTrigger = useRecoilValue(zoomTriggerState);
|
||||
const offlineTileLayer = "../TileMap/mapTiles/{z}/{x}/{y}.png";
|
||||
const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
|
||||
//const onlineTileLayer = "mapTiles/{z}/{x}/{y}.png";
|
||||
// Create map layers
|
||||
const TALAS = new L.layerGroup();
|
||||
const ECI = new L.layerGroup();
|
||||
const ULAF = new L.layerGroup();
|
||||
const GSMModem = new L.layerGroup();
|
||||
const CiscoRouter = new L.layerGroup();
|
||||
const WAGO = new L.layerGroup();
|
||||
const Siemens = new L.layerGroup();
|
||||
const OTDR = new L.layerGroup();
|
||||
const WDM = new L.layerGroup();
|
||||
const GMA = new L.layerGroup();
|
||||
const Sonstige = new L.layerGroup();
|
||||
const TALASICL = new L.layerGroup();
|
||||
|
||||
const [gisSystemStaticLoaded, setGisSystemStaticLoaded] = useState(false);
|
||||
const baseUrl = "http://10.10.0.13/talas5/devices/";
|
||||
const [isPoiTypLoaded, setIsPoiTypLoaded] = useState(false);
|
||||
const [poiTypMap, setPoiTypMap] = useState(new Map());
|
||||
@@ -99,6 +118,339 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
}
|
||||
};
|
||||
|
||||
//----------------------------------------------------
|
||||
//-----Kontextmenu----------------
|
||||
function addContextMenuToMarker(marker) {
|
||||
marker.bindContextMenu({
|
||||
contextmenu: true,
|
||||
contextmenuWidth: 140,
|
||||
contextmenuItems: [
|
||||
{
|
||||
text: "Station öffnen (Tab)",
|
||||
icon: "/img/screen_new.png",
|
||||
callback: (e) => openInNewTab(e, marker),
|
||||
},
|
||||
{
|
||||
text: "Station öffnen",
|
||||
icon: "/img/screen_same.png",
|
||||
callback: (e) => openInSameWindow(e, marker),
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
// Funktion zum Öffnen in einem neuen Tab
|
||||
function openInNewTab(e, marker) {
|
||||
console.log("Marker data:", baseUrl + marker.options.link);
|
||||
window.open(baseUrl + marker.options.link, "_blank");
|
||||
}
|
||||
|
||||
// Funktion zum Öffnen im gleichen Fenster
|
||||
function openInSameWindow(e, marker) {
|
||||
console.log("Marker data:", baseUrl + marker.options.link);
|
||||
window.location.href = baseUrl + marker.options.link;
|
||||
}
|
||||
|
||||
const zoomIn = (e) => {
|
||||
initMap.flyTo(e.latlng, 12);
|
||||
//console.log("ZoomIn koordinaten in MapComponent", e.latlng);
|
||||
};
|
||||
|
||||
const zoomOut = (e) => {
|
||||
fly();
|
||||
};
|
||||
const centerHere = (e) => {
|
||||
initMap.panTo(e.latlng);
|
||||
};
|
||||
|
||||
// Funktion zum Anzeigen der Koordinaten
|
||||
const showCoordinates = (e) => {
|
||||
alert(
|
||||
"Breitengrad: " +
|
||||
e.latlng.lat.toFixed(5) +
|
||||
"\nLängengrad: " +
|
||||
e.latlng.lng.toFixed(5)
|
||||
);
|
||||
};
|
||||
const showData = (e) => {};
|
||||
const showTalas = (e) => {
|
||||
map.addLayer(TALAS);
|
||||
loadData();
|
||||
};
|
||||
const hideTalas = (e) => {
|
||||
map.removeLayer(TALAS);
|
||||
loadData();
|
||||
};
|
||||
const showGSM = (e) => {
|
||||
map.addLayer(GMA);
|
||||
loadData();
|
||||
};
|
||||
const hideGSM = (e) => {
|
||||
map.removeLayer(GMA);
|
||||
loadData();
|
||||
};
|
||||
|
||||
// Kontextmenü Callback für "Station hinzufügen"
|
||||
const addStationCallback = (event) => {
|
||||
setPopupCoordinates(event.latlng); // Koordinaten des Klicks verwenden
|
||||
setShowPopup(true); // Popup öffnen
|
||||
};
|
||||
//-----Kontextmenu----ende------------
|
||||
//------------------------------------------ */
|
||||
const layerNames = {
|
||||
"GSM Modem": "GSMMODEM",
|
||||
"Cisco Router": "CiscoRouter",
|
||||
"TALAS ICL": "TALASICL",
|
||||
"SMS-Funkmodem": "GSMModem",
|
||||
};
|
||||
//------------------------------------------ */
|
||||
function fly(stationValue) {
|
||||
var x = 51.41321407879154;
|
||||
var y = 7.739617925303934;
|
||||
var zoom = 7;
|
||||
|
||||
initMap.flyTo([x, y], zoom);
|
||||
}
|
||||
|
||||
function getIconPath(status, iconNumber, marker) {
|
||||
let path = status
|
||||
? `TileMap/img/icons/${status}-marker-icon-${iconNumber}.png`
|
||||
: `TileMap/img/icons/marker-icon-${iconNumber}.png`;
|
||||
|
||||
// Wenn der Pfad das Wort "critical" oder "major" enthält, dann den Marker bouncing options setzen
|
||||
if (
|
||||
path.includes("critical") || // Priorität 1
|
||||
path.includes("major") || // Priorität 2
|
||||
path.includes("minor") || // Priorität 3
|
||||
path.includes("system") // Priorität 4
|
||||
) {
|
||||
// Setze Bouncing-Optionen
|
||||
marker.setBouncingOptions({
|
||||
bounceHeight: 15, // Höhe des Bounces
|
||||
contractHeight: 12, // Höhe des Einzugs beim Landen
|
||||
bounceSpeed: 52, // Geschwindigkeit des Bounces
|
||||
contractSpeed: 52, // Geschwindigkeit des Einzugs
|
||||
shadowAngle: null, // Standard-Schattenwinkel
|
||||
});
|
||||
// Check if the icon path includes 'critical'
|
||||
if (path.includes("critical")) {
|
||||
// marker.bounce(3);
|
||||
}
|
||||
}
|
||||
|
||||
return path;
|
||||
}
|
||||
//------------------------------------------
|
||||
// Funktionen zur Überwachung der Internetverbindung
|
||||
const checkInternet = () => {
|
||||
fetch("https://tile.openstreetmap.org/1/1/1.png", { method: "HEAD" })
|
||||
.then((response) => setOnline(response.ok))
|
||||
.catch(() => setOnline(false));
|
||||
};
|
||||
let initMap = [];
|
||||
//------------------------------------------
|
||||
//------------------------------------------
|
||||
function parsePoint(pointString) {
|
||||
const match = pointString.match(
|
||||
/POINT\s*\((\d+(\.\d+)?)\s+(\d+(\.\d+)?)\)/
|
||||
);
|
||||
if (match) {
|
||||
return {
|
||||
longitude: parseFloat(match[1]),
|
||||
latitude: parseFloat(match[3]), // Achtung: Index 3 für die zweite Koordinate, wegen der Gruppe (\.\d+)?
|
||||
};
|
||||
} else {
|
||||
// Handle the error or return a default/fallback value
|
||||
console.error("Invalid POINT format:", pointString);
|
||||
return null; // Oder eine sinnvolle Standardantwort
|
||||
}
|
||||
}
|
||||
//----------------------------------
|
||||
//------------------------------------------
|
||||
|
||||
function parsePoint(position) {
|
||||
const [longitude, latitude] = position.slice(6, -1).split(" ");
|
||||
return { latitude: parseFloat(latitude), longitude: parseFloat(longitude) };
|
||||
}
|
||||
//-----------------------------------------------------------------
|
||||
// TALAS Marker hinzufügen
|
||||
//-----------------------------------------------------------------
|
||||
// Reihenfolge nach API sortiert mit der Attribute "System"
|
||||
const [talasVisible, setTalasVisible] = useRecoilState(mapLayersState);
|
||||
const [eciVisible, setEciVisible] = useRecoilState(mapLayersState);
|
||||
const [gsmModemVisible, setGsmModemVisible] = useRecoilState(mapLayersState);
|
||||
const [ciscoRouterVisible, setCiscoRouterVisible] =
|
||||
useRecoilState(mapLayersState);
|
||||
const [wagoVisible, setWagoVisible] = useRecoilState(mapLayersState);
|
||||
const [siemensVisible, setSiemensVisible] = useRecoilState(mapLayersState);
|
||||
const [otdrVisible, setOtdrVisible] = useRecoilState(mapLayersState);
|
||||
const [wdmVisible, setWdmVisible] = useRecoilState(mapLayersState);
|
||||
const [gmaVisible, setGmaVisible] = useRecoilState(mapLayersState);
|
||||
const [messstellenVisible, setMessstellenVisible] =
|
||||
useRecoilState(mapLayersState);
|
||||
const [talasiclVisible, setTalasiclVisible] = useRecoilState(mapLayersState);
|
||||
const [dauzVisible, setDauzVisible] = useRecoilState(mapLayersState);
|
||||
const [smsfunkmodemVisible, setSmsfunkmodemVisible] =
|
||||
useRecoilState(mapLayersState);
|
||||
const [sonstigeVisible, setSonstigeVisible] = useRecoilState(mapLayersState);
|
||||
const [ulafVisible, setUlafVisible] = useRecoilState(mapLayersState);
|
||||
|
||||
const [talasMarkers, setTalasMarkers] = useState([]); //----------------station.System === 1
|
||||
const [eciMarkers, setEciMarkers] = useState([]); //--------------------station.System === 2
|
||||
const [gsmModemMarkers, setGsmModemMarkers] = useState([]); //----------station.System === 5
|
||||
const [ciscoRouterMarkers, setCiscoRouterMarkers] = useState([]); //----station.System === 6
|
||||
const [wagoMarkers, setWagoMarkers] = useState([]); //------------------station.System === 7
|
||||
const [siemensMarkers, setSiemensMarkers] = useState([]); //------------station.System === 8
|
||||
const [otdrMarkers, setOtdrMarkers] = useState([]); //------------------station.System === 9
|
||||
const [wdmMarkers, setWdmMarkers] = useState([]); //--------------------station.System === 10
|
||||
const [gmaMarkers, setGmaMarkers] = useState([]); //--------------------station.System === 11
|
||||
const [messstellenMarkers, setMessstellenMarkers] = useState([]); //----station.System === 13
|
||||
const [talasiclMarkers, setTalasiclMarkers] = useState([]); //----------station.System === 100
|
||||
const [dauzMarkers, setDauzMarkers] = useState([]); //------------------station.System === 110
|
||||
const [smsfunkmodemMarkers, setSmsfunkmodemMarkers] = useState([]); //--station.System === 111
|
||||
const [sonstigeMarkers, setSonstigeMarkers] = useState([]); //----------station.System === 200
|
||||
const [ulafMarkers, setUlafMarkers] = useState([]); //------------------ no exist
|
||||
//--------------------------------------------------------------------------------
|
||||
function determinePriority(iconPath) {
|
||||
if (iconPath.includes("critical")) return 1; // Highest priority
|
||||
if (iconPath.includes("major")) return 2;
|
||||
if (iconPath.includes("minor")) return 3;
|
||||
if (iconPath.includes("system")) return 4;
|
||||
return 5; // Default priority (lowest)
|
||||
}
|
||||
// Daten von einer externen Quelle laden
|
||||
const createAndSetMarkers = async (systemId, setMarkersFunction) => {
|
||||
try {
|
||||
const response1 = await fetch(config.mapGisStationsStaticDistrictUrl);
|
||||
const jsonResponse = await response1.json();
|
||||
const response2 = await fetch(config.mapGisStationsStatusDistrictUrl);
|
||||
const statusResponse = await response2.json();
|
||||
|
||||
const getIdSystemAndAllowValueMap = new Map(
|
||||
GisSystemStatic.map((system) => [system.IdSystem, system.Allow])
|
||||
);
|
||||
console.log("getIdSystemAndAllowValueMap:", getIdSystemAndAllowValueMap);
|
||||
|
||||
if (jsonResponse.Points && statusResponse.Statis) {
|
||||
const statisMap = new Map(
|
||||
statusResponse.Statis.map((s) => [s.IdLD, s])
|
||||
);
|
||||
let markersData = jsonResponse.Points.filter(
|
||||
(station) =>
|
||||
station.System === systemId &&
|
||||
getIdSystemAndAllowValueMap.get(station.System) === 1
|
||||
).map((station) => {
|
||||
const statis = statisMap.get(station.IdLD);
|
||||
const iconPath = statis
|
||||
? `img/icons/${statis.Na}-marker-icon-${station.Icon}.png`
|
||||
: `img/icons/marker-icon-${station.Icon}.png`;
|
||||
|
||||
const marker = L.marker([station.X, station.Y], {
|
||||
icon: L.icon({
|
||||
iconUrl: iconPath,
|
||||
iconSize: [25, 41],
|
||||
iconAnchor: [12, 41],
|
||||
popupAnchor: [1, -34],
|
||||
}),
|
||||
areaName: station.Area_Name,
|
||||
link: station.Link,
|
||||
bounceOnAdd: !!statis,
|
||||
});
|
||||
|
||||
marker.bindPopup(`
|
||||
<div class="bg-white rounded-lg">
|
||||
<h3 class="text-lg font-semibold text-gray-900">${station.LD_Name}</h3>
|
||||
<p class="text-gray-800"><strong>Gerät:</strong> ${station.Device}</p>
|
||||
<p class="text-gray-800"><strong>Zone:</strong> ${station.Area_Short} (${station.Area_Name})</p>
|
||||
<p class="text-gray-800"><strong>Standort:</strong> ${station.Location_Short} (${station.Location_Name})</p>
|
||||
</div>
|
||||
`);
|
||||
return marker;
|
||||
});
|
||||
|
||||
setMarkersFunction(markersData);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching data: ", error);
|
||||
}
|
||||
};
|
||||
//--------------------------------------------------------------------------------
|
||||
|
||||
const mapLayersVisibility = useRecoilValue(mapLayersState);
|
||||
|
||||
const handleCheckboxChange = (name, event) => {
|
||||
const { checked } = event.target;
|
||||
const internalName = layerNames[name] || name; // Nutzt den internen Namen, wenn vorhanden, sonst den originalen Namen
|
||||
|
||||
setMapLayersVisibility((prev) => {
|
||||
return {
|
||||
...prev,
|
||||
[internalName]: checked,
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
//------------------------------------------
|
||||
//------------------------------------------ */
|
||||
const selectedArea = useRecoilValue(selectedAreaState);
|
||||
|
||||
// Combine all markers into a single array
|
||||
const allMarkers = [
|
||||
...talasMarkers,
|
||||
...eciMarkers,
|
||||
...gsmModemMarkers,
|
||||
...ciscoRouterMarkers,
|
||||
...wagoMarkers,
|
||||
...siemensMarkers,
|
||||
...otdrMarkers,
|
||||
...wdmMarkers,
|
||||
...gmaMarkers,
|
||||
...messstellenMarkers,
|
||||
...talasiclMarkers,
|
||||
...dauzMarkers,
|
||||
...smsfunkmodemMarkers,
|
||||
...sonstigeMarkers,
|
||||
...ulafMarkers,
|
||||
];
|
||||
|
||||
// Function to find a marker by areaName across all groups
|
||||
const findMyMarker = (areaName) => {
|
||||
return allMarkers.find((marker) => marker.options.areaName === areaName);
|
||||
};
|
||||
//--------------------------------------------------------------
|
||||
//---------------------------------------------------------
|
||||
// Now update checkOverlappingMarkers to check if oms is initialized
|
||||
function checkOverlappingMarkers(map, markers, plusIcon) {
|
||||
// Ensure markers is always an array
|
||||
if (!Array.isArray(markers)) {
|
||||
//console.error("The `markers` argument is not an array:", markers);
|
||||
return;
|
||||
}
|
||||
|
||||
const overlappingGroups = {};
|
||||
|
||||
// Group markers by coordinates as strings
|
||||
markers.forEach((marker) => {
|
||||
const latlngStr = marker.getLatLng().toString();
|
||||
if (overlappingGroups[latlngStr]) {
|
||||
overlappingGroups[latlngStr].push(marker);
|
||||
} else {
|
||||
overlappingGroups[latlngStr] = [marker];
|
||||
}
|
||||
});
|
||||
|
||||
// Add plus markers at coordinates where overlaps occur
|
||||
for (const coords in overlappingGroups) {
|
||||
if (overlappingGroups[coords].length > 1) {
|
||||
const latLng = L.latLng(coords.match(/[-.\d]+/g).map(Number));
|
||||
const plusMarker = L.marker(latLng, { icon: plusIcon });
|
||||
plusMarker.addTo(map);
|
||||
|
||||
//console.log("Adding plus icon marker at", latLng);
|
||||
}
|
||||
}
|
||||
}
|
||||
//---------------------------------------------------------
|
||||
//------------------------------------------
|
||||
// API-Daten laden für GisStationsStaticDistrict
|
||||
//http://10.10.0.13/talas5/ClientData/WebServiceMap.asmx/GisStationsStaticDistrict?idMap=10&idUser=485
|
||||
useEffect(() => {
|
||||
@@ -207,8 +559,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
}, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
|
||||
//------------------------------------------
|
||||
|
||||
const [gisSystemStaticLoaded, setGisSystemStaticLoaded] = useState(false);
|
||||
|
||||
//GisSystemStatic Daten laden
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
@@ -236,36 +586,12 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
}, []);
|
||||
//------------------------------------------
|
||||
|
||||
const offlineTileLayer = "../TileMap/mapTiles/{z}/{x}/{y}.png";
|
||||
const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
|
||||
//const onlineTileLayer = "mapTiles/{z}/{x}/{y}.png";
|
||||
// Create map layers
|
||||
const TALAS = new L.layerGroup();
|
||||
const ECI = new L.layerGroup();
|
||||
const ULAF = new L.layerGroup();
|
||||
const GSMModem = new L.layerGroup();
|
||||
const CiscoRouter = new L.layerGroup();
|
||||
const WAGO = new L.layerGroup();
|
||||
const Siemens = new L.layerGroup();
|
||||
const OTDR = new L.layerGroup();
|
||||
const WDM = new L.layerGroup();
|
||||
const GMA = new L.layerGroup();
|
||||
const Sonstige = new L.layerGroup();
|
||||
const TALASICL = new L.layerGroup();
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window !== "undefined") {
|
||||
//console.log("Window height from config:", config.windowHeight);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Funktionen zur Überwachung der Internetverbindung
|
||||
const checkInternet = () => {
|
||||
fetch("https://tile.openstreetmap.org/1/1/1.png", { method: "HEAD" })
|
||||
.then((response) => setOnline(response.ok))
|
||||
.catch(() => setOnline(false));
|
||||
};
|
||||
let initMap = [];
|
||||
// Initialisierung der karte und hinzuügen der Layers
|
||||
useEffect(() => {
|
||||
if (mapRef.current && !map) {
|
||||
@@ -349,23 +675,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
console.log("trigger in MapComponent.js:", poiReadTrigger);
|
||||
}, [mapRef, map, poiReadTrigger]); // Prüfe die Abhängigkeiten sorgfältig
|
||||
|
||||
//------------------------------------------
|
||||
function parsePoint(pointString) {
|
||||
const match = pointString.match(
|
||||
/POINT\s*\((\d+(\.\d+)?)\s+(\d+(\.\d+)?)\)/
|
||||
);
|
||||
if (match) {
|
||||
return {
|
||||
longitude: parseFloat(match[1]),
|
||||
latitude: parseFloat(match[3]), // Achtung: Index 3 für die zweite Koordinate, wegen der Gruppe (\.\d+)?
|
||||
};
|
||||
} else {
|
||||
// Handle the error or return a default/fallback value
|
||||
console.error("Invalid POINT format:", pointString);
|
||||
return null; // Oder eine sinnvolle Standardantwort
|
||||
}
|
||||
}
|
||||
//----------------------------------
|
||||
// poiTyp Daten hinzufügen
|
||||
//------------------------------------------
|
||||
// Funktion zum Abrufen der poiTyp Daten
|
||||
@@ -392,194 +701,8 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
console.log("poiTypData aktualisiert:", poiTypData);
|
||||
}, [poiTypData]);
|
||||
|
||||
//----------------------------------------------------
|
||||
//-----Kontextmenu----------------
|
||||
function addContextMenuToMarker(marker) {
|
||||
marker.bindContextMenu({
|
||||
contextmenu: true,
|
||||
contextmenuWidth: 140,
|
||||
contextmenuItems: [
|
||||
{
|
||||
text: "Station öffnen (Tab)",
|
||||
icon: "/img/screen_new.png",
|
||||
callback: (e) => openInNewTab(e, marker),
|
||||
},
|
||||
{
|
||||
text: "Station öffnen",
|
||||
icon: "/img/screen_same.png",
|
||||
callback: (e) => openInSameWindow(e, marker),
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
// Funktion zum Öffnen in einem neuen Tab
|
||||
function openInNewTab(e, marker) {
|
||||
console.log("Marker data:", baseUrl + marker.options.link);
|
||||
window.open(baseUrl + marker.options.link, "_blank");
|
||||
}
|
||||
|
||||
// Funktion zum Öffnen im gleichen Fenster
|
||||
function openInSameWindow(e, marker) {
|
||||
console.log("Marker data:", baseUrl + marker.options.link);
|
||||
window.location.href = baseUrl + marker.options.link;
|
||||
}
|
||||
|
||||
const zoomIn = (e) => {
|
||||
initMap.flyTo(e.latlng, 12);
|
||||
//console.log("ZoomIn koordinaten in MapComponent", e.latlng);
|
||||
};
|
||||
|
||||
const zoomOut = (e) => {
|
||||
fly();
|
||||
};
|
||||
const centerHere = (e) => {
|
||||
initMap.panTo(e.latlng);
|
||||
};
|
||||
|
||||
// Funktion zum Anzeigen der Koordinaten
|
||||
const showCoordinates = (e) => {
|
||||
alert(
|
||||
"Breitengrad: " +
|
||||
e.latlng.lat.toFixed(5) +
|
||||
"\nLängengrad: " +
|
||||
e.latlng.lng.toFixed(5)
|
||||
);
|
||||
};
|
||||
const showData = (e) => {};
|
||||
const showTalas = (e) => {
|
||||
map.addLayer(TALAS);
|
||||
loadData();
|
||||
};
|
||||
const hideTalas = (e) => {
|
||||
map.removeLayer(TALAS);
|
||||
loadData();
|
||||
};
|
||||
const showGSM = (e) => {
|
||||
map.addLayer(GMA);
|
||||
loadData();
|
||||
};
|
||||
const hideGSM = (e) => {
|
||||
map.removeLayer(GMA);
|
||||
loadData();
|
||||
};
|
||||
|
||||
// Kontextmenü Callback für "Station hinzufügen"
|
||||
const addStationCallback = (event) => {
|
||||
setPopupCoordinates(event.latlng); // Koordinaten des Klicks verwenden
|
||||
setShowPopup(true); // Popup öffnen
|
||||
};
|
||||
//-----Kontextmenu----ende------------
|
||||
// Ensure this function is only called when map is initialized and available
|
||||
/* const showAddStationPopup = (e, map) => {
|
||||
const container = L.DomUtil.create("div");
|
||||
|
||||
// Create a root container for the React component inside the popup
|
||||
const root = ReactDOM.createRoot(container);
|
||||
|
||||
root.render(
|
||||
|
||||
<ShowAddStationPopup map={initMap} latlng={e.latlng} />
|
||||
|
||||
);
|
||||
|
||||
// Create and configure the popup
|
||||
L.popup().setLatLng(e.latlng).setContent(container).openOn(initMap);
|
||||
|
||||
// Cleanup when the popup is closed
|
||||
initMap.on("popupclose", () => {
|
||||
root.unmount(); // Use unmount method from the root
|
||||
});
|
||||
}; */
|
||||
|
||||
// Inside your ShowAddStationPopup component
|
||||
/* useEffect(() => {
|
||||
// Cleanup function to unmount React component
|
||||
return () => {
|
||||
if (container._reactRoot) {
|
||||
container._reactRoot.unmount();
|
||||
}
|
||||
};
|
||||
}, []); */
|
||||
|
||||
//------------------------------------------
|
||||
|
||||
// Hinzufügen eines neuen Standorts (Marker) in MySQL-DB-Tabelle (poi)
|
||||
/* async function handleSubmit(event) {
|
||||
event.preventDefault();
|
||||
const form = event.target;
|
||||
|
||||
// Einfache Validierung, um sicherzustellen, dass idPoiTyp eine Zahl ist
|
||||
if (!form.idPoiTyp.value || isNaN(form.idPoiTyp.value)) {
|
||||
alert("Bitte geben Sie eine gültige ID für den Poi-Typ ein.");
|
||||
return; // Beendet die Funktion, um das Senden von ungültigen Daten zu verhindern
|
||||
}
|
||||
|
||||
const data = {
|
||||
name: form.name.value,
|
||||
type: form.type.value,
|
||||
idPoi: form.idPoi.value,
|
||||
idPoiTyp: form.idPoiTyp.value,
|
||||
latitude: form.lat.value,
|
||||
longitude: form.lng.value,
|
||||
};
|
||||
|
||||
// Senden der Daten an den Server
|
||||
const response = await fetch("/api/addLocation", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
console.log("Station erfolgreich hinzugefügt");
|
||||
// Weitere Aktionen nach erfolgreichem Hinzufügen
|
||||
} else {
|
||||
console.error("Fehler beim Hinzufügen der Station");
|
||||
// Fehlerbehandlung
|
||||
}
|
||||
} */
|
||||
|
||||
//---------------------------------------
|
||||
|
||||
function fly(stationValue) {
|
||||
var x = 51.41321407879154;
|
||||
var y = 7.739617925303934;
|
||||
var zoom = 7;
|
||||
|
||||
initMap.flyTo([x, y], zoom);
|
||||
}
|
||||
|
||||
function getIconPath(status, iconNumber, marker) {
|
||||
let path = status
|
||||
? `TileMap/img/icons/${status}-marker-icon-${iconNumber}.png`
|
||||
: `TileMap/img/icons/marker-icon-${iconNumber}.png`;
|
||||
|
||||
// Wenn der Pfad das Wort "critical" oder "major" enthält, dann den Marker bouncing options setzen
|
||||
if (
|
||||
path.includes("critical") || // Priorität 1
|
||||
path.includes("major") || // Priorität 2
|
||||
path.includes("minor") || // Priorität 3
|
||||
path.includes("system") // Priorität 4
|
||||
) {
|
||||
// Setze Bouncing-Optionen
|
||||
marker.setBouncingOptions({
|
||||
bounceHeight: 15, // Höhe des Bounces
|
||||
contractHeight: 12, // Höhe des Einzugs beim Landen
|
||||
bounceSpeed: 52, // Geschwindigkeit des Bounces
|
||||
contractSpeed: 52, // Geschwindigkeit des Einzugs
|
||||
shadowAngle: null, // Standard-Schattenwinkel
|
||||
});
|
||||
// Check if the icon path includes 'critical'
|
||||
if (path.includes("critical")) {
|
||||
// marker.bounce(3);
|
||||
}
|
||||
}
|
||||
|
||||
return path;
|
||||
}
|
||||
//------------------------------------------
|
||||
// Funktion, um die name und idPoiTyp von `poiTyp` MySQL DB Tabelle in einer Map zu speichern
|
||||
useEffect(() => {
|
||||
const fetchPoiTypData = async () => {
|
||||
@@ -704,115 +827,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
}
|
||||
}, [map, locations, onLocationUpdate, poiReadTrigger, isPoiTypLoaded]);
|
||||
|
||||
//------------------------------------------
|
||||
|
||||
function parsePoint(position) {
|
||||
const [longitude, latitude] = position.slice(6, -1).split(" ");
|
||||
return { latitude: parseFloat(latitude), longitude: parseFloat(longitude) };
|
||||
}
|
||||
//-----------------------------------------------------------------
|
||||
// TALAS Marker hinzufügen
|
||||
//-----------------------------------------------------------------
|
||||
// Reihenfolge nach API sortiert mit der Attribute "System"
|
||||
const [talasVisible, setTalasVisible] = useRecoilState(mapLayersState);
|
||||
const [eciVisible, setEciVisible] = useRecoilState(mapLayersState);
|
||||
const [gsmModemVisible, setGsmModemVisible] = useRecoilState(mapLayersState);
|
||||
const [ciscoRouterVisible, setCiscoRouterVisible] =
|
||||
useRecoilState(mapLayersState);
|
||||
const [wagoVisible, setWagoVisible] = useRecoilState(mapLayersState);
|
||||
const [siemensVisible, setSiemensVisible] = useRecoilState(mapLayersState);
|
||||
const [otdrVisible, setOtdrVisible] = useRecoilState(mapLayersState);
|
||||
const [wdmVisible, setWdmVisible] = useRecoilState(mapLayersState);
|
||||
const [gmaVisible, setGmaVisible] = useRecoilState(mapLayersState);
|
||||
const [messstellenVisible, setMessstellenVisible] =
|
||||
useRecoilState(mapLayersState);
|
||||
const [talasiclVisible, setTalasiclVisible] = useRecoilState(mapLayersState);
|
||||
const [dauzVisible, setDauzVisible] = useRecoilState(mapLayersState);
|
||||
const [smsfunkmodemVisible, setSmsfunkmodemVisible] =
|
||||
useRecoilState(mapLayersState);
|
||||
const [sonstigeVisible, setSonstigeVisible] = useRecoilState(mapLayersState);
|
||||
const [ulafVisible, setUlafVisible] = useRecoilState(mapLayersState);
|
||||
|
||||
const [talasMarkers, setTalasMarkers] = useState([]); //----------------station.System === 1
|
||||
const [eciMarkers, setEciMarkers] = useState([]); //--------------------station.System === 2
|
||||
const [gsmModemMarkers, setGsmModemMarkers] = useState([]); //----------station.System === 5
|
||||
const [ciscoRouterMarkers, setCiscoRouterMarkers] = useState([]); //----station.System === 6
|
||||
const [wagoMarkers, setWagoMarkers] = useState([]); //------------------station.System === 7
|
||||
const [siemensMarkers, setSiemensMarkers] = useState([]); //------------station.System === 8
|
||||
const [otdrMarkers, setOtdrMarkers] = useState([]); //------------------station.System === 9
|
||||
const [wdmMarkers, setWdmMarkers] = useState([]); //--------------------station.System === 10
|
||||
const [gmaMarkers, setGmaMarkers] = useState([]); //--------------------station.System === 11
|
||||
const [messstellenMarkers, setMessstellenMarkers] = useState([]); //----station.System === 13
|
||||
const [talasiclMarkers, setTalasiclMarkers] = useState([]); //----------station.System === 100
|
||||
const [dauzMarkers, setDauzMarkers] = useState([]); //------------------station.System === 110
|
||||
const [smsfunkmodemMarkers, setSmsfunkmodemMarkers] = useState([]); //--station.System === 111
|
||||
const [sonstigeMarkers, setSonstigeMarkers] = useState([]); //----------station.System === 200
|
||||
const [ulafMarkers, setUlafMarkers] = useState([]); //------------------ no exist
|
||||
//--------------------------------------------------------------------------------
|
||||
function determinePriority(iconPath) {
|
||||
if (iconPath.includes("critical")) return 1; // Highest priority
|
||||
if (iconPath.includes("major")) return 2;
|
||||
if (iconPath.includes("minor")) return 3;
|
||||
if (iconPath.includes("system")) return 4;
|
||||
return 5; // Default priority (lowest)
|
||||
}
|
||||
// Daten von einer externen Quelle laden
|
||||
const createAndSetMarkers = async (systemId, setMarkersFunction) => {
|
||||
try {
|
||||
const response1 = await fetch(config.mapGisStationsStaticDistrictUrl);
|
||||
const jsonResponse = await response1.json();
|
||||
const response2 = await fetch(config.mapGisStationsStatusDistrictUrl);
|
||||
const statusResponse = await response2.json();
|
||||
|
||||
const getIdSystemAndAllowValueMap = new Map(
|
||||
GisSystemStatic.map((system) => [system.IdSystem, system.Allow])
|
||||
);
|
||||
console.log("getIdSystemAndAllowValueMap:", getIdSystemAndAllowValueMap);
|
||||
|
||||
if (jsonResponse.Points && statusResponse.Statis) {
|
||||
const statisMap = new Map(
|
||||
statusResponse.Statis.map((s) => [s.IdLD, s])
|
||||
);
|
||||
let markersData = jsonResponse.Points.filter(
|
||||
(station) =>
|
||||
station.System === systemId &&
|
||||
getIdSystemAndAllowValueMap.get(station.System) === 1
|
||||
).map((station) => {
|
||||
const statis = statisMap.get(station.IdLD);
|
||||
const iconPath = statis
|
||||
? `img/icons/${statis.Na}-marker-icon-${station.Icon}.png`
|
||||
: `img/icons/marker-icon-${station.Icon}.png`;
|
||||
|
||||
const marker = L.marker([station.X, station.Y], {
|
||||
icon: L.icon({
|
||||
iconUrl: iconPath,
|
||||
iconSize: [25, 41],
|
||||
iconAnchor: [12, 41],
|
||||
popupAnchor: [1, -34],
|
||||
}),
|
||||
areaName: station.Area_Name,
|
||||
link: station.Link,
|
||||
bounceOnAdd: !!statis,
|
||||
});
|
||||
|
||||
marker.bindPopup(`
|
||||
<div class="bg-white rounded-lg">
|
||||
<h3 class="text-lg font-semibold text-gray-900">${station.LD_Name}</h3>
|
||||
<p class="text-gray-800"><strong>Gerät:</strong> ${station.Device}</p>
|
||||
<p class="text-gray-800"><strong>Zone:</strong> ${station.Area_Short} (${station.Area_Name})</p>
|
||||
<p class="text-gray-800"><strong>Standort:</strong> ${station.Location_Short} (${station.Location_Name})</p>
|
||||
</div>
|
||||
`);
|
||||
return marker;
|
||||
});
|
||||
|
||||
setMarkersFunction(markersData);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching data: ", error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (gisSystemStaticLoaded && map) {
|
||||
createAndSetMarkers(1, setTalasMarkers); // TALAS-System
|
||||
@@ -1237,38 +1251,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
|
||||
//console.log("sonstige", sonstigeMarkers);
|
||||
//-------------------------------------------
|
||||
//--------------------------------------------------------------------------------
|
||||
|
||||
const mapLayersVisibility = useRecoilValue(mapLayersState);
|
||||
|
||||
/* useEffect(() => {
|
||||
if (!map || !talasMarkers) return;
|
||||
|
||||
const toggleLayer = (isVisible) => {
|
||||
if (isVisible) {
|
||||
talasMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
|
||||
} else {
|
||||
talasMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
|
||||
}
|
||||
};
|
||||
|
||||
// Apply visibility state to the TALAS layer
|
||||
toggleLayer(mapLayersVisibility.TALAS);
|
||||
}, [map, talasMarkers, mapLayersVisibility.TALAS]); */ // Depend on map, markers array, and visibility state
|
||||
|
||||
const handleCheckboxChange = (name, event) => {
|
||||
const { checked } = event.target;
|
||||
const internalName = layerNames[name] || name; // Nutzt den internen Namen, wenn vorhanden, sonst den originalen Namen
|
||||
|
||||
setMapLayersVisibility((prev) => {
|
||||
return {
|
||||
...prev,
|
||||
[internalName]: checked,
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
//------------------------------------------
|
||||
|
||||
// Funktion zum Ein- und Ausblenden der TALAS-Marker basierend auf dem Zustand von mapLayersVisibility.TALAS
|
||||
|
||||
@@ -1337,13 +1319,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
}, [map, gsmModemMarkers, mapLayersVisibility.GSMModem]);
|
||||
|
||||
//------------------------------------------ */
|
||||
const layerNames = {
|
||||
"GSM Modem": "GSMMODEM",
|
||||
"Cisco Router": "CiscoRouter",
|
||||
"TALAS ICL": "TALASICL",
|
||||
"SMS-Funkmodem": "GSMModem",
|
||||
};
|
||||
//------------------------------------------ */
|
||||
|
||||
// Funktion zum Ein- und Ausblenden der CiscoRouter-Marker basierend auf dem Zustand von mapLayersVisibility.CiscoRouter
|
||||
|
||||
useEffect(() => {
|
||||
@@ -1538,31 +1514,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
}, [map, messstellenMarkers, mapLayersVisibility.Messstellen]);
|
||||
|
||||
//------------------------------------------ */
|
||||
const selectedArea = useRecoilValue(selectedAreaState);
|
||||
|
||||
// Combine all markers into a single array
|
||||
const allMarkers = [
|
||||
...talasMarkers,
|
||||
...eciMarkers,
|
||||
...gsmModemMarkers,
|
||||
...ciscoRouterMarkers,
|
||||
...wagoMarkers,
|
||||
...siemensMarkers,
|
||||
...otdrMarkers,
|
||||
...wdmMarkers,
|
||||
...gmaMarkers,
|
||||
...messstellenMarkers,
|
||||
...talasiclMarkers,
|
||||
...dauzMarkers,
|
||||
...smsfunkmodemMarkers,
|
||||
...sonstigeMarkers,
|
||||
...ulafMarkers,
|
||||
];
|
||||
|
||||
// Function to find a marker by areaName across all groups
|
||||
const findMyMarker = (areaName) => {
|
||||
return allMarkers.find((marker) => marker.options.areaName === areaName);
|
||||
};
|
||||
|
||||
// Effect to handle navigation to selected area
|
||||
useEffect(() => {
|
||||
@@ -1574,15 +1525,8 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
}
|
||||
}, [selectedArea, map, allMarkers]); // Include allMarkers in the dependencies
|
||||
|
||||
/* const findMyMarker = (areaName) => {
|
||||
// Angenommen, jeder Marker hat eine option `areaName`, die beim Erstellen gesetzt wurde.
|
||||
return talasMarkers.find((marker) => marker.options.areaName === areaName);
|
||||
}; */
|
||||
|
||||
//------------------------------------------
|
||||
|
||||
const zoomTrigger = useRecoilValue(zoomTriggerState);
|
||||
|
||||
useEffect(() => {
|
||||
if (map) {
|
||||
var x = 51.41321407879154;
|
||||
@@ -1605,37 +1549,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
// Beispiel: Daten neu laden oder aktualisieren
|
||||
}, [poiReadTrigger]);
|
||||
//---------------------------------------------------------
|
||||
// Now update checkOverlappingMarkers to check if oms is initialized
|
||||
function checkOverlappingMarkers(map, markers, plusIcon) {
|
||||
// Ensure markers is always an array
|
||||
if (!Array.isArray(markers)) {
|
||||
//console.error("The `markers` argument is not an array:", markers);
|
||||
return;
|
||||
}
|
||||
|
||||
const overlappingGroups = {};
|
||||
|
||||
// Group markers by coordinates as strings
|
||||
markers.forEach((marker) => {
|
||||
const latlngStr = marker.getLatLng().toString();
|
||||
if (overlappingGroups[latlngStr]) {
|
||||
overlappingGroups[latlngStr].push(marker);
|
||||
} else {
|
||||
overlappingGroups[latlngStr] = [marker];
|
||||
}
|
||||
});
|
||||
|
||||
// Add plus markers at coordinates where overlaps occur
|
||||
for (const coords in overlappingGroups) {
|
||||
if (overlappingGroups[coords].length > 1) {
|
||||
const latLng = L.latLng(coords.match(/[-.\d]+/g).map(Number));
|
||||
const plusMarker = L.marker(latLng, { icon: plusIcon });
|
||||
plusMarker.addTo(map);
|
||||
|
||||
//console.log("Adding plus icon marker at", latLng);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//---------------------------------------------------------
|
||||
useEffect(() => {
|
||||
|
||||
Reference in New Issue
Block a user