11347302982

Committed 15 Oct 2024 01:38PM UTC coverage: 91.645% (+0.002%) from 91.643%

Build # 11347302982

Build Type

Pull #9216

github

Committed by

web-flow

Commit Message

Merge 0d8baf554 into 065816e0f

Pull Request Pull Request #9216: Bump to loaders.gl@4.3

Run Details

6744 of 7378 branches covered (91.41%)

Branch coverage included in aggregate %.

2 of 3 new or added lines in 1 file covered. (66.67%)

4 existing lines in 1 file now uncovered.

54689 of 59656 relevant lines covered (91.67%)

14711.25 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

45.69

/modules/geo-layers/src/wms-layer/wms-layer.ts

// deck.gl
// SPDX-License-Identifier: MIT
// Copyright (c) vis.gl contributors

// deck.gl, MIT license
// Attributions:
// Copyright 2022 Foursquare Labs, Inc.

/* eslint-disable camelcase */ // Some WMS parameters are not in camel case
/* global setTimeout, clearTimeout */

import {
  Layer,
  CompositeLayer,
  CompositeLayerProps,
  UpdateParameters,
  DefaultProps,
  Viewport,
  COORDINATE_SYSTEM,
  _deepEqual as deepEqual
} from '@deck.gl/core';
import {BitmapLayer} from '@deck.gl/layers';
import type {GetImageParameters, ImageSourceMetadata, ImageType} from '@loaders.gl/loader-utils';
import type {ImageSourceType} from '@loaders.gl/wms';
import {ImageSource, createImageSource} from '@loaders.gl/wms';
import {WGS84ToPseudoMercator} from './utils';

/** All props supported by the TileLayer */
export type WMSLayerProps = CompositeLayerProps & _WMSLayerProps;

/** Props added by the TileLayer */
type _WMSLayerProps = {
  data: string | ImageSource;
  serviceType?: ImageSourceType | 'auto';
  layers?: string[];
  srs?: 'EPSG:4326' | 'EPSG:3857' | 'auto';
  onMetadataLoad?: (metadata: ImageSourceMetadata) => void;
  onMetadataLoadError?: (error: Error) => void;
  onImageLoadStart?: (requestId: unknown) => void;
  onImageLoad?: (requestId: unknown) => void;
  onImageLoadError?: (requestId: unknown, error: Error) => void;
};

const defaultProps: DefaultProps<WMSLayerProps> = {
  id: 'imagery-layer',
  data: '',
  serviceType: 'auto',
  srs: 'auto',
  layers: {type: 'array', compare: true, value: []},
  onMetadataLoad: {type: 'function', value: () => {}},
  // eslint-disable-next-line
  onMetadataLoadError: {type: 'function', value: console.error},
  onImageLoadStart: {type: 'function', value: () => {}},
  onImageLoad: {type: 'function', value: () => {}},
  onImageLoadError: {
    type: 'function',
    compare: false,
    // eslint-disable-next-line
    value: (requestId: unknown, error: Error) => console.error(error, requestId)
  }
};

/**
 * The layer is used in Hex Tile layer in order to properly discard invisible elements during animation
 */
export class WMSLayer<ExtraPropsT extends {} = {}> extends CompositeLayer<
  ExtraPropsT & Required<_WMSLayerProps>
> {
  static layerName = 'WMSLayer';
  static defaultProps: DefaultProps = defaultProps;

  state!: {
    imageSource: ImageSource;
    image: ImageType;
    bounds: [number, number, number, number];
    lastRequestParameters: {
      bbox: [number, number, number, number];
      layers: string[];
      srs: 'EPSG:4326' | 'EPSG:3857';
      width: number;
      height: number;
    };
    lastRequestId: number;
    _nextRequestId: number;
    /** TODO: Change any => setTimeout return type. Different between Node and browser... */
    _timeoutId: any;
    loadCounter: number;
  };

  /** Returns true if all async resources are loaded */
  get isLoaded(): boolean {
    // Track the explicit loading done by this layer
    return this.state?.loadCounter === 0 && super.isLoaded;
  }

  /** Lets deck.gl know that we want viewport change events */
  override shouldUpdateState(): boolean {
    return true;
  }

  override initializeState(): void {
    // intentionally empty, initialization is done in updateState
    this.state._nextRequestId = 0;
    this.state.lastRequestId = -1;
    this.state.loadCounter = 0;
  }

  override updateState({changeFlags, props, oldProps}: UpdateParameters<this>): void {
    const {viewport} = this.context;

    // Check if data source has changed
    if (changeFlags.dataChanged || props.serviceType !== oldProps.serviceType) {
      this.state.imageSource = this._createImageSource(props);
      // eslint-disable-next-line @typescript-eslint/no-floating-promises
      this._loadMetadata();
      this.debounce(() => this.loadImage(viewport, 'image source changed'), 0);
    } else if (!deepEqual(props.layers, oldProps.layers, 1)) {
      this.debounce(() => this.loadImage(viewport, 'layers changed'), 0);
    } else if (changeFlags.viewportChanged) {
      this.debounce(() => this.loadImage(viewport, 'viewport changed'));
    }
  }

  override finalizeState(): void {
    // TODO - we could cancel outstanding requests
  }

  override renderLayers(): Layer {
    // TODO - which bitmap layer is rendered should depend on the current viewport
    // Currently Studio only uses one viewport
    const {bounds, image, lastRequestParameters} = this.state;

    return (
      image &&
      new BitmapLayer({
        ...this.getSubLayerProps({id: 'bitmap'}),
        _imageCoordinateSystem:
          lastRequestParameters.srs === 'EPSG:4326'
            ? COORDINATE_SYSTEM.LNGLAT
            : COORDINATE_SYSTEM.CARTESIAN,
        bounds,
        image
      })
    );
  }

  async getFeatureInfoText(x: number, y: number): Promise<string | null> {
    const {lastRequestParameters} = this.state;
    if (lastRequestParameters) {
      // @ts-expect-error Undocumented method
      const featureInfo = await this.state.imageSource.getFeatureInfoText?.({
        ...lastRequestParameters,
        query_layers: lastRequestParameters.layers,
        x,
        y,
        info_format: 'application/vnd.ogc.gml'
      });
      return featureInfo;
    }
    return '';
  }

  _createImageSource(props: WMSLayerProps): ImageSource {
    if (props.data instanceof ImageSource) {
      return props.data;
    }

    if (typeof props.data === 'string') {
      return createImageSource(props.data, {
        loadOptions: props.loadOptions,
        type: props.serviceType
      });
    }

    throw new Error('invalid image source in props.data');
  }

  /** Run a getMetadata on the image service */
  async _loadMetadata(): Promise<void> {
    const {imageSource} = this.state;
    try {
      this.state.loadCounter++;
      const metadata = await imageSource.getMetadata();

      // If a request takes a long time, it may no longer be expected
      if (this.state.imageSource === imageSource) {
        this.getCurrentLayer()?.props.onMetadataLoad(metadata);
      }
    } catch (error) {
      this.getCurrentLayer()?.props.onMetadataLoadError(error as Error);
    } finally {
      this.state.loadCounter--;
    }
  }

  /** Load an image */
  async loadImage(viewport: Viewport, reason: string): Promise<void> {
    const {layers, serviceType} = this.props;

    // TODO - move to ImageSource?
    if (serviceType === 'wms' && layers.length === 0) {
      return;
    }

    const bounds = viewport.getBounds();
    const {width, height} = viewport;
    const requestId = this.getRequestId();
    let {srs} = this.props;
    if (srs === 'auto') {
      // BitmapLayer only supports LNGLAT or CARTESIAN (Web-Mercator)
      srs = viewport.resolution ? 'EPSG:4326' : 'EPSG:3857';
    }
    const requestParams: GetImageParameters = {
      width,
      height,
      boundingBox: [
        [bounds[0], bounds[1]],
        [bounds[2], bounds[3]]
      ],
      layers,
      crs: srs
    };
    if (srs === 'EPSG:3857') {
      const min = WGS84ToPseudoMercator([bounds[0], bounds[1]]);
      const max = WGS84ToPseudoMercator([bounds[2], bounds[3]]);
      requestParams.boundingBox = [min, max];
    }

    try {
      this.state.loadCounter++;
      this.props.onImageLoadStart(requestId);

      const image = await this.state.imageSource.getImage(requestParams);

      // If a request takes a long time, later requests may have already loaded.
      if (this.state.lastRequestId < requestId) {
        this.getCurrentLayer()?.props.onImageLoad(requestId);
        // Not type safe...
        this.setState({
          image,
          bounds,
          lastRequestParameters: requestParams,
          lastRequestId: requestId
        });
      }
    } catch (error) {
      this.raiseError(error as Error, 'Load image');
      this.getCurrentLayer()?.props.onImageLoadError(requestId, error as Error);
    } finally {
      this.state.loadCounter--;
    }
  }

  // HELPERS

  /** Global counter for issuing unique request ids */
  private getRequestId(): number {
    return this.state._nextRequestId++;
  }

  /** Runs an action in the future, cancels it if the new action is issued before it executes */
  private debounce(fn: Function, ms = 500): void {
    clearTimeout(this.state._timeoutId);
    this.state._timeoutId = setTimeout(() => fn(), ms);
  }
}

1	// deck.gl	1✔
2	// SPDX-License-Identifier: MIT	1✔
3	// Copyright (c) vis.gl contributors	1✔
4		1✔
5	// deck.gl, MIT license	1✔
6	// Attributions:	1✔
7	// Copyright 2022 Foursquare Labs, Inc.	1✔
8		1✔
9	/* eslint-disable camelcase */ // Some WMS parameters are not in camel case	1✔
10	/* global setTimeout, clearTimeout */	1✔
11		1✔
12	import {	1✔
13	Layer,	1✔
14	CompositeLayer,	1✔
15	CompositeLayerProps,	1✔
16	UpdateParameters,	1✔
17	DefaultProps,	1✔
18	Viewport,	1✔
19	COORDINATE_SYSTEM,	1✔
20	_deepEqual as deepEqual	1✔
21	} from '@deck.gl/core';	1✔
22	import {BitmapLayer} from '@deck.gl/layers';	1✔
23	import type {GetImageParameters, ImageSourceMetadata, ImageType} from '@loaders.gl/loader-utils';	1✔
24	import type {ImageSourceType} from '@loaders.gl/wms';	1✔
25	import {ImageSource, createImageSource} from '@loaders.gl/wms';	1✔
26	import {WGS84ToPseudoMercator} from './utils';	1✔
27		1✔
28	/** All props supported by the TileLayer */	1✔
29	export type WMSLayerProps = CompositeLayerProps & _WMSLayerProps;	1✔
30		1✔
31	/** Props added by the TileLayer */	1✔
32	type _WMSLayerProps = {	1✔
33	data: string \| ImageSource;	1✔
34	serviceType?: ImageSourceType \| 'auto';	1✔
35	layers?: string[];	1✔
36	srs?: 'EPSG:4326' \| 'EPSG:3857' \| 'auto';	1✔
37	onMetadataLoad?: (metadata: ImageSourceMetadata) => void;	1✔
38	onMetadataLoadError?: (error: Error) => void;	1✔
39	onImageLoadStart?: (requestId: unknown) => void;	1✔
40	onImageLoad?: (requestId: unknown) => void;	1✔
41	onImageLoadError?: (requestId: unknown, error: Error) => void;	1✔
42	};	1✔
43		1✔
44	const defaultProps: DefaultProps<WMSLayerProps> = {	1✔
45	id: 'imagery-layer',	1✔
46	data: '',	1✔
47	serviceType: 'auto',	1✔
48	srs: 'auto',	1✔
49	layers: {type: 'array', compare: true, value: []},	1✔
50	onMetadataLoad: {type: 'function', value: () => {}},	1✔
51	// eslint-disable-next-line	1✔
52	onMetadataLoadError: {type: 'function', value: console.error},	1✔
53	onImageLoadStart: {type: 'function', value: () => {}},	1✔
54	onImageLoad: {type: 'function', value: () => {}},	1✔
55	onImageLoadError: {	1✔
56	type: 'function',	1✔
57	compare: false,	1✔
58	// eslint-disable-next-line	1✔
59	value: (requestId: unknown, error: Error) => console.error(error, requestId)	1✔
60	}	1✔
61	};	1✔
62		1✔
63	/**	1✔
64	* The layer is used in Hex Tile layer in order to properly discard invisible elements during animation	1✔
65	*/	1✔
66	export class WMSLayer<ExtraPropsT extends {} = {}> extends CompositeLayer<	1✔
67	ExtraPropsT & Required<_WMSLayerProps>	1✔
68	> {	1✔
69	static layerName = 'WMSLayer';	1✔
70	static defaultProps: DefaultProps = defaultProps;	1✔
71		1✔
72	state!: {	1✔
73	imageSource: ImageSource;	1✔
74	image: ImageType;	1✔
75	bounds: [number, number, number, number];	1✔
76	lastRequestParameters: {	1✔
77	bbox: [number, number, number, number];	1✔
78	layers: string[];	1✔
79	srs: 'EPSG:4326' \| 'EPSG:3857';	1✔
80	width: number;	1✔
81	height: number;	1✔
82	};	1✔
83	lastRequestId: number;	1✔
84	_nextRequestId: number;	1✔
85	/** TODO: Change any => setTimeout return type. Different between Node and browser... */	1✔
86	_timeoutId: any;	1✔
87	loadCounter: number;	1✔
88	};	1✔
89		1✔
90	/** Returns true if all async resources are loaded */	1✔
91	get isLoaded(): boolean {	1✔
92	// Track the explicit loading done by this layer	×
93	return this.state?.loadCounter === 0 && super.isLoaded;	×
94	}	×
95		1✔
96	/** Lets deck.gl know that we want viewport change events */	1✔
97	override shouldUpdateState(): boolean {	1✔
98	return true;	×
99	}	×
100		1✔
101	override initializeState(): void {	1✔
102	// intentionally empty, initialization is done in updateState	×
103	this.state._nextRequestId = 0;	×
104	this.state.lastRequestId = -1;	×
105	this.state.loadCounter = 0;	×
106	}	×
107		1✔
108	override updateState({changeFlags, props, oldProps}: UpdateParameters<this>): void {	1✔
109	const {viewport} = this.context;	×
110		×
111	// Check if data source has changed	×
112	if (changeFlags.dataChanged \|\| props.serviceType !== oldProps.serviceType) {	×
113	this.state.imageSource = this._createImageSource(props);	×
114	// eslint-disable-next-line @typescript-eslint/no-floating-promises	×
115	this._loadMetadata();	×
116	this.debounce(() => this.loadImage(viewport, 'image source changed'), 0);	×
117	} else if (!deepEqual(props.layers, oldProps.layers, 1)) {	×
118	this.debounce(() => this.loadImage(viewport, 'layers changed'), 0);	×
119	} else if (changeFlags.viewportChanged) {	×
120	this.debounce(() => this.loadImage(viewport, 'viewport changed'));	×
121	}	×
122	}	×
123		1✔
124	override finalizeState(): void {	1✔
125	// TODO - we could cancel outstanding requests	×
126	}	×
127		1✔
128	override renderLayers(): Layer {	1✔
129	// TODO - which bitmap layer is rendered should depend on the current viewport	×
130	// Currently Studio only uses one viewport	×
131	const {bounds, image, lastRequestParameters} = this.state;	×
132		×
133	return (	×
134	image &&	×
135	new BitmapLayer({	×
136	...this.getSubLayerProps({id: 'bitmap'}),	×
137	_imageCoordinateSystem:	×
138	lastRequestParameters.srs === 'EPSG:4326'	×
139	? COORDINATE_SYSTEM.LNGLAT	×
140	: COORDINATE_SYSTEM.CARTESIAN,	×
141	bounds,	×
142	image	×
143	})	×
144	);	×
145	}	×
146		1✔
147	async getFeatureInfoText(x: number, y: number): Promise<string \| null> {	1✔
148	const {lastRequestParameters} = this.state;	×
149	if (lastRequestParameters) {	×
150	// @ts-expect-error Undocumented method	×
151	const featureInfo = await this.state.imageSource.getFeatureInfoText?.({	×
152	...lastRequestParameters,	×
153	query_layers: lastRequestParameters.layers,	×
154	x,	×
155	y,	×
156	info_format: 'application/vnd.ogc.gml'	×
157	});	×
158	return featureInfo;	×
159	}	×
160	return '';	×
161	}	×
162		1✔
163	_createImageSource(props: WMSLayerProps): ImageSource {	1✔
164	if (props.data instanceof ImageSource) {	×
165	return props.data;	×
166	}	×
167		×
168	if (typeof props.data === 'string') {	×
NEW 169	return createImageSource(props.data, {	×
170	loadOptions: props.loadOptions,	×
171	type: props.serviceType	×
172	});	×
173	}	×
174		×
175	throw new Error('invalid image source in props.data');	×
176	}	×
177		1✔
178	/** Run a getMetadata on the image service */	1✔
179	async _loadMetadata(): Promise<void> {	1✔
UNCOV 180	const {imageSource} = this.state;	×
181	try {	×
182	this.state.loadCounter++;	×
183	const metadata = await imageSource.getMetadata();	×
184		×
185	// If a request takes a long time, it may no longer be expected	×
186	if (this.state.imageSource === imageSource) {	×
187	this.getCurrentLayer()?.props.onMetadataLoad(metadata);	×
188	}	×
189	} catch (error) {	×
190	this.getCurrentLayer()?.props.onMetadataLoadError(error as Error);	×
191	} finally {	×
192	this.state.loadCounter--;	×
193	}	×
194	}	×
195		1✔
196	/** Load an image */	1✔
197	async loadImage(viewport: Viewport, reason: string): Promise<void> {	1✔
UNCOV 198	const {layers, serviceType} = this.props;	×
199		×
200	// TODO - move to ImageSource?	×
201	if (serviceType === 'wms' && layers.length === 0) {	×
202	return;	×
203	}	×
204		×
205	const bounds = viewport.getBounds();	×
206	const {width, height} = viewport;	×
207	const requestId = this.getRequestId();	×
208	let {srs} = this.props;	×
209	if (srs === 'auto') {	×
210	// BitmapLayer only supports LNGLAT or CARTESIAN (Web-Mercator)	×
211	srs = viewport.resolution ? 'EPSG:4326' : 'EPSG:3857';	×
212	}	×
213	const requestParams: GetImageParameters = {	×
214	width,	×
215	height,	×
216	boundingBox: [	×
217	[bounds[0], bounds[1]],	×
218	[bounds[2], bounds[3]]	×
219	],	×
220	layers,	×
221	crs: srs	×
222	};	×
223	if (srs === 'EPSG:3857') {	×
224	const min = WGS84ToPseudoMercator([bounds[0], bounds[1]]);	×
225	const max = WGS84ToPseudoMercator([bounds[2], bounds[3]]);	×
226	requestParams.boundingBox = [min, max];	×
227	}	×
228		×
229	try {	×
230	this.state.loadCounter++;	×
231	this.props.onImageLoadStart(requestId);	×
232		×
233	const image = await this.state.imageSource.getImage(requestParams);	×
234		×
235	// If a request takes a long time, later requests may have already loaded.	×
236	if (this.state.lastRequestId < requestId) {	×
237	this.getCurrentLayer()?.props.onImageLoad(requestId);	×
238	// Not type safe...	×
239	this.setState({	×
240	image,	×
241	bounds,	×
242	lastRequestParameters: requestParams,	×
243	lastRequestId: requestId	×
244	});	×
245	}	×
246	} catch (error) {	×
247	this.raiseError(error as Error, 'Load image');	×
248	this.getCurrentLayer()?.props.onImageLoadError(requestId, error as Error);	×
249	} finally {	×
250	this.state.loadCounter--;	×
251	}	×
252	}	×
253		1✔
254	// HELPERS	1✔
255		1✔
256	/** Global counter for issuing unique request ids */	1✔
257	private getRequestId(): number {	1✔
UNCOV 258	return this.state._nextRequestId++;	×
259	}	×
260		1✔
261	/** Runs an action in the future, cancels it if the new action is issued before it executes */	1✔
262	private debounce(fn: Function, ms = 500): void {	1✔
UNCOV 263	clearTimeout(this.state._timeoutId);	×
264	this.state._timeoutId = setTimeout(() => fn(), ms);	×
265	}	×
266	}	1✔

visgl / deck.gl / 11347302982

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous