ich möchte gerne ein Video mit einer animierten Minikarte erstellen. Auf dieser Karte soll beispielsweise eine Route von A nach B animiert dargestellt werden. Animiert heißt für mich folgendes: Das Video ist 10 Sekunden lang. Die Route startet bei A und “wächst” jede Sekunde Richtung B.
Ich will ein Programm schreiben, welches für mich diese Aufgabe automatisiert.
Mir fehlt aber noch der Ansatz, wie ich das umsetzen kann. Bzw. stecke ich mit meinem bisherigen Ansatz in einer Sackgasse und komme nicht weiter. Ich hoffe, dass ich hier Hilfe finde.
Meine bisherigen Gedanken gehen in folgende Richtung: Ich nehme eine Bibliothek, mit der ich so eine Karte erstellen programmseitig erstellen kann und speichere je Animationsschritt die Karte als Bild. Die Bilder werden hinterher durch ein anderes Programm zu einer Animation zusammengefügt. Ich habe mich bereits mit Leaflet auseinandergesetzt. Das Speichern der Karte als Bild scheint aber (noch) nicht möglich zu sein. Entsprechende Bibliotheken für .Net scheinen entweder nicht so aktuell zu sein oder diese sind nur für mobile Entwicklung optimiert zu sein.
Ich suche ja auch seit langem nach einer “einfachen” Lösung für eine ähnliche Anforderung:
OSM-basierte Karte, hohe Zoomstufe mit vielen Details an einem Startpunkt, dann rauszoomen der Karte in einem Parabelflug zu einem Zielpunkt, also dort wieder weich reinzoomen,
und diese Animation als Video-Datei speichern.
Wer hätte da eine Idee, die vielleicht auch der ursprünglichen Frage im Thread dienlich sein könnte?
Mit Screencast-Software müsste es vermutlich einfach sein - analog zu Screenshots - einen Fensterbereich einer Anwendung als Video aufzunehmen. Also wie von mmd vorgeschlagen, einen Track per Leaflet Plugin animieren und das aufnehmen (oder Ivan fragen, wie er die animierten Gifs erstellt hat).
Neulich hat Mapzen die Morphology Map vorgestellt, die von Tangram ein Video aufzeichnen kann (Button “RECORD”). Der Code dazu ist in der media_capture.js Util-Klasse. Vielleicht könnte man das oder eine ähnliche Bibliothek auch mit Leaflet verwenden, wenn man auf Canvas umstellt und das Overlay irgendwie mit dem Baselayer zusammen bekommt.
Einzelbilder (Screenshots) müsste man mit leaflet-image hinbekommen. Die können dann z.B. mit dem Kommandozeilentool ImageMagick zu einem animierten Gif zusammengefügt werden.
Ich werde bei Gelegenheit mit Chromium Embedded experimentieren. Das will ich in mein Programm einbinden. Hier soll eine Karte geladen werden und dann von Chromium ein Screenshot erzeugt werden.
Bei OpenLayers geht das so ohne Weiteres (zumindest für einen Layer), weil es meines Wissens komplett auf HTML5 Canvas basiert. Ein canvas Element kann man dann einfach mit toDataURL() in ein Bild exportieren oder mit captureStream() als Video-Quelle verwenden.
Leaflet dagegen baut die Karte aus img Elementen für die Kacheln zusammen und verwendet SVG für Overlays (optional auch Canvas). Das Leaflet.Export Plugin kannte ich noch nicht, das verwendet intern wohl die allgemeine html2canvas Bibliothek, während das leaflet-image Plugin anscheinend speziell für Leaflet alles selbst in einen Canvas packt.
Falls das Programm nur ein Wrapper für speziell diese Aufgabe werden soll, könnte man das je nach Verwendungszweck evtl. auch rein im Browser oder als Script über Chrome Headless hinbekommen.
Das Programm soll ein bisschen mehr machen als nur ein Wrapper für einen Browser zu sein.
Chrome Headless kannte ich noch gar nicht. Habe ein bisschen was darüber gelesen. Klingt auf jeden Fall so, als ob ich darauf zurückgreifen werde.