rene
a561759034
- /maplibre-test rendert bayern.pmtiles per pmtiles-Protokoll, minimaler Geometrie-Style (OpenMapTiles-Layer, keine Glyphs), Touren-Demo als GeoJSON-Line - maplibre-gl 4.7.1 + pmtiles 3.2.1 lokal vendored (CSP script-src 'self') - CSP: worker-src blob: (MapLibre-Worker)
86 lines
3.5 KiB
JavaScript
86 lines
3.5 KiB
JavaScript
// Tile-Server-Spike: MapLibre rendert unsere eigene bayern.pmtiles.
|
|
// Minimaler Geometrie-Style (OpenMapTiles-Schema von planetiler), KEINE Labels →
|
|
// keine Glyphs/Fonts nötig. Touren-Overlay als GeoJSON-Line obendrauf (basemap-unabhängig).
|
|
(function () {
|
|
'use strict';
|
|
var statusEl = document.getElementById('status');
|
|
function setStatus(t) { if (statusEl) statusEl.textContent = t; }
|
|
|
|
// pmtiles-Protokoll registrieren (liest Tiles per HTTP-Range aus dem Single-File).
|
|
var protocol = new pmtiles.Protocol();
|
|
maplibregl.addProtocol('pmtiles', protocol.tile);
|
|
|
|
var TILES = 'pmtiles://' + window.location.origin + '/tiles/bayern.pmtiles';
|
|
|
|
var style = {
|
|
version: 8,
|
|
// Kein 'glyphs'/'sprite' — minimaler Style ohne Text-/Icon-Layer.
|
|
sources: {
|
|
by: { type: 'vector', url: TILES }
|
|
},
|
|
layers: [
|
|
{ id: 'bg', type: 'background', paint: { 'background-color': '#f4f1ec' } },
|
|
{ id: 'landcover', type: 'fill', source: 'by', 'source-layer': 'landcover',
|
|
paint: { 'fill-color': '#d6e6c3', 'fill-opacity': 0.6 } },
|
|
{ id: 'park', type: 'fill', source: 'by', 'source-layer': 'park',
|
|
paint: { 'fill-color': '#c8e6b0', 'fill-opacity': 0.5 } },
|
|
{ id: 'water', type: 'fill', source: 'by', 'source-layer': 'water',
|
|
paint: { 'fill-color': '#a0c8f0' } },
|
|
{ id: 'waterway', type: 'line', source: 'by', 'source-layer': 'waterway',
|
|
paint: { 'line-color': '#a0c8f0', 'line-width': 1 } },
|
|
{ id: 'roads', type: 'line', source: 'by', 'source-layer': 'transportation',
|
|
paint: {
|
|
'line-color': '#ffffff',
|
|
'line-width': ['interpolate', ['linear'], ['zoom'], 6, 0.5, 12, 1.5, 16, 4]
|
|
} },
|
|
{ id: 'road-casing', type: 'line', source: 'by', 'source-layer': 'transportation',
|
|
minzoom: 11,
|
|
paint: { 'line-color': '#d9cfc2', 'line-gap-width': 1,
|
|
'line-width': ['interpolate', ['linear'], ['zoom'], 11, 0.5, 16, 2] } },
|
|
{ id: 'buildings', type: 'fill', source: 'by', 'source-layer': 'building',
|
|
minzoom: 13,
|
|
paint: { 'fill-color': '#e3dccf', 'fill-outline-color': '#d0c8ba' } },
|
|
{ id: 'boundary', type: 'line', source: 'by', 'source-layer': 'boundary',
|
|
paint: { 'line-color': '#b08ac0', 'line-dasharray': [2, 2], 'line-width': 1 } }
|
|
]
|
|
};
|
|
|
|
var map = new maplibregl.Map({
|
|
container: 'map',
|
|
style: style,
|
|
center: [11.576, 48.137], // München
|
|
zoom: 11,
|
|
hash: true
|
|
});
|
|
map.addControl(new maplibregl.NavigationControl(), 'top-right');
|
|
map.addControl(new maplibregl.ScaleControl());
|
|
|
|
map.on('load', function () {
|
|
setStatus('✅ Tiles geladen — Range-Requests laufen');
|
|
|
|
// Touren-Overlay: GeoJSON-Linie (Demo, München-Innenstadt) — Basemap-unabhängig.
|
|
map.addSource('tour', {
|
|
type: 'geojson',
|
|
data: {
|
|
type: 'Feature',
|
|
geometry: {
|
|
type: 'LineString',
|
|
coordinates: [
|
|
[11.5755, 48.1374], [11.5780, 48.1390], [11.5820, 48.1402],
|
|
[11.5860, 48.1395], [11.5895, 48.1378], [11.5910, 48.1350]
|
|
]
|
|
}
|
|
}
|
|
});
|
|
map.addLayer({
|
|
id: 'tour-line', type: 'line', source: 'tour',
|
|
layout: { 'line-cap': 'round', 'line-join': 'round' },
|
|
paint: { 'line-color': '#e8590c', 'line-width': 5, 'line-opacity': 0.9 }
|
|
});
|
|
});
|
|
|
|
map.on('error', function (e) {
|
|
setStatus('⚠️ Fehler: ' + (e && e.error ? e.error.message : 'unbekannt'));
|
|
if (e && e.error) console.error('MapLibre error:', e.error);
|
|
});
|
|
})();
|