switch to maplibre, but laggy

website/src/lib/components/map/style.ts

@@ -0,0 +1,221 @@
+import { settings } from '$lib/logic/settings';
+import { get, type Writable } from 'svelte/store';
+import {
+    basemaps,
+    defaultBasemap,
+    maptilerKeyPlaceHolder,
+    overlays,
+    terrainSources,
+} from '$lib/assets/layers';
+import { customBasemapUpdate, getLayers } from '$lib/components/map/layer-control/utils';
+import { i18n } from '$lib/i18n.svelte';
+
+const { currentBasemap, currentOverlays, customLayers, opacities, terrainSource } = settings;
+
+const emptySource: maplibregl.GeoJSONSourceSpecification = {
+    type: 'geojson',
+    data: {
+        type: 'FeatureCollection',
+        features: [],
+    },
+};
+export const ANCHOR_LAYER_KEY = {
+    overlays: 'overlays-end',
+    mapillary: 'mapillary-end',
+    tracks: 'tracks-end',
+    directionMarkers: 'direction-markers-end',
+    distanceMarkers: 'distance-markers-end',
+    interactions: 'interactions-end',
+    overpass: 'overpass-end',
+    waypoints: 'waypoints-end',
+};
+const anchorLayers: maplibregl.LayerSpecification[] = Object.values(ANCHOR_LAYER_KEY).map((id) => ({
+    id: id,
+    type: 'symbol',
+    source: 'empty-source',
+}));
+
+export class StyleManager {
+    private _map: Writable<maplibregl.Map | null>;
+    private _maptilerKey: string;
+    private _pastOverlays: Set<string> = new Set();
+
+    constructor(map: Writable<maplibregl.Map | null>, maptilerKey: string) {
+        this._map = map;
+        this._maptilerKey = maptilerKey;
+        this._map.subscribe((map_) => {
+            if (map_) {
+                this.update();
+                map_.on('style.load', () => this.updateOverlays());
+                map_.on('pitch', () => this.updateTerrain());
+            }
+        });
+        currentBasemap.subscribe(() => this.update());
+        customBasemapUpdate.subscribe(() => this.update());
+        currentOverlays.subscribe(() => this.updateOverlays());
+        opacities.subscribe(() => this.updateOverlays());
+        terrainSource.subscribe(() => this.updateTerrain());
+    }
+
+    update() {
+        const map_ = get(this._map);
+        if (!map_) return;
+        this.build().then((style) => map_.setStyle(style));
+    }
+
+    async updateOverlays() {
+        const map_ = get(this._map);
+        if (!map_) return;
+        if (!map_.getSource('empty-source')) return;
+
+        const custom = get(customLayers);
+        const overlayOpacities = get(opacities);
+        try {
+            const layers = getLayers(get(currentOverlays) ?? {});
+            for (let overlay in layers) {
+                if (!layers[overlay]) {
+                    if (this._pastOverlays.has(overlay)) {
+                        const overlayInfo = custom[overlay]?.value ?? overlays[overlay];
+                        const overlayStyle = await this.get(overlayInfo);
+                        for (let layer of overlayStyle.layers ?? []) {
+                            if (map_.getLayer(layer.id)) {
+                                map_.removeLayer(layer.id);
+                            }
+                        }
+                        this._pastOverlays.delete(overlay);
+                    }
+                } else {
+                    const overlayInfo = custom[overlay]?.value ?? overlays[overlay];
+                    const overlayStyle = await this.get(overlayInfo);
+                    const opacity = overlayOpacities[overlay];
+
+                    for (let sourceId in overlayStyle.sources) {
+                        if (!map_.getSource(sourceId)) {
+                            map_.addSource(sourceId, overlayStyle.sources[sourceId]);
+                        }
+                    }
+
+                    for (let layer of overlayStyle.layers ?? []) {
+                        if (!map_.getLayer(layer.id)) {
+                            if (opacity !== undefined) {
+                                if (layer.type === 'raster') {
+                                    if (!layer.paint) {
+                                        layer.paint = {};
+                                    }
+                                    layer.paint['raster-opacity'] = opacity;
+                                } else if (layer.type === 'hillshade') {
+                                    if (!layer.paint) {
+                                        layer.paint = {};
+                                    }
+                                    layer.paint['hillshade-exaggeration'] = opacity / 2;
+                                }
+                            }
+                            map_.addLayer(layer, ANCHOR_LAYER_KEY.overlays);
+                        }
+                    }
+
+                    this._pastOverlays.add(overlay);
+                }
+            }
+        } catch (e) {}
+    }
+
+    updateTerrain() {
+        const map_ = get(this._map);
+        if (!map_) return;
+
+        const mapTerrain = map_.getTerrain();
+        const terrain = this.getCurrentTerrain();
+        if (JSON.stringify(mapTerrain) !== JSON.stringify(terrain)) {
+            map_.setTerrain(terrain);
+        }
+    }
+
+    async build(): Promise<maplibregl.StyleSpecification> {
+        const custom = get(customLayers);
+
+        const style: maplibregl.StyleSpecification = {
+            version: 8,
+            projection: {
+                type: 'globe',
+            },
+            sources: {
+                'empty-source': emptySource,
+            },
+            layers: [],
+        };
+
+        let basemap = get(currentBasemap);
+        const basemapInfo = basemaps[basemap] ?? custom[basemap]?.value ?? basemaps[defaultBasemap];
+        const basemapStyle = await this.get(basemapInfo);
+
+        this.merge(style, basemapStyle);
+
+        style.terrain = this.getCurrentTerrain();
+        style.sources[style.terrain.source] = terrainSources[style.terrain.source];
+
+        style.layers.push(...anchorLayers);
+
+        return style;
+    }
+
+    async get(
+        styleInfo: maplibregl.StyleSpecification | string
+    ): Promise<maplibregl.StyleSpecification> {
+        if (typeof styleInfo === 'string') {
+            let styleUrl = styleInfo as string;
+            if (styleUrl.includes(maptilerKeyPlaceHolder)) {
+                styleUrl = styleUrl.replace(maptilerKeyPlaceHolder, this._maptilerKey);
+            }
+            const response = await fetch(styleUrl, { cache: 'force-cache' });
+            const style = await response.json();
+            return style;
+        } else {
+            return styleInfo;
+        }
+    }
+
+    merge(style: maplibregl.StyleSpecification, other: maplibregl.StyleSpecification) {
+        style.sources = { ...style.sources, ...other.sources };
+        for (let layer of other.layers ?? []) {
+            if (layer.type === 'symbol' && layer.layout && layer.layout['text-field']) {
+                const textField = layer.layout['text-field'];
+                if (
+                    Array.isArray(textField) &&
+                    textField.length >= 2 &&
+                    textField[0] === 'coalesce' &&
+                    Array.isArray(textField[1]) &&
+                    textField[1][0] === 'get' &&
+                    typeof textField[1][1] === 'string' &&
+                    textField[1][1].startsWith('name')
+                ) {
+                    layer.layout['text-field'] = [
+                        'coalesce',
+                        ['get', `name:${i18n.lang}`],
+                        ['get', 'name'],
+                    ];
+                }
+            }
+            style.layers.push(layer);
+        }
+        if (other.sprite && !style.sprite) {
+            style.sprite = other.sprite;
+        }
+        if (other.glyphs && !style.glyphs) {
+            style.glyphs = other.glyphs;
+        }
+    }
+
+    getCurrentTerrain() {
+        const terrain = get(terrainSource);
+        const source = terrainSources[terrain];
+        if (source.url && source.url.includes(maptilerKeyPlaceHolder)) {
+            source.url = source.url.replace(maptilerKeyPlaceHolder, this._maptilerKey);
+        }
+        const map_ = get(this._map);
+        return {
+            source: terrain,
+            exaggeration: !map_ || map_.getPitch() === 0 ? 0 : 1,
+        };
+    }
+}