Re: KML Dateien in leaflet darstellen

firechhe wrote:

Ich habe mich deshalb mal an "PointToLayer" versucht
https://leafletjs.com/examples/geojson/

Zur Veranschaulichung dieses Beispiel (#39) mal Schritt für Schritt:

1. Omnivore Custom Layers Style Beispiel kopieren (Kommentar entfernt)

␣␣␣var␣customLayer␣=␣L.geoJson(null,␣{
style:␣function(feature)␣{
return␣{␣color:␣'#f00'␣};
}
});

Da gehören auch die schließenden Klammern dazu, die bei dir in #39 fehlen, also die letzten beiden Zeilen von oben:

␣␣␣␣␣␣␣}
});

Zu jeder öffnenden Klammer muss es auch eine entsprechende schließende Klammer geben, in umgekehrter Reihenfolge. Den Inhalt rückt man ein, so dass man die zusammengehörenden Zeilen mit der öffnenden (hinten) und schließenden geschweiften Klammer (vorne) leicht zuordnen kann.

Bei dieser oft üblichen kompakten Schreibweise oben werden die Parameter (mit Komma getrennte Übergabe-Werte in runden Klammern) einer Funktion an Ort und Stelle definiert. Auch über mehrere Zeilen, wenn eine Funktion oder ein Objekt übergeben wird.

Die Funktions-Parameter kann man aber auch erst Variablen zuweisen und dann die Variablen übergeben, das macht es etwas leserlicher. Hier das obige kompakte Beispiel aufgetrennt:

␣␣␣var␣redStyle␣=␣function(feature)␣{
return␣{␣color:␣'#f00'␣};
};
var␣options␣=␣{
style:␣redStyle
};
var␣customLayer␣=␣L.geoJson(null,␣options);

Jeweils in einer Zeile:

␣␣␣var␣redStyle␣=␣function(feature)␣{␣return␣{␣color:␣'#f00'␣};␣};
var␣options␣=␣{␣style:␣redStyle␣};
var␣customLayer␣=␣L.geoJson(null,␣options);

Der "options" Parameter ist ein Objekt und kommt bei Leaflet öfter vor, hier für L.geoJSON.

Übung 😉: Obige drei Zeilen wieder in das Ausgangsformat unter 1. bringen: Variablen-Referenzen durch Wert ersetzen, Zeilenumbruch nach öffnender und vor schließender geschweifter Klammer.

2. customLayer Parameter hinzufügen

␣␣␣var␣pumpenstationen␣=␣omnivore.kml('/desktop/kml/pumpenstationen.kml',␣null,␣customLayer)
.addTo(map).on('ready',␣popupBindenWennAlleGeladen);

Bei deinem Code in #39 fehlt der "null" Parameter in der Mitte. Der ist aber wichtig, damit die Position und Reihenfolge der Parameter stimmt. Optionale Parameter können nur am Ende weggelassen werden, dazwischen muss dann eben "null" übergeben werden.

Der momentane Code sieht jetzt so aus und sollte ohne Fehler im Editor oder der Chrome Console laufen:

␣␣␣var␣customLayer␣=␣L.geoJson(null,␣{
style:␣function(feature)␣{
return␣{␣color:␣'#f00'␣};
}
});

var␣pumpenstationen␣=␣omnivore.kml('/desktop/kml/pumpenstationen.kml',␣null,␣customLayer)
.addTo(map).on('ready',␣popupBindenWennAlleGeladen);

Geändert hat sich noch nichts, da die "style" Option nur für Vektoren (Linien, Polygone und Punkte als CircleMarker) gilt, nicht aber für Standard-Marker mit Icon.

3. pointToLayer statt style

Jetzt ersetzen wir die "style" mit der "pointToLayer" Option, anhand des Beispiels aus dem GeoJSON Tutorial:

␣␣␣var␣geojsonMarkerOptions␣=␣{
radius:␣8,
fillColor:␣"#ff7800",
color:␣"#000",
weight:␣1,
opacity:␣1,
fillOpacity:␣0.8
};

var␣customLayer␣=␣L.geoJson(null,␣{
pointToLayer:␣function␣(feature,␣latlng)␣{
return␣L.circleMarker(latlng,␣geojsonMarkerOptions);
}
});

Die "geojsonMarkerOptions" fügen wir nur kurz zum Testen ebenfalls hinzu, damit wir diesen Schritt auch gleich auführen können - die Pumpenstationen werden jetzt als Kreise dargestellt.

4. Awesome Markers statt CircleMarker

Diesen Schritt überlasse ich jetzt dir.

Hinweise:

Leaflet GeoJSON Tutorial wrote:

This function [pointToLayer] is passed a LatLng and should return an instance of ILayer, in this case likely a Marker or CircleMarker.

- pointToLayer Doku zeigt die Standard-Implementierung