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
staticwechseln - Leere Datei
countries.htmlerstellen - 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