Hallo,
ich würde gerne mal wieder etwas mit OpenLayers machen und da wenn dann mit der neuesten Version 5. Aber ich verstehe nicht was ich wie machen muss um das zum laufen zu bringen. Bei OL 2 musste man noch ein Paket mit Dateien mit auf den Server legen. Bei OL 3 war dass dann nicht mehr nötig und die ol.js konnte von Fremdquellen im HTML Head eingebunden werden. Nun mit 5 gibt es dieses import und wieder Pakete, aber ich habe keine Ahnung was ich wie wo da machen muss. Kann mir mal einer genau erklären was ich wie wo machen muss, was ich wie wo speichern muss und was ich wie wo einbinden muss damit das funktioniert?
Moin,
hier gibt’s ein Tutorial, das den prinzipiellen Ablauf etwas erklärt: http://openlayers.org/en/latest/doc/tutorials/bundle.html
Dann gibt’s noch https://www.npmjs.com/package/ol und https://openlayers.org/en/latest/examples/
Hab’s nicht ausprobiert. Hier im OSM-Umfeld ist OpenLayers seit Version 3 praktisch komplett durch Leaflet ersetzt und wird kaum noch genutzt. Vielleicht besser mal bei den OSGeo Leuten oder bei Fossgis fragen?
Wenn das alles neu für dich ist und du dich die letzten Jahre(?) nicht mehr mit JavaScript development beschäftigt hast, kommt wohl einiges an Lesearbeit auf dich zu.
Google mal nach: ES6 aka. ES2015, NPM, Webpack, Babel
OpenLayers-Package bei NPM: https://www.npmjs.com/package/ol
Müsste aber auch mit der “alten” Methode per “script”-Tag funktionieren: https://openlayers.org/en/latest/doc/quickstart.html
CDN-Link: https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/build/ol.js
Hi, danke für die Antworten.
Die Methode mit dem script-tag im head fand ich ganz easy bei OL 3 (und scheinbar auch noch OL 4 und mit altem code auch mit OL 5 script), aber dieses “import” in OL 5, damit komme ich nicht klar.
Wie und wo muss denn dieses npm Paket gespeichert werden und was muss dann im HTML Header angegeben werden?
Ich habe mir neben dem npm Paket die beiden Pakete entpackt:
v5.1.3-dist.zip Includes a full build of the library (ol.js), a source map (ol.js.map), and library CSS (ol.css with source map ol.css.map).
v5.1.3.zip Includes all of the above plus examples, API docs, and sources.
Bei dem mit den examples ist dann zu sehen, dass das alles ganz anders aufgebaut ist und die example-codes in den example seiten ganz anders sind als die angezeigten examples. Da gibt es pro Example 3 Dateien: HTML, JS und MAP.
Seht selbst, bei den examples fehlt das Einbinden eines JS-Scripts:
https://openlayers.org/en/latest/examples/icon.html
Wie soll das dann mit dem import funktionieren? eben, gar nicht.
Qickstart verwendet dieses import Methode nicht und funktioniert.
Müssen alle Dateien aus dem v5.1.3-dist.zip im HTML Head per script-tag eingebunden werden, damit das was mit dem OL5 import wird?
Du kannst ol3|ol4|ol5 ähnlich wie ol2 benutzen.
Die ol.css und die ol.js auf den eigenen Server laden und deine Anwendung dazuladen.
Du kannst die ol.css und ol.js auch als link vom fremden Server nutzen.
Du kannst ol3 oder ol4 oder ol5 zusammen mit dem openlayers-System compilieren und erhälst eine kleinere Ausführungsdatei.
(compilieren müsste eigentlich kompremieren heissen, da das Ergbnis wieder javascript ist.)
Hier beginnen die Unterschiede:
ol3 wurde mit dem closure-compiler übersetzt.
ol4 kann mit dem closure-compiler oder mit npm/webpack übersetzt werden.
ol5 ist nur noch für das Verfahren npm/webpack vorgesehen.
Erst für die compilierung wird import benötigt.
Also bei Programmiersprachen sagt man ja, dass man nach einer längeren Pause wieder neu Anfangen kann… bei Javascript ist das gefühlt extrem, ein Jahr nichts gemacht, biste raus
Wie schon gesagt, wartet da eine Menge Lesearbeit auf dich. Google bitte die von mir oben genannten Begriffe und arbeite dich in das Thema ES6 ein. Das würde einfach den Rahmen dieses Forums sprengen.
Folgendes (oder ähnliche Tutorials) solltest du auf jeden Fall gelesen und v.a. verstanden haben:
https://www.sitepoint.com/beginners-guide-node-package-manager/
https://medium.com/@svinkle/getting-started-with-webpack-and-es6-modules-c465d053d988
Eine gute IDE wie Visual Studio Code (nur ein Vorschlag) und evtl. Typescript für ne ordentliche IntelliSense-Unterstützung und Fehlerreduzierung sind auch noch extrem hilfreich.
Um die Neuerungen in der Programmiersprache geht es mir erstmal nicht. Es geht um die Peripherie. Allen Anschein nach müssen wieder wie bei OL1/2 Dateien auf dem eigenen Server gespeichert werden. Wie wo und was würde ich gerne wissen. Es gibt diese npm methode und die Pakete:
https://openlayers.org/en/latest/doc/tutorials/
https://openlayers.org/download/
Bei dieser npm Methode bin ich bei meinem shared virtual server account etwas überfragt.
Bei der anderen Methode müssen wohl alle Dateien in den HTML head eingebunden werden?
Und weil dem so ist, funktioniert OL5 wohl nicht mehr bei jsfiddle?
Mit einem OL5 example:
http://jsfiddle.net/qnzvwL2r/
https://openlayers.org/en/latest/examples/cluster.html
Da müssen dann alle Dateien, die als “import” angegeben sind bei jsfiddle eingebunden werden?
Sollte es aber, denn darum geht es ja.
Du musstest auch vorher Dateien auf dem eigenen Server abspeichern, nämlich mindestens deinen eigenen Code. Mit den Packages und Webpack wird jetzt halt alles in eine Datei zusammengefasst. Somit gibt es bezüglich deines Servers kaum einen Unterschied.
Siehe verlinkte Tutorials. 
Das ist alles andere als einfach…
Da muss ja erstmal Node.js eingerichtet werden und dann das OL Paket aufm Server gespeichert werden, aber wo? Am richtigen Platz… . Ich bin komplett überfragt was ich da wie wo alles machen muss. Das hat ja erstmal nix mit der Programmiersprache zu tun. Das muss man ja erstmal alles zum laufen bringen. Node.js hat mich bisher null interessiert.
Vorher musste ich NUR meine eine .html oder .php Datei speichern und dort die ol.css und ol.js als script-tag einbinden. Jetzt muss ich erstmal node.js und webpack und Kram und überhaupt… Das ist echt heftig. Allein die Tutorials dazu, 3 Seiten! Das ist doch fehleranfällig ohne Ende… Ich wollte was mit OL machen, stattdessen muss ich jetzt erstmal aufm Server rumhackn und habe keinen Plan. Und dann wenn ich dann irgendwann in 3 Jahren mal zum OL programmieren komme, ist eh alles hinfällig, oder wie erwähnt, müssen dann unzählige verschiedene Dateien angelegt werden, oder werden angelegt (?), was die ganze Sache nicht übersichtlicher macht. Ich kapier gar nichts mehr. OL war so schön…
mit jsfiddle wird dass dann wohl nix mehr mit OL. wasn Untergang…
+1
Und dann sind die erstellten Ausführungsdateien deutlich größer als unter ol4.
Ich denke da muss openlayers irgenwie noch nachlegen.
Wenn du mir ne email-Adresse schickst, kann ich dir die Struktur bei mir aufzeigen.
Meine Erfahrungen beruhen auf Windows und lokaler Übersetzung von einzelnen Ausführungsdateien. (kein Server eingerichtet, keine automatische Übersetzung, keine eigenen Pakete)
Die wesentlichen Schritte:
notejs installieren
ich meine auch ncu installiert zu haben.
irgendwo auf der Arbeitsplatte eine Verzeichnisstruktur anlegen (bei mir E:/npm/ol-webpack/)
Das git-Projekt herunterladen und dort entpacken.
cmd-Fenster öffnen
E:/npm/ol-webpack> npm install
damit wird das Unterverzeichnis E:/npm/ol-webpack/node_modules mit den Paketen angelegt
E:\npm\ol-webpack> npm outdated
zeigt Liste (Current Wanted latest) der Paketversionen
E:\npm\ol-webpack> npm run build
ist die Übersetzung des Musters
E:\npm\ol-webpack> index.html
zeigt das erste Kartenbild
Muss es unbedingt OL sein?
@axelr: Danke für die Info. Das zeigt mir, dass ich das lassen werde. Lohnt sich nicht bei meinen Hobby-Projekten.
Ich mache weiter wie bisher mit dem script-tag einbinden von ol.css und ol.js. Das geht auch mit denen in Version OL5. Nur schade, dass die examples auf der OL website so nicht mehr funktionieren.
Ich hatte mal das mit dem import und so probiert, also die zu importierende *.js Datei ensprechend gespeichert: keine Chance, funktioniert so nicht. Dazu braucht es wohl wirklich node.js?
Ansonsten kann ich mir die functions aus den import-Dateien auch rauskopieren und das export weglassen.
@toc-rox: Ja. Ich fang jetzt nicht von vorne an mit irgendwas neuem (leaflet, taugt mir eh nicht) und schreibe meine Projekte um.
darf man da mal neugierig nachfragen, was dir an leaflet nicht taugt?
Ich kann dir wirklich nur an’s Herz legen, es mit ES6 zu versuchen. Das dürften bei gewissen Vorkenntnissen in Webtechnologien ca. 10-30 Stunden sein, die du investieren müsstest, aber es lohnt sich!
Ich glaube, du hattest einfach ein Verständnisproblem was Node.js angeht, da dort immer sehr viel von Server die Rede ist. Das stimmt auch, hat aber in deinem Fall keine Relevanz. Auf deinem “Server” brauchst du kein Node! Du musst es auf deinem Arbeitsrechner installieren, auf dem du den Code schreibst. Dann kompilierst du den Code mit Webpack (und Babel) und am Ende kommt eine .js-Datei heraus, die du dann auf deinen Server legst und in der index.html per script-Tag referenzierst (wie schon immer).
Was ich dir noch empfehlen kann ist einfach ein Starter-Projekt zu nehmen.
https://github.com/facebook/create-react-app/blob/next/README.md
“React” ist das UI-Framework von facebook und für Single-Page-Applications entwickelt worden. Ist recht leicht zu erlernen und sehr “lightweight”. Das Starter-Projekt ist vollständig konfiguriert und kann sofort gestartet werden, ist also ein perfekter Ausgangspunkt.
Node.js installieren und drei Zeilen in der Eingabeaufforderung und los geht’s.
npx create-react-app my-app
cd my-app
npm start
Mit “npm start” wird ein kleiner lokaler Server gestartet mit dem man gut testen kann.
Mit folgendem Befehl werden die Dateien für deinen richtigen Server erstellt:
npm run build
Dann einfach alles, was im /dist-Ordner ist auf deinen Server schieben. Fertig.
Probier’s einfach mal aus…