Vektor-Tiles Workshop Notes
FOSSGIS 2019, Dresden
Pirmin Kalberer, Sourcepole AG, pka@sourcepole.ch
Online: https://git.io/fhhjl
Workshop data: https://pkg.sourcepole.ch/fossgis2019/mvt-workshop-fossgis2019.zip
Slides: https://pkg.sourcepole.ch/fossgis2019/mvt-workshop-slides.pdf
Vorbereitung
-
OSGeoLive starten
-
Desktop Icon "Workshop Installation"
-
Workshop Daten herunterladen und installieren:
- Link "Workshop Material" anklicken
- Open with "Archive Manager" - OK
- Button "Extract" (oben links)
- Button "Extract" (unten rechts)
- Button "Show the files"
- In Verzeichnis "mvt-workshop" wechseln
- Doppelklick "setup-db.sh"
- "Execute in Terminal"
- Tools -> Open Current Folder in Terminal (F4)
Start Server und t-rex Backend
Tile Server starten:
t_rex serve --config countries.toml
Vektor Tiles in verschiedenen Viewern anschauen: "OpenLayers", "X-Ray", "Inspector"
Anmerkung: Viewer "Mapbox GL" benötigt WebGL-Unterstützung, welche in einer virtuellen Maschine eventuell nicht verfügbar ist.
Mapbox GL JS Viewer erstellen
In Backend auf Info Tab wechseln.
Code Snippet für Mapbox GL JS Viewer kopieren.
In neue Datei static/countries.html
speichern:
- Datei Manager öffnen und in Verzeichs
static
wechseln - Leere Datei
countries.html
erstellen - Datei mit Text Editor "Leafpad" öffnen
- Kopiertes Template einfügen und Datei speichern
In Browser in neuem Tab öffnen unter: http://127.0.0.1:6767/static/countries.html
Bei fehlendem WebGL Support kann alternativ das OpenLayers Snippet verwendet werden.
Mapbox GL Style erstellen
In Backend auf Info Tab wechseln.
Link "Maputnik" öffnen.
(Bei fehlendem WebGL Support muss der Stil im Texteditor erstellt werden. Dazu Link "Style JSON" speichern und Stil erweitern)
Zuerst weitere Style-Layer vorbereiten. Layer country
zweimal duplizieren:
- ID:
land-border-country
, Type:Line
- ID:
country-name
, TypeCircle
, Source Layer:country-name
Country als Polygone darstellen:
Layer country
:
- Type:
Fill
Datengesteuerte Farbe für Layer country
:
- fill-color property:
mapcolor7
(Workaround s.u.) - value-color: 1 ->
#fdaf6b
, 2 ->#fdc663
, 3 ->#fae364
, 4 ->#d3e46f
, 5 ->#aadb78
, 6 ->#a3cec5
, 7 ->#ceb5cf
Workaround für Maputnik-Bug:
- Funktionssymbol für
Color
(Paint properties) anklicken - Im JSON-Editor nach
"fill-color": {
die Zeile"property": "mapcolor7",
einfügen.
Farbe der Grenzen in Layer land-border-country
:
- Paint color:
#fff
Stil speichern mit Export
-> Download
Speichern unter /home/user/mvt-workshop/static/style.json
Style in Viewer einbinden
In Datei countries.html
die Zeile
style: 'http://127.0.0.1:6767/ne_countries.style.json',
ersetzen durch:
style: '/static/countries.json',
In Browser öffnen unter: http://127.0.0.1:6767/static/countries.html
Punkt-Layer für Labels erstellen
In t-rex Konfiguration /home/user/mvt-workshop/countries.toml
einen weitern Layer hinzufügen:
[[tileset.layer]]
name = "country-name"
geometry_field = "wkb_geometry"
geometry_type = "POINT"
srid = 3857
buffer_size = 0
[[tileset.layer.query]]
sql = """SELECT ST_PointOnSurface(wkb_geometry) AS wkb_geometry, abbrev, name FROM ne_10m_admin_0_countries WHERE wkb_geometry && !bbox!"""
In Konsole t-rex stoppen (Ctrl-C) und neu starten (Pfeil hoch, Return).
Label-Style erstellen
style.json
mit Maputnik öffnen (URL, falls nicht mehr offen):
http://127.0.0.1:6767/maputnik.html?style=http://127.0.0.1:6767/static/style.json
Länder-Labels in Layer country-name
:
- Type:
Symbol
- Text layout field:
{name}
- text-halo-color (Text paint properties):
rgba(255, 255, 255, 1)
, - text-halo-width:
1.5
- Min Zoom (Layer properties):
3
Layer duplizieren -> country-abbrev
- Min Zoom:
1.8
- Max Zoom:
3
- Text layout field:
{abbrev}
OpenLayers Viewer
In static/countries-ol.html
den Style natural-earth-countries.json
durch style.json
und
den Source Name countries
durch ne_countries
ersetzen.
In Browser öffnen unter: http://127.0.0.1:6767/static/countries-ol.html
Tile-Seeding
In Konfiguration /home/user/mvt-workshop/countries.toml
Cache auskommentieren:
[cache.file]
base = "./mvtcache"
baseurl = "http://example.com/tiles"
In Konsole t-rex stoppen (Ctrl-C).
Cache seeding starten:
t_rex generate --config countries.toml --maxzoom 4
Tiles werden in Verzeichnis mvtcache
gespeichert:
find mvtcache
Tile Server wieder starten:
t_rex serve --config countries.toml
Analyse Tileset (optional)
Tileset analysieren:
t_rex drilldown --config countries.toml --points 8.16,46.84,-95.92,39.0 | tee drilldown.csv
drilldown.csv
in Tabllenkalkulation öffnen.
Verzeichnis mvtcache
untersuchen. Hat es auch Tiles in Zoom Stufen >5?
maxzoom
in countries.toml
entsprechend setzen.
Offline-Applikation (optional)
Welche Resourcen werden noch aus dem Internet geladen?
Ergänzen aus https://github.com/pka/mapbox-gl-js-offline-example/archive/exercise.zip
Mouseover in Mapbox GL Viewer
In static/countries.html
Mouseover-Event hinzufügen (nach var map = new mapboxgl.Map(..);
):
map.on('mousemove', 'country', (e) => {
const feat = e.features[0];
console.log(feat.properties);
});
Popup initialisieren (vor map.on('mousemove', ...
):
var popup = new mapboxgl.Popup({
closeButton: false,
closeOnClick: false
});
In Event Popup zu Karte hinzufügen (nach console.log(feat.properties);
):
const content = feat.properties.name;
this.popup.setLngLat(e.lngLat)
.setHTML(content)
.addTo(map);
Popup entfernen, wenn ausserhalb (nach map.on('mousemove', ...);
):
map.on('mouseleave', 'country', function() {
popup.remove();
});
Weitere Funktionen:
- Controls hinzufügen (Zoom, etc.)
- Layer Switcher
Siehe https://www.mapbox.com/mapbox-gl-js/ -> Examples