@scoova/mgl 1.0.0

package/src/style/query_utils.test.ts

@@ -0,0 +1,107 @@
+import Point from '@mapbox/point-geometry';
+
+import {offsetLine} from './query_utils';
+
+const defaultPrecision = 10;
+
+const closeTo = (expected, precision = defaultPrecision) => ({
+    asymmetricMatch: (actual) => Math.abs(expected - actual) < Math.pow(10, -precision) / 2
+});
+
+describe('offsetLine', () => {
+    test('line two points east', () => {
+        const line = [
+            new Point(0, 0),
+            new Point(1, 0)
+        ];
+        const offset = 1;
+
+        expect(offsetLine([line], offset)).toEqual([[
+            new Point(0, 1),
+            new Point(1, 1)
+        ]]);
+    });
+
+    test('line two points west', () => {
+        const line = [
+            new Point(10, 10),
+            new Point(5, 10)
+        ];
+        const offset = 2;
+
+        expect(offsetLine([line], offset)).toEqual([[
+            new Point(10, 8),
+            new Point(5, 8)
+        ]]);
+    });
+
+    test('line two points south', () => {
+        const line = [
+            new Point(0, -1),
+            new Point(0, 1)
+        ];
+        const offset = 1;
+
+        expect(offsetLine([line], offset)).toEqual([[
+            new Point(-1, -1),
+            new Point(-1, 1)
+        ]]);
+    });
+
+    test('line three points north', () => {
+        const line = [
+            new Point(0, 1),
+            new Point(0, 0),
+            new Point(0, -1)
+        ];
+        const offset = 1;
+
+        expect(offsetLine([line], offset)).toEqual([[
+            new Point(1, 1),
+            new Point(1, 0),
+            new Point(1, -1)
+        ]]);
+    });
+
+    test('line three points north east', () => {
+        const line = [
+            new Point(-1, 1),
+            new Point(0, 0),
+            new Point(1, -1)
+        ];
+        const offset = Math.sqrt(2);
+
+        expect(offsetLine([line], offset)).toEqual([[
+            {
+                x: closeTo(0),
+                y: closeTo(2)
+            },
+            {
+                x: closeTo(1),
+                y: closeTo(1)
+            },
+            {
+                x: closeTo(2),
+                y: closeTo(0)
+            }
+        ]]);
+    });
+
+    test('ring five points square', () => {
+        const ring = [
+            new Point(0, 0),
+            new Point(10, 0),
+            new Point(10, -10),
+            new Point(0, -10),
+            new Point(0, 0)
+        ];
+        const offset = 2;
+        expect(offsetLine([ring], offset)).toEqual([[
+            new Point(0, 2),
+            new Point(12, 2),
+            new Point(12, -12),
+            new Point(-2, -12),
+            new Point(-2, 0)
+        ]]);
+    });
+});

package/src/style/query_utils.ts

@@ -0,0 +1,70 @@
+import Point from '@mapbox/point-geometry';
+
+import type {PossiblyEvaluatedPropertyValue} from './properties';
+import type {StyleLayer} from '../style/style_layer';
+import type {CircleBucket} from '../data/bucket/circle_bucket';
+import type {LineBucket} from '../data/bucket/line_bucket';
+
+export function getMaximumPaintValue(
+    property: string,
+    layer: StyleLayer,
+    bucket: CircleBucket<any> | LineBucket
+): number {
+    const value = ((layer.paint as any).get(property) as PossiblyEvaluatedPropertyValue<any>).value;
+    if (value.kind === 'constant') {
+        return value.value;
+    } else {
+        return bucket.programConfigurations.get(layer.id).getMaxValue(property);
+    }
+}
+
+export function translateDistance(translate: [number, number]) {
+    return Math.sqrt(translate[0] * translate[0] + translate[1] * translate[1]);
+}
+
+export function translate(queryGeometry: Array<Point>,
+    translate: [number, number],
+    translateAnchor: 'viewport' | 'map',
+    bearing: number,
+    pixelsToTileUnits: number) {
+    if (!translate[0] && !translate[1]) {
+        return queryGeometry;
+    }
+    const pt = Point.convert(translate)._mult(pixelsToTileUnits);
+
+    if (translateAnchor === 'viewport') {
+        pt._rotate(-bearing);
+    }
+
+    const translated = [];
+    for (let i = 0; i < queryGeometry.length; i++) {
+        const point = queryGeometry[i];
+        translated.push(point.sub(pt));
+    }
+    return translated;
+}
+
+export function offsetLine(rings: Array<Array<Point>>, offset: number) {
+    const newRings: Array<Array<Point>> = [];
+    for (let ringIndex = 0; ringIndex < rings.length; ringIndex++) {
+        const ring = rings[ringIndex];
+        const newRing: Array<Point> = [];
+        for (let index = 0; index < ring.length; index++) {
+            const a = ring[index - 1];
+            const b = ring[index];
+            const c = ring[index + 1];
+            const aToB = index === 0 ? new Point(0, 0) : b.sub(a)._unit()._perp();
+            const bToC = index === ring.length - 1 ? new Point(0, 0) : c.sub(b)._unit()._perp();
+            const extrude = aToB._add(bToC)._unit();
+
+            const cosHalfAngle = extrude.x * bToC.x + extrude.y * bToC.y;
+            if (cosHalfAngle !== 0) {
+                extrude._mult(1 / cosHalfAngle);
+            }
+
+            newRing.push(extrude._mult(offset)._add(b));
+        }
+        newRings.push(newRing);
+    }
+    return newRings;
+}

package/src/style/sky.ts

@@ -0,0 +1,127 @@
+import {DataConstantProperty, PossiblyEvaluated, Properties, Transitionable, Transitioning, TransitionParameters} from './properties';
+import {Evented} from '../util/evented';
+import {EvaluationParameters} from './evaluation_parameters';
+import {emitValidationErrors, validateSky, validateStyle} from './validate_style';
+import {extend} from '../util/util';
+import {Color, latest as styleSpec} from '@maplibre/maplibre-gl-style-spec';
+import {Mesh} from '../render/mesh';
+import type {StylePropertySpecification, SkySpecification} from '@maplibre/maplibre-gl-style-spec';
+import type {StyleSetterOptions} from './style';
+
+type SkyProps = {
+    'sky-color': DataConstantProperty<Color>;
+    'horizon-color': DataConstantProperty<Color>;
+    'fog-color': DataConstantProperty<Color>;
+    'fog-ground-blend': DataConstantProperty<number>;
+    'horizon-fog-blend': DataConstantProperty<number>;
+    'sky-horizon-blend': DataConstantProperty<number>;
+    'atmosphere-blend': DataConstantProperty<number>;
+};
+
+type SkyPropsPossiblyEvaluated = {
+    'sky-color': Color;
+    'horizon-color': Color;
+    'fog-color': Color;
+    'fog-ground-blend': number;
+    'horizon-fog-blend': number;
+    'sky-horizon-blend': number;
+    'atmosphere-blend': number;
+};
+
+const properties: Properties<SkyProps> = new Properties({
+    'sky-color': new DataConstantProperty(styleSpec.sky['sky-color'] as StylePropertySpecification),
+    'horizon-color': new DataConstantProperty(styleSpec.sky['horizon-color'] as StylePropertySpecification),
+    'fog-color': new DataConstantProperty(styleSpec.sky['fog-color'] as StylePropertySpecification),
+    'fog-ground-blend': new DataConstantProperty(styleSpec.sky['fog-ground-blend'] as StylePropertySpecification),
+    'horizon-fog-blend': new DataConstantProperty(styleSpec.sky['horizon-fog-blend'] as StylePropertySpecification),
+    'sky-horizon-blend': new DataConstantProperty(styleSpec.sky['sky-horizon-blend'] as StylePropertySpecification),
+    'atmosphere-blend': new DataConstantProperty(styleSpec.sky['atmosphere-blend'] as StylePropertySpecification)
+});
+
+const TRANSITION_SUFFIX = '-transition';
+
+export class Sky extends Evented {
+    properties: PossiblyEvaluated<SkyProps, SkyPropsPossiblyEvaluated>;
+
+    /**
+     * This is used to cache the gl mesh for the sky, it should be initialized only once.
+     */
+    mesh: Mesh | undefined;
+    _transitionable: Transitionable<SkyProps>;
+    _transitioning: Transitioning<SkyProps>;
+
+    constructor(sky?: SkySpecification) {
+        super();
+        this._transitionable = new Transitionable(properties);
+        this.setSky(sky);
+        this._transitioning = this._transitionable.untransitioned();
+        this.recalculate(new EvaluationParameters(0));
+    }
+
+    setSky(sky?: SkySpecification, options: StyleSetterOptions = {}) {
+        if (this._validate(validateSky, sky, options)) return;
+
+        if (!sky) {
+            sky = {
+                'sky-color': 'transparent',
+                'horizon-color': 'transparent',
+                'fog-color': 'transparent',
+                'fog-ground-blend': 1,
+                'atmosphere-blend': 0,
+            };
+        }
+
+        for (const name in sky) {
+            const value = sky[name];
+            if (name.endsWith(TRANSITION_SUFFIX)) {
+                this._transitionable.setTransition(name.slice(0, -TRANSITION_SUFFIX.length) as keyof SkyProps, value);
+            } else {
+                this._transitionable.setValue(name as keyof SkyProps, value);
+            }
+        }
+    }
+
+    getSky(): SkySpecification {
+        return this._transitionable.serialize();
+    }
+
+    updateTransitions(parameters: TransitionParameters) {
+        this._transitioning = this._transitionable.transitioned(parameters, this._transitioning);
+    }
+
+    hasTransition() {
+        return this._transitioning.hasTransition();
+    }
+
+    recalculate(parameters: EvaluationParameters) {
+        this.properties = this._transitioning.possiblyEvaluate(parameters);
+    }
+
+    _validate(validate: Function, value: unknown, options: StyleSetterOptions = {}) {
+        if (options?.validate === false) {
+            return false;
+        }
+        return emitValidationErrors(this, validate.call(validateStyle, extend({
+            value,
+            // Workaround for https://github.com/mapbox/mapbox-gl-js/issues/2407
+            style: {glyphs: true, sprite: true},
+            styleSpec
+        })));
+    }
+
+    /**
+     * Currently fog is a very simple implementation, and should only used
+     * to create an atmosphere near the horizon.
+     * But because the fog is drawn from the far-clipping-plane to
+     * map-center, and because the fog does nothing know about the horizon,
+     * this method does a fadeout in respect of pitch. So, when the horizon
+     * gets out of view, which is at about pitch 70, this methods calculates
+     * the corresponding opacity values. Below pitch 60 the fog is completely
+     * invisible.
+     */
+    calculateFogBlendOpacity(pitch: number) {
+        if (pitch < 60) return 0; // disable
+        if (pitch < 70) return (pitch - 60) / 10; // fade in
+        return 1;
+    }
+}