maplibre-gl-layers 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +112 -0
- package/dist/SpriteLayer.d.ts +256 -0
- package/dist/easing.d.ts +19 -0
- package/dist/index.cjs +24163 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.ts +12 -0
- package/dist/index.mjs +24163 -0
- package/dist/index.mjs.map +1 -0
- package/dist/interpolation.d.ts +90 -0
- package/dist/location.d.ts +24 -0
- package/dist/math.d.ts +467 -0
- package/dist/numericInterpolation.d.ts +80 -0
- package/dist/rotationInterpolation.d.ts +44 -0
- package/dist/types.d.ts +351 -0
- package/dist/utils.d.ts +16 -0
- package/images/demo1.png +0 -0
- package/images/demo2.png +0 -0
- package/images/maplibre-gl-layers-120.png +0 -0
- package/package.json +75 -0
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* name: maplibre-gl-layers
|
|
3
|
+
* version: 0.1.0
|
|
4
|
+
* description: MapLibre's layer extension library enabling the display, movement, and modification of large numbers of dynamic sprite images
|
|
5
|
+
* author: Kouji Matsui (@kekyo@mi.kekyo.net)
|
|
6
|
+
* license: MIT
|
|
7
|
+
* repository.url: https://github.com/kekyo/maplibre-gl-layers.git
|
|
8
|
+
* git.commit.hash: 88b09a93779279947d9c6b1e3a7538d4d197dbcb
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
import { EasingFunction, SpriteInterpolationMode, SpriteInterpolationOptions, SpriteLocation } from './types';
|
|
12
|
+
/**
|
|
13
|
+
* Runtime state describing the active interpolation between two sprite locations.
|
|
14
|
+
* Consumers reuse the same state across ticks to avoid re-allocations while animation is running.
|
|
15
|
+
*
|
|
16
|
+
* @property mode - Strategy used to resolve the target location (feedback or feedforward).
|
|
17
|
+
* @property durationMs - Total time allocated for the interpolation in milliseconds.
|
|
18
|
+
* @property easing - Resolved easing function applied to raw progress values.
|
|
19
|
+
* @property startTimestamp - Epoch millisecond when the interpolation started, or -1 when uninitialised.
|
|
20
|
+
* @property from - Origin sprite location cloned from the current render state.
|
|
21
|
+
* @property to - Destination sprite location being interpolated towards.
|
|
22
|
+
*/
|
|
23
|
+
export interface SpriteInterpolationState {
|
|
24
|
+
readonly mode: SpriteInterpolationMode;
|
|
25
|
+
readonly durationMs: number;
|
|
26
|
+
readonly easing: EasingFunction;
|
|
27
|
+
startTimestamp: number;
|
|
28
|
+
readonly from: SpriteLocation;
|
|
29
|
+
readonly to: SpriteLocation;
|
|
30
|
+
}
|
|
31
|
+
/**
|
|
32
|
+
* Parameters required to create a fresh interpolation state for the next animation segment.
|
|
33
|
+
*
|
|
34
|
+
* @property currentLocation - Sprite location currently rendered on screen.
|
|
35
|
+
* @property lastCommandLocation - Previously commanded target, used for feedforward extrapolation.
|
|
36
|
+
* @property nextCommandLocation - Upcoming commanded target that the sprite should reach.
|
|
37
|
+
* @property options - Raw interpolation options supplied by the caller.
|
|
38
|
+
*/
|
|
39
|
+
export interface CreateInterpolationStateParams {
|
|
40
|
+
currentLocation: SpriteLocation;
|
|
41
|
+
lastCommandLocation?: SpriteLocation;
|
|
42
|
+
nextCommandLocation: SpriteLocation;
|
|
43
|
+
options: SpriteInterpolationOptions;
|
|
44
|
+
}
|
|
45
|
+
/**
|
|
46
|
+
* Result of preparing interpolation state, including a flag denoting whether any lerp is needed.
|
|
47
|
+
*
|
|
48
|
+
* @property state - Prepared interpolation state ready for evaluation.
|
|
49
|
+
* @property requiresInterpolation - Indicates whether lerping is needed or an immediate snap is sufficient.
|
|
50
|
+
*/
|
|
51
|
+
export interface CreateInterpolationStateResult {
|
|
52
|
+
readonly state: SpriteInterpolationState;
|
|
53
|
+
readonly requiresInterpolation: boolean;
|
|
54
|
+
}
|
|
55
|
+
/**
|
|
56
|
+
* Creates interpolation state for the next sprite movement and signals if interpolation is necessary.
|
|
57
|
+
*
|
|
58
|
+
* @param params - The context needed to build interpolation state, including locations and configuration.
|
|
59
|
+
* @returns The prepared state alongside a boolean indicating whether animation should run.
|
|
60
|
+
*/
|
|
61
|
+
export declare const createInterpolationState: (params: CreateInterpolationStateParams) => CreateInterpolationStateResult;
|
|
62
|
+
/**
|
|
63
|
+
* Parameters required to evaluate an interpolation tick at a given moment.
|
|
64
|
+
*
|
|
65
|
+
* @property state - Active interpolation state previously created.
|
|
66
|
+
* @property timestamp - Epoch millisecond at which interpolation should be evaluated.
|
|
67
|
+
*/
|
|
68
|
+
export interface EvaluateInterpolationParams {
|
|
69
|
+
state: SpriteInterpolationState;
|
|
70
|
+
timestamp: number;
|
|
71
|
+
}
|
|
72
|
+
/**
|
|
73
|
+
* Result of evaluating interpolation progress at a specific timestamp.
|
|
74
|
+
*
|
|
75
|
+
* @property location - Interpolated sprite location corresponding to the evaluated time.
|
|
76
|
+
* @property completed - Indicates whether the interpolation has reached or exceeded its duration.
|
|
77
|
+
* @property effectiveStartTimestamp - Timestamp detected or assigned as the interpolation starting point.
|
|
78
|
+
*/
|
|
79
|
+
export interface EvaluateInterpolationResult {
|
|
80
|
+
readonly location: SpriteLocation;
|
|
81
|
+
readonly completed: boolean;
|
|
82
|
+
readonly effectiveStartTimestamp: number;
|
|
83
|
+
}
|
|
84
|
+
/**
|
|
85
|
+
* Evaluates an interpolation state at a specific point in time and returns the intermediate location.
|
|
86
|
+
*
|
|
87
|
+
* @param params - The interpolation state and the reference timestamp for evaluation.
|
|
88
|
+
* @returns The lerped location, whether the interpolation has finished, and the effective start time.
|
|
89
|
+
*/
|
|
90
|
+
export declare const evaluateInterpolation: (params: EvaluateInterpolationParams) => EvaluateInterpolationResult;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* name: maplibre-gl-layers
|
|
3
|
+
* version: 0.1.0
|
|
4
|
+
* description: MapLibre's layer extension library enabling the display, movement, and modification of large numbers of dynamic sprite images
|
|
5
|
+
* author: Kouji Matsui (@kekyo@mi.kekyo.net)
|
|
6
|
+
* license: MIT
|
|
7
|
+
* repository.url: https://github.com/kekyo/maplibre-gl-layers.git
|
|
8
|
+
* git.commit.hash: 88b09a93779279947d9c6b1e3a7538d4d197dbcb
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
import { SpriteLocation } from './types';
|
|
12
|
+
/**
|
|
13
|
+
* Produces a deep copy so later updates do not mutate the original object.
|
|
14
|
+
*/
|
|
15
|
+
export declare const cloneSpriteLocation: (location: SpriteLocation) => SpriteLocation;
|
|
16
|
+
/**
|
|
17
|
+
* Linearly interpolates longitude, latitude, and optionally altitude.
|
|
18
|
+
* The `ratio` may fall outside [0, 1]; callers are responsible for clamping if needed.
|
|
19
|
+
*/
|
|
20
|
+
export declare const lerpSpriteLocation: (from: SpriteLocation, to: SpriteLocation, ratio: number) => SpriteLocation;
|
|
21
|
+
/**
|
|
22
|
+
* Compares two locations. Treats altitude as equal when either side is undefined.
|
|
23
|
+
*/
|
|
24
|
+
export declare const spriteLocationsEqual: (a: SpriteLocation, b: SpriteLocation) => boolean;
|
package/dist/math.d.ts
ADDED
|
@@ -0,0 +1,467 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* name: maplibre-gl-layers
|
|
3
|
+
* version: 0.1.0
|
|
4
|
+
* description: MapLibre's layer extension library enabling the display, movement, and modification of large numbers of dynamic sprite images
|
|
5
|
+
* author: Kouji Matsui (@kekyo@mi.kekyo.net)
|
|
6
|
+
* license: MIT
|
|
7
|
+
* repository.url: https://github.com/kekyo/maplibre-gl-layers.git
|
|
8
|
+
* git.commit.hash: 88b09a93779279947d9c6b1e3a7538d4d197dbcb
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
import { SpriteAnchor, SpriteImageOffset, SpriteLocation, SpriteScalingOptions } from './types';
|
|
12
|
+
/**
|
|
13
|
+
* WGS84-compatible Earth radius in meters.
|
|
14
|
+
* Used to convert one radian of longitude into meters when scaling sprites.
|
|
15
|
+
* @constant
|
|
16
|
+
*/
|
|
17
|
+
export declare const EARTH_RADIUS_METERS = 6378137;
|
|
18
|
+
/**
|
|
19
|
+
* Multiplier for converting degrees to radians.
|
|
20
|
+
* @constant
|
|
21
|
+
*/
|
|
22
|
+
export declare const DEG2RAD: number;
|
|
23
|
+
/**
|
|
24
|
+
* Multiplier for converting radians to degrees.
|
|
25
|
+
* @constant
|
|
26
|
+
*/
|
|
27
|
+
export declare const RAD2DEG: number;
|
|
28
|
+
/**
|
|
29
|
+
* Default MapLibre tile size used for Web Mercator calculations.
|
|
30
|
+
* @constant
|
|
31
|
+
*/
|
|
32
|
+
export declare const TILE_SIZE = 512;
|
|
33
|
+
/**
|
|
34
|
+
* Default values that fill in missing {@link SpriteScalingOptions} fields supplied by callers.
|
|
35
|
+
* @constant
|
|
36
|
+
*/
|
|
37
|
+
export declare const DEFAULT_SPRITE_SCALING_OPTIONS: SpriteScalingOptions;
|
|
38
|
+
/**
|
|
39
|
+
* Structure holding resolved sprite scaling options.
|
|
40
|
+
* @property {number} metersPerPixel - Effective number of meters represented by each rendered pixel.
|
|
41
|
+
* @property {number} zoomMin - Lowest zoom level at which scaling interpolation begins.
|
|
42
|
+
* @property {number} zoomMax - Highest zoom level at which scaling interpolation ends.
|
|
43
|
+
* @property {number} scaleMin - Scale multiplier applied at {@link ResolvedSpriteScalingOptions.zoomMin}.
|
|
44
|
+
* @property {number} scaleMax - Scale multiplier applied at {@link ResolvedSpriteScalingOptions.zoomMax}.
|
|
45
|
+
* @property {number} spriteMinPixel - Lower clamp for sprite size in pixels.
|
|
46
|
+
* @property {number} spriteMaxPixel - Upper clamp for sprite size in pixels.
|
|
47
|
+
*/
|
|
48
|
+
export type ResolvedSpriteScalingOptions = {
|
|
49
|
+
metersPerPixel: number;
|
|
50
|
+
zoomMin: number;
|
|
51
|
+
zoomMax: number;
|
|
52
|
+
scaleMin: number;
|
|
53
|
+
scaleMax: number;
|
|
54
|
+
spriteMinPixel: number;
|
|
55
|
+
spriteMaxPixel: number;
|
|
56
|
+
};
|
|
57
|
+
/**
|
|
58
|
+
* Fills missing {@link SpriteScalingOptions} values with defaults so downstream math can assume a complete object.
|
|
59
|
+
* @param options Optional scaling configuration from the caller.
|
|
60
|
+
* @returns {ResolvedSpriteScalingOptions} Resolved scaling settings covering every field.
|
|
61
|
+
*/
|
|
62
|
+
export declare const resolveScalingOptions: (options?: SpriteScalingOptions) => ResolvedSpriteScalingOptions;
|
|
63
|
+
/**
|
|
64
|
+
* Computes a linear scale factor based on zoom level.
|
|
65
|
+
* @param {number} zoom - Current zoom level from MapLibre's camera.
|
|
66
|
+
* @param {ResolvedSpriteScalingOptions} scaling - Resolved scaling options.
|
|
67
|
+
* @returns {number} Scale value interpolated between {@link ResolvedSpriteScalingOptions.scaleMin} and {@link ResolvedSpriteScalingOptions.scaleMax}.
|
|
68
|
+
*/
|
|
69
|
+
export declare const calculateZoomScaleFactor: (zoom: number, scaling: ResolvedSpriteScalingOptions) => number;
|
|
70
|
+
/**
|
|
71
|
+
* Calculates meters per pixel at the given latitude.
|
|
72
|
+
* Uses Web Mercator scale and applies the latitude-based cosine correction.
|
|
73
|
+
* @param {number} zoom - Map zoom level used to determine the Mercator scale.
|
|
74
|
+
* @param {number} latitude - Latitude in degrees where the meters-per-pixel value is resolved.
|
|
75
|
+
* @returns {number} Distance in meters represented by a single pixel at the provided latitude.
|
|
76
|
+
*/
|
|
77
|
+
export declare const calculateMetersPerPixelAtLatitude: (zoom: number, latitude: number) => number;
|
|
78
|
+
/**
|
|
79
|
+
* Checks whether a value is finite and not `NaN`.
|
|
80
|
+
* @param {number} value - Value to validate.
|
|
81
|
+
* @returns {boolean} `true` when the number is both finite and not `NaN`.
|
|
82
|
+
*/
|
|
83
|
+
export declare const isFiniteNumber: (value: number) => boolean;
|
|
84
|
+
/**
|
|
85
|
+
* Calculates the distance and bearing between two points in meters.
|
|
86
|
+
* @param {SpriteLocation} from - Starting point expressed in longitude/latitude (degrees) and optional altitude.
|
|
87
|
+
* @param {SpriteLocation} to - Destination point expressed in longitude/latitude (degrees) and optional altitude.
|
|
88
|
+
* @returns {{ distanceMeters: number; bearingDeg: number }} Distance in meters and bearing clockwise from north.
|
|
89
|
+
*/
|
|
90
|
+
export declare const calculateDistanceAndBearingMeters: (from: SpriteLocation, to: SpriteLocation) => {
|
|
91
|
+
distanceMeters: number;
|
|
92
|
+
bearingDeg: number;
|
|
93
|
+
};
|
|
94
|
+
/**
|
|
95
|
+
* Calculates billboard image dimensions in pixels and clamps them to display limits.
|
|
96
|
+
* @param {number | undefined} imageWidth - Source bitmap width in pixels.
|
|
97
|
+
* @param {number | undefined} imageHeight - Source bitmap height in pixels.
|
|
98
|
+
* @param {number} baseMetersPerPixel - Base scale derived from map zoom and latitude.
|
|
99
|
+
* @param {number} imageScale - User-provided scale multiplier.
|
|
100
|
+
* @param {number} zoomScaleFactor - Zoom-dependent scale multiplier derived from {@link calculateZoomScaleFactor}.
|
|
101
|
+
* @param {number} effectivePixelsPerMeter - Conversion between world meters and screen pixels.
|
|
102
|
+
* @param {number} spriteMinPixel - Lower pixel clamp for the sprite's largest side.
|
|
103
|
+
* @param {number} spriteMaxPixel - Upper pixel clamp for the sprite's largest side.
|
|
104
|
+
* @returns {{ width: number; height: number }} Pixel dimensions after scaling and clamping.
|
|
105
|
+
*/
|
|
106
|
+
export declare const calculateBillboardPixelDimensions: (imageWidth: number | undefined, imageHeight: number | undefined, baseMetersPerPixel: number, imageScale: number, zoomScaleFactor: number, effectivePixelsPerMeter: number, spriteMinPixel: number, spriteMaxPixel: number) => {
|
|
107
|
+
width: number;
|
|
108
|
+
height: number;
|
|
109
|
+
};
|
|
110
|
+
/**
|
|
111
|
+
* Computes the billboard offset in screen-space pixels.
|
|
112
|
+
* @param {SpriteImageOffset | undefined} offset - Offset configuration describing length (meters) and heading (degrees).
|
|
113
|
+
* @param {number} imageScale - User-provided scale multiplier applied to the offset distance.
|
|
114
|
+
* @param {number} zoomScaleFactor - Zoom-dependent scale multiplier.
|
|
115
|
+
* @param {number} effectivePixelsPerMeter - Conversion factor from meters to pixels.
|
|
116
|
+
* @returns {{ x: number; y: number }} Screen-space offset relative to the billboard center.
|
|
117
|
+
*/
|
|
118
|
+
export declare const calculateBillboardOffsetPixels: (offset: SpriteImageOffset | undefined, imageScale: number, zoomScaleFactor: number, effectivePixelsPerMeter: number) => {
|
|
119
|
+
x: number;
|
|
120
|
+
y: number;
|
|
121
|
+
};
|
|
122
|
+
/**
|
|
123
|
+
* Computes the screen-space shift caused by anchor rotation for billboards.
|
|
124
|
+
* @param {number} halfWidth - Half of the sprite width in pixels.
|
|
125
|
+
* @param {number} halfHeight - Half of the sprite height in pixels.
|
|
126
|
+
* @param {SpriteAnchor | undefined} anchor - Anchor definition normalized to [-1, 1] range.
|
|
127
|
+
* @param {number} totalRotateDeg - Rotation applied to the sprite, combining user and bearing rotations.
|
|
128
|
+
* @returns {{ x: number; y: number }} Pixel delta required to bring the anchor back to the requested origin.
|
|
129
|
+
*/
|
|
130
|
+
export declare const calculateBillboardAnchorShiftPixels: (halfWidth: number, halfHeight: number, anchor: SpriteAnchor | undefined, totalRotateDeg: number) => {
|
|
131
|
+
x: number;
|
|
132
|
+
y: number;
|
|
133
|
+
};
|
|
134
|
+
/**
|
|
135
|
+
* Calculates surface image dimensions in world meters.
|
|
136
|
+
* @param {number | undefined} imageWidth - Source bitmap width in pixels.
|
|
137
|
+
* @param {number | undefined} imageHeight - Source bitmap height in pixels.
|
|
138
|
+
* @param {number} baseMetersPerPixel - World meters represented by a pixel at the current zoom.
|
|
139
|
+
* @param {number} imageScale - User-provided scale multiplier.
|
|
140
|
+
* @param {number} zoomScaleFactor - Zoom-dependent scale multiplier.
|
|
141
|
+
* @returns {{ width: number; height: number }} Dimensions expressed as world-space meters.
|
|
142
|
+
*/
|
|
143
|
+
export declare const calculateSurfaceWorldDimensions: (imageWidth: number | undefined, imageHeight: number | undefined, baseMetersPerPixel: number, imageScale: number, zoomScaleFactor: number) => {
|
|
144
|
+
width: number;
|
|
145
|
+
height: number;
|
|
146
|
+
};
|
|
147
|
+
/**
|
|
148
|
+
* Computes east/north shifts from anchor rotation on surface images.
|
|
149
|
+
* @param {number} halfWidthMeters - Half of the world-space width.
|
|
150
|
+
* @param {number} halfHeightMeters - Half of the world-space height.
|
|
151
|
+
* @param {SpriteAnchor | undefined} anchor - Anchor definition normalized to [-1, 1] range.
|
|
152
|
+
* @param {number} totalRotateDeg - Rotation angle applied to the surface.
|
|
153
|
+
* @returns {{ east: number; north: number }} Displacement in meters required to apply the anchor.
|
|
154
|
+
*/
|
|
155
|
+
export declare const calculateSurfaceAnchorShiftMeters: (halfWidthMeters: number, halfHeightMeters: number, anchor: SpriteAnchor | undefined, totalRotateDeg: number) => {
|
|
156
|
+
east: number;
|
|
157
|
+
north: number;
|
|
158
|
+
};
|
|
159
|
+
/**
|
|
160
|
+
* Calculates surface image offsets in meters.
|
|
161
|
+
* @param {SpriteImageOffset | undefined} offset - Offset configuration for the surface sprite.
|
|
162
|
+
* @param {number} imageScale - User-provided scale multiplier applied to the offset distance.
|
|
163
|
+
* @returns {{ east: number; north: number }} Offset vector in meters.
|
|
164
|
+
*/
|
|
165
|
+
export declare const calculateSurfaceOffsetMeters: (offset: SpriteImageOffset | undefined, imageScale: number) => {
|
|
166
|
+
east: number;
|
|
167
|
+
north: number;
|
|
168
|
+
};
|
|
169
|
+
/**
|
|
170
|
+
* Adds east/north distances (meters) to a longitude/latitude pair.
|
|
171
|
+
* @param {number} baseLng - Base longitude in degrees.
|
|
172
|
+
* @param {number} baseLat - Base latitude in degrees.
|
|
173
|
+
* @param {number} east - Eastward displacement in meters.
|
|
174
|
+
* @param {number} north - Northward displacement in meters.
|
|
175
|
+
* @returns {SpriteLocation} New geographic position after applying the displacement.
|
|
176
|
+
*/
|
|
177
|
+
export declare const applySurfaceDisplacement: (baseLng: number, baseLat: number, east: number, north: number) => SpriteLocation;
|
|
178
|
+
/**
|
|
179
|
+
* Converts screen coordinates to clip space.
|
|
180
|
+
* @param {number} x - Screen-space x coordinate in CSS pixels.
|
|
181
|
+
* @param {number} y - Screen-space y coordinate in CSS pixels.
|
|
182
|
+
* @param {number} drawingBufferWidth - WebGL drawing buffer width in device pixels.
|
|
183
|
+
* @param {number} drawingBufferHeight - WebGL drawing buffer height in device pixels.
|
|
184
|
+
* @param {number} pixelRatio - Device pixel ratio used to scale CSS pixels to device pixels.
|
|
185
|
+
* @returns {[number, number]} Clip-space coordinates in the range [-1, 1].
|
|
186
|
+
*/
|
|
187
|
+
export declare const screenToClip: (x: number, y: number, drawingBufferWidth: number, drawingBufferHeight: number, pixelRatio: number) => [number, number];
|
|
188
|
+
/**
|
|
189
|
+
* Index order used to decompose a quad into two triangles.
|
|
190
|
+
* @constant
|
|
191
|
+
*/
|
|
192
|
+
export declare const TRIANGLE_INDICES: readonly [0, 1, 2, 2, 1, 3];
|
|
193
|
+
/**
|
|
194
|
+
* UV coordinates for each corner of a quad following the index order in {@link TRIANGLE_INDICES}.
|
|
195
|
+
* @constant
|
|
196
|
+
*/
|
|
197
|
+
export declare const UV_CORNERS: ReadonlyArray<readonly [number, number]>;
|
|
198
|
+
/**
|
|
199
|
+
* Calculates the conversion factor between meters and pixels taking perspective into account.
|
|
200
|
+
* @param {number} metersPerPixelAtLatitude - Meters covered by a single pixel at the sprite latitude.
|
|
201
|
+
* @param {number} perspectiveRatio - Additional scale factor introduced by perspective settings.
|
|
202
|
+
* @returns {number} Effective pixels per meter along the camera ray.
|
|
203
|
+
*/
|
|
204
|
+
export declare const calculateEffectivePixelsPerMeter: (metersPerPixelAtLatitude: number, perspectiveRatio: number) => number;
|
|
205
|
+
/**
|
|
206
|
+
* Projects a geographic coordinate and elevation into homogeneous clip space.
|
|
207
|
+
* @typedef ProjectToClipSpaceFn
|
|
208
|
+
* @param {number} lng - Longitude in degrees.
|
|
209
|
+
* @param {number} lat - Latitude in degrees.
|
|
210
|
+
* @param {number} elevationMeters - Elevation offset in meters.
|
|
211
|
+
* @returns {[number, number, number, number] | null} Homogeneous clip coordinates or `null` when outside the view.
|
|
212
|
+
*/
|
|
213
|
+
export type ProjectToClipSpaceFn = (lng: number, lat: number, elevationMeters: number) => [number, number, number, number] | null;
|
|
214
|
+
/**
|
|
215
|
+
* Unprojects a screen-space point back to longitude/latitude.
|
|
216
|
+
* @typedef UnprojectPointFn
|
|
217
|
+
* @param {{ x: number; y: number }} point - Screen-space coordinates in pixels.
|
|
218
|
+
* @returns {SpriteLocation | null} Geographic location or `null` when unprojection fails.
|
|
219
|
+
*/
|
|
220
|
+
export type UnprojectPointFn = (point: {
|
|
221
|
+
x: number;
|
|
222
|
+
y: number;
|
|
223
|
+
}) => SpriteLocation | null;
|
|
224
|
+
/**
|
|
225
|
+
* Resolves a depth key for billboards by sampling the clip-space Z at the sprite center.
|
|
226
|
+
* @param {{ x: number; y: number }} center - Screen-space center of the billboard in pixels.
|
|
227
|
+
* @param {SpriteLocation} spriteLocation - Geographic location including optional altitude.
|
|
228
|
+
* @param {UnprojectPointFn} unproject - Function for converting screen coordinates to geographic coordinates.
|
|
229
|
+
* @param {ProjectToClipSpaceFn} projectToClipSpace - Function that projects a geographic coordinate to clip space.
|
|
230
|
+
* @returns {number | null} Negative normalized device coordinate Z used for depth sorting, or `null` when unavailable.
|
|
231
|
+
*/
|
|
232
|
+
export declare const calculateBillboardDepthKey: (center: {
|
|
233
|
+
x: number;
|
|
234
|
+
y: number;
|
|
235
|
+
}, spriteLocation: SpriteLocation, unproject: UnprojectPointFn, projectToClipSpace: ProjectToClipSpaceFn) => number | null;
|
|
236
|
+
/**
|
|
237
|
+
* Signature for surface depth bias callbacks that tweak clip-space Z/W.
|
|
238
|
+
* @typedef SurfaceDepthBiasFn
|
|
239
|
+
* @param {{ index: number; clipZ: number; clipW: number }} params - Geometry index and unmodified clip coordinates.
|
|
240
|
+
* @returns {{ clipZ: number; clipW: number }} Adjusted clip coordinates used for depth evaluation.
|
|
241
|
+
*/
|
|
242
|
+
export type SurfaceDepthBiasFn = (params: {
|
|
243
|
+
index: number;
|
|
244
|
+
clipZ: number;
|
|
245
|
+
clipW: number;
|
|
246
|
+
}) => {
|
|
247
|
+
clipZ: number;
|
|
248
|
+
clipW: number;
|
|
249
|
+
};
|
|
250
|
+
/**
|
|
251
|
+
* Computes a depth key for surface quads by projecting each corner and tracking the deepest point.
|
|
252
|
+
* @param {SpriteLocation} baseLngLat - Base longitude/latitude of the quad center.
|
|
253
|
+
* @param {readonly SurfaceCorner[]} displacements - Corner offsets in meters from the center.
|
|
254
|
+
* @param {SpriteLocation} spriteLocation - Sprite world location including optional altitude.
|
|
255
|
+
* @param {ProjectToClipSpaceFn} projectToClipSpace - Projection function used to reach clip space.
|
|
256
|
+
* @param {{ readonly indices?: readonly number[]; readonly biasFn?: SurfaceDepthBiasFn }} [options] - Optional overrides.
|
|
257
|
+
* @returns {number | null} Depth key suitable for sorting, or `null` when any corner cannot be projected.
|
|
258
|
+
*/
|
|
259
|
+
export declare const calculateSurfaceDepthKey: (baseLngLat: SpriteLocation, displacements: readonly SurfaceCorner[], spriteLocation: SpriteLocation, projectToClipSpace: ProjectToClipSpaceFn, options?: {
|
|
260
|
+
readonly indices?: readonly number[];
|
|
261
|
+
readonly biasFn?: SurfaceDepthBiasFn;
|
|
262
|
+
}) => number | null;
|
|
263
|
+
/**
|
|
264
|
+
* Projects a longitude/latitude pair to screen-space pixels.
|
|
265
|
+
* @typedef ProjectLngLatFn
|
|
266
|
+
* @param {SpriteLocation} lngLat - Geographic coordinate to project.
|
|
267
|
+
* @returns {{ x: number; y: number } | null} Screen coordinates or `null` when projection fails.
|
|
268
|
+
*/
|
|
269
|
+
export type ProjectLngLatFn = (lngLat: SpriteLocation) => {
|
|
270
|
+
x: number;
|
|
271
|
+
y: number;
|
|
272
|
+
} | null;
|
|
273
|
+
/**
|
|
274
|
+
* Parameters required to resolve a billboard center position.
|
|
275
|
+
* @typedef BillboardCenterParams
|
|
276
|
+
* @property {{ x: number; y: number }} base - Reference screen-space position (usually anchor point).
|
|
277
|
+
* @property {number} [imageWidth] - Source bitmap width in pixels.
|
|
278
|
+
* @property {number} [imageHeight] - Source bitmap height in pixels.
|
|
279
|
+
* @property {number} baseMetersPerPixel - Meters represented by a pixel at the sprite latitude.
|
|
280
|
+
* @property {number} imageScale - User-provided scaling multiplier.
|
|
281
|
+
* @property {number} zoomScaleFactor - Zoom-dependent scale multiplier.
|
|
282
|
+
* @property {number} effectivePixelsPerMeter - Pixels per meter after perspective adjustments.
|
|
283
|
+
* @property {number} spriteMinPixel - Lower clamp for the sprite's largest pixel dimension.
|
|
284
|
+
* @property {number} spriteMaxPixel - Upper clamp for the sprite's largest pixel dimension.
|
|
285
|
+
* @property {number} totalRotateDeg - Aggregate rotation applied to the sprite in degrees.
|
|
286
|
+
* @property {SpriteAnchor} [anchor] - Anchor definition normalized between -1 and 1.
|
|
287
|
+
* @property {SpriteImageOffset} [offset] - Offset definition applied in meters/deg.
|
|
288
|
+
*/
|
|
289
|
+
export type BillboardCenterParams = {
|
|
290
|
+
base: {
|
|
291
|
+
x: number;
|
|
292
|
+
y: number;
|
|
293
|
+
};
|
|
294
|
+
imageWidth?: number;
|
|
295
|
+
imageHeight?: number;
|
|
296
|
+
baseMetersPerPixel: number;
|
|
297
|
+
imageScale: number;
|
|
298
|
+
zoomScaleFactor: number;
|
|
299
|
+
effectivePixelsPerMeter: number;
|
|
300
|
+
spriteMinPixel: number;
|
|
301
|
+
spriteMaxPixel: number;
|
|
302
|
+
totalRotateDeg: number;
|
|
303
|
+
anchor?: SpriteAnchor;
|
|
304
|
+
offset?: SpriteImageOffset;
|
|
305
|
+
};
|
|
306
|
+
/**
|
|
307
|
+
* Resolved properties describing the billboard center and derived dimensions.
|
|
308
|
+
* @typedef BillboardCenterResult
|
|
309
|
+
* @property {number} centerX - Screen-space x coordinate after offset adjustments.
|
|
310
|
+
* @property {number} centerY - Screen-space y coordinate after offset adjustments.
|
|
311
|
+
* @property {number} halfWidth - Half of the clamped pixel width.
|
|
312
|
+
* @property {number} halfHeight - Half of the clamped pixel height.
|
|
313
|
+
* @property {number} pixelWidth - Full pixel width after scaling and clamping.
|
|
314
|
+
* @property {number} pixelHeight - Full pixel height after scaling and clamping.
|
|
315
|
+
* @property {{ x: number; y: number }} anchorShift - Pixel delta caused by anchor rotation.
|
|
316
|
+
* @property {{ x: number; y: number }} offsetShift - Pixel delta caused by radial offset.
|
|
317
|
+
*/
|
|
318
|
+
export type BillboardCenterResult = {
|
|
319
|
+
centerX: number;
|
|
320
|
+
centerY: number;
|
|
321
|
+
halfWidth: number;
|
|
322
|
+
halfHeight: number;
|
|
323
|
+
pixelWidth: number;
|
|
324
|
+
pixelHeight: number;
|
|
325
|
+
anchorShift: {
|
|
326
|
+
x: number;
|
|
327
|
+
y: number;
|
|
328
|
+
};
|
|
329
|
+
offsetShift: {
|
|
330
|
+
x: number;
|
|
331
|
+
y: number;
|
|
332
|
+
};
|
|
333
|
+
};
|
|
334
|
+
/**
|
|
335
|
+
* Calculates the final billboard center position, applying scaling, anchor, and offset adjustments.
|
|
336
|
+
* @param {BillboardCenterParams} params - Inputs describing sprite geometry and scaling context.
|
|
337
|
+
* @returns {BillboardCenterResult} Computed center position and derived metrics for rendering.
|
|
338
|
+
*/
|
|
339
|
+
export declare const calculateBillboardCenterPosition: (params: BillboardCenterParams) => BillboardCenterResult;
|
|
340
|
+
/**
|
|
341
|
+
* Parameters controlling how billboard corners are computed in screen space.
|
|
342
|
+
* @typedef BillboardCornerParams
|
|
343
|
+
* @property {number} centerX - Screen-space x coordinate for the billboard center after offsets.
|
|
344
|
+
* @property {number} centerY - Screen-space y coordinate for the billboard center after offsets.
|
|
345
|
+
* @property {number} halfWidth - Half of the billboard width in pixels.
|
|
346
|
+
* @property {number} halfHeight - Half of the billboard height in pixels.
|
|
347
|
+
* @property {SpriteAnchor} [anchor] - Optional anchor definition normalized between -1 and 1.
|
|
348
|
+
* @property {number} totalRotateDeg - Total rotation applied to the billboard in degrees.
|
|
349
|
+
*/
|
|
350
|
+
export type BillboardCornerParams = {
|
|
351
|
+
centerX: number;
|
|
352
|
+
centerY: number;
|
|
353
|
+
halfWidth: number;
|
|
354
|
+
halfHeight: number;
|
|
355
|
+
anchor?: SpriteAnchor;
|
|
356
|
+
totalRotateDeg: number;
|
|
357
|
+
};
|
|
358
|
+
/**
|
|
359
|
+
* Screen-space coordinates combined with UV data for a quad corner.
|
|
360
|
+
* @typedef QuadCorner
|
|
361
|
+
* @property {number} x - Screen-space x coordinate.
|
|
362
|
+
* @property {number} y - Screen-space y coordinate.
|
|
363
|
+
* @property {number} u - Texture u coordinate.
|
|
364
|
+
* @property {number} v - Texture v coordinate.
|
|
365
|
+
*/
|
|
366
|
+
export type QuadCorner = {
|
|
367
|
+
x: number;
|
|
368
|
+
y: number;
|
|
369
|
+
u: number;
|
|
370
|
+
v: number;
|
|
371
|
+
};
|
|
372
|
+
/**
|
|
373
|
+
* Produces the rotated, anchor-adjusted screen-space positions for each billboard corner.
|
|
374
|
+
* @param {BillboardCornerParams} params - Inputs describing the billboard geometry.
|
|
375
|
+
* @returns {QuadCorner[]} Array containing screen- and texture-space information per corner.
|
|
376
|
+
*/
|
|
377
|
+
export declare const calculateBillboardCornerScreenPositions: (params: BillboardCornerParams) => QuadCorner[];
|
|
378
|
+
/**
|
|
379
|
+
* Parameters for projecting a surface sprite's center into screen space.
|
|
380
|
+
* @typedef SurfaceCenterParams
|
|
381
|
+
* @property {SpriteLocation} baseLngLat - Base geographic location of the sprite.
|
|
382
|
+
* @property {number} [imageWidth] - Source bitmap width in pixels.
|
|
383
|
+
* @property {number} [imageHeight] - Source bitmap height in pixels.
|
|
384
|
+
* @property {number} baseMetersPerPixel - Base meters per pixel at the sprite latitude.
|
|
385
|
+
* @property {number} imageScale - User-provided scaling multiplier.
|
|
386
|
+
* @property {number} zoomScaleFactor - Zoom-dependent scale multiplier.
|
|
387
|
+
* @property {number} totalRotateDeg - Rotation applied to the sprite in degrees.
|
|
388
|
+
* @property {SpriteAnchor} [anchor] - Anchor definition normalized between -1 and 1.
|
|
389
|
+
* @property {SpriteImageOffset} [offset] - Offset definition applied in meters/deg.
|
|
390
|
+
* @property {ProjectLngLatFn} project - Projection function mapping longitude/latitude to screen space.
|
|
391
|
+
*/
|
|
392
|
+
export type SurfaceCenterParams = {
|
|
393
|
+
baseLngLat: SpriteLocation;
|
|
394
|
+
imageWidth?: number;
|
|
395
|
+
imageHeight?: number;
|
|
396
|
+
baseMetersPerPixel: number;
|
|
397
|
+
imageScale: number;
|
|
398
|
+
zoomScaleFactor: number;
|
|
399
|
+
totalRotateDeg: number;
|
|
400
|
+
anchor?: SpriteAnchor;
|
|
401
|
+
offset?: SpriteImageOffset;
|
|
402
|
+
project: ProjectLngLatFn;
|
|
403
|
+
};
|
|
404
|
+
/**
|
|
405
|
+
* Output describing the resolved surface center and displacement details.
|
|
406
|
+
* @typedef SurfaceCenterResult
|
|
407
|
+
* @property {{ x: number; y: number } | null} center - Projected screen coordinates or `null` when projection fails.
|
|
408
|
+
* @property {{ width: number; height: number }} worldDimensions - Sprite dimensions in world meters.
|
|
409
|
+
* @property {{ east: number; north: number }} totalDisplacement - Combined anchor and offset displacement in meters.
|
|
410
|
+
* @property {SpriteLocation} displacedLngLat - Geographic coordinates after applying displacement.
|
|
411
|
+
*/
|
|
412
|
+
export type SurfaceCenterResult = {
|
|
413
|
+
center: {
|
|
414
|
+
x: number;
|
|
415
|
+
y: number;
|
|
416
|
+
} | null;
|
|
417
|
+
worldDimensions: {
|
|
418
|
+
width: number;
|
|
419
|
+
height: number;
|
|
420
|
+
};
|
|
421
|
+
totalDisplacement: {
|
|
422
|
+
east: number;
|
|
423
|
+
north: number;
|
|
424
|
+
};
|
|
425
|
+
displacedLngLat: SpriteLocation;
|
|
426
|
+
};
|
|
427
|
+
/**
|
|
428
|
+
* Calculates the projected center of a surface sprite and derives related world-space displacements.
|
|
429
|
+
* @param {SurfaceCenterParams} params - Inputs describing the sprite geometry and projection context.
|
|
430
|
+
* @returns {SurfaceCenterResult} Result containing projection output and displacement metadata.
|
|
431
|
+
*/
|
|
432
|
+
export declare const calculateSurfaceCenterPosition: (params: SurfaceCenterParams) => SurfaceCenterResult;
|
|
433
|
+
/**
|
|
434
|
+
* Parameters describing how to compute each surface corner displacement.
|
|
435
|
+
* @typedef SurfaceCornerParams
|
|
436
|
+
* @property {number} worldWidthMeters - Width of the sprite footprint in meters.
|
|
437
|
+
* @property {number} worldHeightMeters - Height of the sprite footprint in meters.
|
|
438
|
+
* @property {SpriteAnchor} anchor - Anchor definition normalized between -1 and 1.
|
|
439
|
+
* @property {number} totalRotateDeg - Rotation applied to the surface in degrees.
|
|
440
|
+
* @property {{ east: number; north: number }} offsetMeters - Additional displacement applied uniformly to all corners.
|
|
441
|
+
*/
|
|
442
|
+
export type SurfaceCornerParams = {
|
|
443
|
+
worldWidthMeters: number;
|
|
444
|
+
worldHeightMeters: number;
|
|
445
|
+
anchor: SpriteAnchor;
|
|
446
|
+
totalRotateDeg: number;
|
|
447
|
+
offsetMeters: {
|
|
448
|
+
east: number;
|
|
449
|
+
north: number;
|
|
450
|
+
};
|
|
451
|
+
};
|
|
452
|
+
/**
|
|
453
|
+
* East/north displacement for an individual surface corner.
|
|
454
|
+
* @typedef SurfaceCorner
|
|
455
|
+
* @property {number} east - Eastward offset in meters relative to the base center.
|
|
456
|
+
* @property {number} north - Northward offset in meters relative to the base center.
|
|
457
|
+
*/
|
|
458
|
+
export type SurfaceCorner = {
|
|
459
|
+
east: number;
|
|
460
|
+
north: number;
|
|
461
|
+
};
|
|
462
|
+
/**
|
|
463
|
+
* Converts normalized surface corners into world-space displacements honoring anchor, rotation, and offsets.
|
|
464
|
+
* @param {SurfaceCornerParams} params - Inputs describing quad geometry and positioning.
|
|
465
|
+
* @returns {SurfaceCorner[]} Array of corner displacements in meters relative to the base center.
|
|
466
|
+
*/
|
|
467
|
+
export declare const calculateSurfaceCornerDisplacements: (params: SurfaceCornerParams) => SurfaceCorner[];
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* name: maplibre-gl-layers
|
|
3
|
+
* version: 0.1.0
|
|
4
|
+
* description: MapLibre's layer extension library enabling the display, movement, and modification of large numbers of dynamic sprite images
|
|
5
|
+
* author: Kouji Matsui (@kekyo@mi.kekyo.net)
|
|
6
|
+
* license: MIT
|
|
7
|
+
* repository.url: https://github.com/kekyo/maplibre-gl-layers.git
|
|
8
|
+
* git.commit.hash: 88b09a93779279947d9c6b1e3a7538d4d197dbcb
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
import { EasingFunction, SpriteNumericInterpolationOptions } from './types';
|
|
12
|
+
/**
|
|
13
|
+
* Runtime state tracked for numeric interpolations.
|
|
14
|
+
* @property {number} durationMs - Total duration of the interpolation in milliseconds.
|
|
15
|
+
* @property {EasingFunction} easing - Easing function applied to progress samples.
|
|
16
|
+
* @property {number} from - Start value used for interpolation.
|
|
17
|
+
* @property {number} to - Adjusted target along the shortest rotation path.
|
|
18
|
+
* @property {number} finalValue - Caller-requested final value (used once interpolation completes).
|
|
19
|
+
* @property {number} startTimestamp - Timestamp when interpolation began, `-1` until evaluation starts.
|
|
20
|
+
*/
|
|
21
|
+
export interface NumericInterpolationState {
|
|
22
|
+
readonly durationMs: number;
|
|
23
|
+
readonly easing: EasingFunction;
|
|
24
|
+
readonly from: number;
|
|
25
|
+
readonly to: number;
|
|
26
|
+
readonly finalValue: number;
|
|
27
|
+
startTimestamp: number;
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* Parameters required to construct a {@link NumericInterpolationState}.
|
|
31
|
+
* @property {number} currentValue - Current numeric value rendered on screen.
|
|
32
|
+
* @property {number} targetValue - Desired value after interpolation completes.
|
|
33
|
+
* @property {SpriteNumericInterpolationOptions} options - Timing and easing configuration.
|
|
34
|
+
*/
|
|
35
|
+
export interface CreateNumericInterpolationStateParams {
|
|
36
|
+
currentValue: number;
|
|
37
|
+
targetValue: number;
|
|
38
|
+
options: SpriteNumericInterpolationOptions;
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* Result returned by {@link createNumericInterpolationState} containing state and a flag for activation.
|
|
42
|
+
* @property {NumericInterpolationState} state - Resolved state object.
|
|
43
|
+
* @property {boolean} requiresInterpolation - Indicates whether the caller should animate or snap.
|
|
44
|
+
*/
|
|
45
|
+
export interface CreateNumericInterpolationStateResult {
|
|
46
|
+
readonly state: NumericInterpolationState;
|
|
47
|
+
readonly requiresInterpolation: boolean;
|
|
48
|
+
}
|
|
49
|
+
/**
|
|
50
|
+
* Creates interpolation state describing how to move from the current value to the target value.
|
|
51
|
+
* @param {CreateNumericInterpolationStateParams} params - Inputs describing the current, target, and options.
|
|
52
|
+
* @returns {CreateNumericInterpolationStateResult} State data plus a flag indicating if animation is needed.
|
|
53
|
+
*/
|
|
54
|
+
export declare const createNumericInterpolationState: (params: CreateNumericInterpolationStateParams) => CreateNumericInterpolationStateResult;
|
|
55
|
+
/**
|
|
56
|
+
* Parameters describing interpolation evaluation state.
|
|
57
|
+
* @property {NumericInterpolationState} state - State generated via {@link createNumericInterpolationState}.
|
|
58
|
+
* @property {number} timestamp - Timestamp in milliseconds used to sample the interpolation curve.
|
|
59
|
+
*/
|
|
60
|
+
export interface EvaluateNumericInterpolationParams {
|
|
61
|
+
state: NumericInterpolationState;
|
|
62
|
+
timestamp: number;
|
|
63
|
+
}
|
|
64
|
+
/**
|
|
65
|
+
* Result of evaluating a numeric interpolation at a specific timestamp.
|
|
66
|
+
* @property {number} value - Current interpolated value (or final value after completion).
|
|
67
|
+
* @property {boolean} completed - Indicates whether interpolation reached the end.
|
|
68
|
+
* @property {number} effectiveStartTimestamp - Start timestamp applied during evaluation.
|
|
69
|
+
*/
|
|
70
|
+
export interface EvaluateNumericInterpolationResult {
|
|
71
|
+
readonly value: number;
|
|
72
|
+
readonly completed: boolean;
|
|
73
|
+
readonly effectiveStartTimestamp: number;
|
|
74
|
+
}
|
|
75
|
+
/**
|
|
76
|
+
* Evaluates a numeric interpolation against the provided timestamp.
|
|
77
|
+
* @param {EvaluateNumericInterpolationParams} params - Inputs containing interpolation state and sample timestamp.
|
|
78
|
+
* @returns {EvaluateNumericInterpolationResult} Current value, completion flag, and effective start time.
|
|
79
|
+
*/
|
|
80
|
+
export declare const evaluateNumericInterpolation: (params: EvaluateNumericInterpolationParams) => EvaluateNumericInterpolationResult;
|