|
| 1 | +--- |
| 2 | +layout: default |
| 3 | +title: Create 3d tiles and visualize them with Cesium |
| 4 | +permalink: /examples/3d-tiles/ |
| 5 | +--- |
| 6 | + |
| 7 | +# Create 3d tiles and visualize them with Cesium |
| 8 | + |
| 9 | +In this tutorial, we demonstrate how to import OSM data into PostGIS and then serve them as 3d tiles to view them in Cesium. |
| 10 | + |
| 11 | +## Dataset |
| 12 | + |
| 13 | +OpenStreetMap (OSM) is a free and editable map of the world. |
| 14 | +It is maintained by a community of passionate volunteers in a way which is similar to Wikipedia. |
| 15 | +Every week, OpenStreetMap publishes a [full dump](https://planet.openstreetmap.org/) of its data in two flavours: a large XML file of about 90GB and a more compact binary file of about 50GB in the [Protocol Buffer Format](https://developers.google.com/protocol-buffers) (PBF). |
| 16 | +As processing such large files can take several hours, [Geofabrik](http://www.geofabrik.de/data/download.html) regularly publishes smaller extracts of OSM for specific regions. |
| 17 | +In this example we will use a tiny extract of OSM for [Liechtenstein](https://en.wikipedia.org/wiki/Liechtenstein), which is suitable for fast experiments. |
| 18 | + |
| 19 | +## Importing OpenStreetMap Data |
| 20 | + |
| 21 | +A workflow is a directed acyclic graph of steps executed by Baremaps. |
| 22 | +To download and import the sample OSM data in Postgres, execute the following [workflow](https://raw.githubusercontent.com/apache/incubator-baremaps/main/examples/openstreetmap/workflow.json). |
| 23 | + |
| 24 | +``` |
| 25 | +baremaps workflow execute --file examples/tdtiles/workflow.json |
| 26 | +``` |
| 27 | + |
| 28 | +Depending on the size of the OpenStreetMap file, the execution of this command may take some time. |
| 29 | +Eventually, the output produced by the command should look as follows. |
| 30 | + |
| 31 | +``` |
| 32 | +[INFO ] 2023-01-04 16:06:53.098 [main] Execute - Executing the workflow workflow.json |
| 33 | +[INFO ] 2023-01-04 16:06:53.235 [pool-2-thread-1] DownloadUrl - Downloading https://download.geofabrik.de/europe/liechtenstein-latest.osm.pbf to liechtenstein-latest.osm.pbf |
| 34 | +[INFO ] 2023-01-04 16:06:53.820 [pool-2-thread-1] DownloadUrl - Finished downloading https://download.geofabrik.de/europe/liechtenstein-latest.osm.pbf to liechtenstein-latest.osm.pbf |
| 35 | +[INFO ] 2023-01-04 16:06:53.821 [pool-2-thread-2] ImportOpenStreetMap - Importing liechtenstein-latest.osm.pbf into jdbc:postgresql://localhost:5432/baremaps?&user=baremaps&password=baremaps |
| 36 | +[INFO ] 2023-01-04 16:06:53.825 [pool-2-thread-2] HikariDataSource - HikariPool-1 - Starting... |
| 37 | +[INFO ] 2023-01-04 16:06:53.898 [pool-2-thread-2] HikariPool - HikariPool-1 - Added connection org.postgresql.jdbc.PgConnection@6e426130 |
| 38 | +[INFO ] 2023-01-04 16:06:53.899 [pool-2-thread-2] HikariDataSource - HikariPool-1 - Start completed. |
| 39 | +[INFO ] 2023-01-04 16:06:55.743 [pool-2-thread-2] ImportOpenStreetMap - Finished importing liechtenstein-latest.osm.pbf into jdbc:postgresql://localhost:5432/baremaps?&user=baremaps&password=baremaps |
| 40 | +[INFO ] 2023-01-04 16:06:55.743 [pool-2-thread-3] ExecuteSql - Executing indexes.sql |
| 41 | +[INFO ] 2023-01-04 16:06:56.623 [pool-2-thread-3] ExecuteSql - Finished executing indexes.sql |
| 42 | +[INFO ] 2023-01-04 16:06:56.623 [main] Execute - Finished executing the workflow workflow.json |
| 43 | +``` |
| 44 | + |
| 45 | +## Serve 3d tiles to a Cesium web application |
| 46 | + |
| 47 | +In order to generate 3d tiles Baremaps uses [JTS Delaunay Triangulation](https://locationtech.github.io/jts/javadoc/org/locationtech/jts/triangulate/DelaunayTriangulationBuilder.html) to |
| 48 | +triangulate vector tiles into 3d meshes. Then it uses [jgltf](https://github.com/javagl/JglTF) to generate a GLB that can be embedded into a 3d tile. |
| 49 | + |
| 50 | +To start the 3d tiles server, use the following command: |
| 51 | + |
| 52 | +``` |
| 53 | +baremaps tdtiles serve --database jdbc:postgresql://localhost:5432/baremaps?user=baremaps&password=baremaps |
| 54 | +``` |
| 55 | + |
| 56 | +Well done, a local http server should have started. |
| 57 | +You can now visualize the 3d tiles in your browser ([http://localhost:9000/](http://localhost:9000/))! |
| 58 | +Notice that the changes in the configuration files are automatically reloaded by the browser. |
| 59 | + |
| 60 | + |
| 61 | +## Conclusion |
| 62 | + |
| 63 | +In this tutorial, we learnt how to import OpenStreetMap data in PostGIS and then serve 3d tiles with Apache Baremaps. |
0 commit comments