Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

OverlappingMarkerSpiderfier funktioniert , aber muss noch optimiert werden, bei 2 Marker in einem gleichen Koordinaten kein Problem, bei 5 Devices in eeinem Koordinaten muss zuerst reinzoomen dann funktioniert es

Browse Source
This commit is contained in:
ISA
2024-04-18 07:50:03 +02:00
parent b0a3d7dec9
commit 6d74227747
1 changed files with 30 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
lib/OverlappingMarkerSpiderfier.js
View File

@@ -5,12 +5,12 @@ export class OverlappingMarkerSpiderfier {
this.map = map; this.map = map;
this.markers = []; this.markers = [];
this.markerListeners = []; this.markerListeners = [];
this.listeners = {}; this.keepSpiderfied = options.keepSpiderfied || false;
this.nearbyDistance = options.nearbyDistance || 20; this.nearbyDistance = options.nearbyDistance || 20;
this.circleSpiralSwitchover = options.circleSpiralSwitchover || 9; this.circleSpiralSwitchover = options.circleSpiralSwitchover || 9;
this.circleFootSeparation = options.circleFootSeparation || 25; // pixels this.circleFootSeparation = options.circleFootSeparation || 25;
this.circleStartAngle = options.circleStartAngle || Math.PI / 6; this.circleStartAngle = options.circleStartAngle || Math.PI / 6;
this.spiralFootSeparation = options.spiralFootSeparation || 28; // pixels this.spiralFootSeparation = options.spiralFootSeparation || 28;
this.spiralLengthStart = options.spiralLengthStart || 11; this.spiralLengthStart = options.spiralLengthStart || 11;
this.spiralLengthFactor = options.spiralLengthFactor || 5; this.spiralLengthFactor = options.spiralLengthFactor || 5;
this.legWeight = options.legWeight || 1.5; this.legWeight = options.legWeight || 1.5;
@@ -20,8 +20,8 @@ export class OverlappingMarkerSpiderfier {
}; };
this.initMarkerArrays(); this.initMarkerArrays();
this.map.on("click", this.unspiderfy.bind(this)); this.map.on("click", () => this.unspiderfy());
this.map.on("zoomend", this.unspiderfy.bind(this)); this.map.on("zoomend", () => this.unspiderfy());
} }
initMarkerArrays() { initMarkerArrays() {
@@ -30,8 +30,9 @@ export class OverlappingMarkerSpiderfier {
} }
addMarker(marker) { addMarker(marker) {
if (marker._oms) return this; if (!marker._oms) {
marker._oms = true; marker._oms = {}; // Stellt sicher, dass _oms ein Objekt ist
}
const listener = () => { const listener = () => {
this.spiderListener(marker); this.spiderListener(marker);
@@ -45,69 +46,55 @@ export class OverlappingMarkerSpiderfier {
} }
spiderListener(marker) { spiderListener(marker) {
const spidered = !!marker._omsData; const spidered = marker._oms.spidered;
if (!spidered) { if (!spidered) {
const nearMarkers = this.nearbyMarkers(marker); const nearMarkers = this.nearbyMarkers(marker);
if (nearMarkers.length > 1) { if (nearMarkers.length > 1) {
this.spiderfy(nearMarkers); this.spiderfy(nearMarkers);
} }
} else {
this.unspiderfy(); // Schließt alle gespiderfied Marker, wenn einer erneut geklickt wird
} }
} }
nearbyMarkers(marker) { nearbyMarkers(marker) {
const nearby = []; return this.markers.filter((m) => {
const markerPt = this.map.latLngToLayerPoint(marker.getLatLng()); const distance = this.map.distance(marker.getLatLng(), m.getLatLng());
this.markers.forEach((m) => { return distance < this.nearbyDistance && marker !== m;
if (m !== marker) {
const mPt = this.map.latLngToLayerPoint(m.getLatLng());
const distanceSq = this.ptDistanceSq(mPt, markerPt);
if (distanceSq < this.nearbyDistance * this.nearbyDistance) {
nearby.push(m);
}
}
}); });
return nearby;
} }
spiderfy(markers) { spiderfy(markers) {
const centerPt = this.map.latLngToLayerPoint(markers[0].getLatLng()); const centerPt = this.map.latLngToLayerPoint(markers[0].getLatLng());
markers.forEach((marker, index) => { markers.forEach((marker, i) => {
const angle = const angle = this.circleStartAngle + (i * 2 * Math.PI) / markers.length;
this.circleStartAngle + (index * 2 * Math.PI) / markers.length; const legLength = this.circleFootSeparation * (2 + i / markers.length);
const legLength =
this.circleFootSeparation * (2 + index / markers.length);
const newPt = L.point( const newPt = L.point(
centerPt.x + legLength * Math.cos(angle), centerPt.x + legLength * Math.cos(angle),
centerPt.y + legLength * Math.sin(angle) centerPt.y + legLength * Math.sin(angle)
); );
const newLatLng = this.map.layerPointToLatLng(newPt); const newLatLng = this.map.layerPointToLatLng(newPt);
if (!marker._oms) {
marker._oms = {}; // Stellt sicher, dass _oms ein Objekt ist
}
// Speichert die aktuelle Position, bevor sie verändert wird
marker._oms.usualPosition = marker.getLatLng();
marker._oms.spidered = true; // Markiert, dass der Marker gespiderfied ist
marker.setLatLng(newLatLng); marker.setLatLng(newLatLng);
marker.setZIndexOffset(1000); marker.setZIndexOffset(1000);
const polyline = L.polyline([marker.getLatLng(), newLatLng], {
color: this.legColors.usual,
weight: this.legWeight,
clickable: false,
});
this.map.addLayer(polyline);
}); });
} }
unspiderfy() { unspiderfy() {
this.markers.forEach((marker) => { this.markers.forEach((marker) => {
if (marker._omsData) { if (marker._oms && marker._oms.spidered) {
marker.setLatLng(marker._omsData.usualPosition); // Setzt den Marker nur dann zurück, wenn er gespiderfied war
marker.setLatLng(marker._oms.usualPosition);
marker.setZIndexOffset(0); marker.setZIndexOffset(0);
this.map.removeLayer(marker._omsData.leg); marker._oms.spidered = false; // Setzt zurück, dass der Marker nicht mehr gespiderfied ist
delete marker._omsData;
} }
}); });
} }
ptDistanceSq(pt1, pt2) {
const dx = pt1.x - pt2.x;
const dy = pt1.y - pt2.y;
return dx * dx + dy * dy;
}
} }