@nextgis/ngw-map
Version:
250 lines (245 loc) • 10.6 kB
TypeScript
import { getIcon } from '@nextgis/icons';
import NgwConnector, { Credentials, FeatureItem, ResourceDefinition } from '@nextgis/ngw-connector';
import { MapOptions, RuntimeParams, WebMapEvents, WebMap, MapControls, ControlPosition, LayerAdapter, LayerDef, FitOptions, MapClickEvent } from '@nextgis/webmap';
export * from '@nextgis/webmap';
import { EventEmitter } from 'events';
import { NgwLayerOptions, CompanyLogoOptions, ResourceAdapter, NgwIdentify, IdentifyItem, FetchNgwItemOptions, FetchNgwItemsOptions, NgwFeatureRequestOptions, NgwFeatureItemResponse } from '@nextgis/ngw-kit';
import { FeatureProperties, JsonMap } from '@nextgis/utils';
import { Geometry, Feature, FeatureCollection } from 'geojson';
import StrictEventEmitter from 'strict-event-emitter-types';
type NgwResourceDefinition = number | [number, string] | NgwLayerOptions;
interface NgwMapOptions<M = any, C = any> extends MapOptions<M, C> {
/**
* Url of NGW server like this https://demo.nextgis.com
*/
baseUrl?: string;
connector?: NgwConnector;
/**
* User credentials for authorization in NGW.
* Provides the ability to display protected resources
*/
auth?: Credentials;
/**
* Indicates whether to include cookies in cross-site Access-Control requests.
* Note that setting this property has no effect on same-origin requests.
*/
withCredentials?: boolean;
/**
* Id number of webmap resource from NextGIS Web.
* If specified through an array,
* the first element will be the webmapId from NGW,
* and the second will be the name for identification in the application.
*
* @example
* ```javascript
* const ngwMap = new NgwMap({webmapId: [3985, 'my-webmap']});
* ngwMap.hideLayer('my-webmap');
* ```
*/
webmapId?: NgwResourceDefinition;
/**
* Id number of resource from [QMS](https://qms.nextgis.com/).
* If specified through an array,
* the first element will be the resource identifier,
* and the second will be the name for identification in the application.
*
* @example
* ```javascript
* const ngwMap = new NgwMap({qmsId: [465, 'qms-basemap']});
* ngwMap.hideLayer('qms-basemap');
* ```
*/
qmsId?: number | [number, string];
/**
* List of NGW resources to be displayed on the map.
*
* The resources list may include:
*
* - number - resource id; // also for resource
* - string - resource keyname; // also for resource
* - object - configuration of the layer to be added
* with the one required parameter `resource` (the comment "also for resource" above refers to it)
*
* @example
* ```javascript
* NgwMap.create({
* baseUrl: "https://demo.nextgis.com",
* target: "map",
* resources: [
* // Basemap resource
* 1665,
* // Digital Elevation Model (DEM)-style
* 4117,
* // Hillshade-style
* { resource: 4115, adapter: "TILE", opacity: 0.3 },
* // Elevation contours-style
* 'contours-style',
* // Vector from Order boundary-style
* {
* resource: 4111,
* fit: true,
* adapter: "GEOJSON",
* adapterOptions: { paint: { color: "red", fill: false, weight: 4 } },
* },
* ],
* });
* ```
*/
resources?: NgwResourceDefinition[];
/**
* Shortcut to add OSM baselayer.
*/
osm?: boolean;
whitlabel?: boolean;
companyLogoOptions?: CompanyLogoOptions;
pixelRadius?: number;
runtimeParams?: RuntimeParams[];
setViewDelay?: number;
highlightIdentification?: boolean | number;
}
interface NgwMapEvents extends WebMapEvents {
'ngw-map:create': NgwMap;
'ngw:select': NgwIdentifyEvent | null;
'ngw:preselect': void;
}
interface NgwLayersMem {
layer: ResourceAdapter;
resourceId: number;
}
interface NgwLayers {
[layerId: string]: NgwLayersMem;
}
type NgwIdentifyEvent<F extends FeatureProperties = FeatureProperties, G extends Geometry = Geometry> = NgwIdentify & {
getIdentifyItems: () => IdentifyItem<F, G>[];
};
type PromiseGroup = 'select' | 'identify';
/**
* Base class containing the logic of interaction WebMap with NextGIS services.
*
* @example
* ```javascript
* import { NgwMap } from '@nextgis/ngw-map';
* import MapAdapter from '@nextgis/leaflet-map-adapter';
* // styles are not included in the leaflet-map-adapter
* import 'leaflet/dist/leaflet.css';
*
* const ngwMap = new NgwMap({
* mapAdapter: new MapAdapter(),
* target: 'map',
* qmsId: 448,
* baseUrl: 'https://demo.nextgis.com',
* webmapId: 3985
* });
* ```
*/
declare class NgwMap<M = unknown, L = unknown, C extends object = any, O extends NgwMapOptions<M, C> = NgwMapOptions<M, C>> extends WebMap<M, L, C, NgwMapEvents, O> {
static getIcon: typeof getIcon;
readonly emitter: StrictEventEmitter<EventEmitter, NgwMapEvents>;
connector: NgwConnector;
protected _ngwLayers: NgwLayers;
private $$selectFromNgwRaster?;
private $$selectFromNgwVector?;
private _promises;
constructor(options: O);
/**
* Organized addition to the map design and controls elements,
* calling `control.onAdd(this.webMap.mapAdapter)`
* @param control - object with onAdd and onRemove methods
* or a string value indicating the name of the control installed in the map adapter
* @param position - position relative to the map angles
* @param options - initialization parameters if the control is set as a string value
*
* @example
* ```javascript
* ngwMap.addControl(new CustomControl(), 'bottom-left');
* ngwMap.addControl('ZOOM', 'top-right')
* ```
*/
addControl<K extends keyof MapControls>(controlDef: K | C, position: ControlPosition, options?: MapControls[K]): Promise<any>;
/**
* Add any (style, vector, webmap) NGW layer by resource definition.
* @param options - set layer identification parameters and render method.
*
* @example
* ```javascript
* // Add raster layer resourceId is the style of 4004 layer
* ngwMap.addNgwLayer({ resource: 4005 });
* // Add vector data from layer GEOJSON source
* ngwMap.addNgwLayer({
* resource: 4038,
* adapter: 'GEOJSON',
* adapterOptions: { paint: { color: 'red' } }
* });
* ```
*/
addNgwLayer(options: NgwLayerOptions): Promise<ResourceAdapter | undefined>;
/**
* Pans and zooms the map to the initial position specified in the options
*/
fit(): void;
fetchNgwLayerItem<G extends Geometry = Geometry, P extends FeatureProperties = FeatureProperties>(options: Omit<FetchNgwItemOptions<P>, 'connector'>): Promise<FeatureItem>;
fetchNgwLayerItems<F extends FeatureProperties = FeatureProperties, G extends Geometry = Geometry>(options: Omit<FetchNgwItemsOptions<F>, 'connector'>): Promise<FeatureItem<F, G>[]>;
fetchNgwLayerFeature<G extends Geometry = Geometry, P extends FeatureProperties = FeatureProperties>(options: Omit<FetchNgwItemOptions<P>, 'connector'>): Promise<Feature<G, P>>;
fetchNgwLayerFeatures<G extends Geometry | null = Geometry, P extends FeatureProperties = FeatureProperties>(options: Omit<FetchNgwItemsOptions<P>, 'connector'>): Promise<FeatureCollection<G, P>>;
fetchIdentifyItem<G extends Geometry = Geometry, P extends FeatureProperties = FeatureProperties>(identify: NgwIdentify, requestOptions?: NgwFeatureRequestOptions): Promise<NgwFeatureItemResponse<P, G> | undefined>;
fetchIdentifyGeoJson(identify: NgwIdentify, { multiple, signal }?: {
multiple?: boolean;
signal?: AbortSignal;
}): Promise<Feature | undefined>;
/**
* @deprecated use {@link fetchIdentifyGeoJson} instead
*/
getIdentifyGeoJson(identify: NgwIdentify, multiple?: boolean): Promise<Feature | undefined>;
getNgwLayers(): Promise<NgwLayers>;
getNgwLayerByResourceId(id: number): Promise<LayerAdapter | undefined>;
/**
* Move map to layer. If the layer is NGW resource, extent will be received from the server
*
* @example
* ```javascript
* const ngwLayer = ngwMap.addNgwLayer({ id: 'ngw_layer_name', resource: 4005 });
* ngwMap.fitLayer(ngwLayer);
* ngwMap.fitLayer('ngw_layer_name');
* ```
*/
fitLayer(layerDef: LayerDef | number, options?: FitOptions): Promise<void>;
fitResource(resource: ResourceDefinition, options?: FitOptions): Promise<void>;
/** @deprecated use {@link fitLayer} instead */
zoomToLayer(layerDef: string | ResourceAdapter): Promise<void>;
onLoad(event?: keyof NgwMapEvents): Promise<this>;
removeLayer(layerDef: LayerDef): void;
enableSelection(): void;
disableSelection(): void;
/**
* @deprecated use {@link fetchNgwLayerItem} instead
*/
getNgwLayerItem<G extends Geometry = Geometry, P extends FeatureProperties = FeatureProperties>(options: Omit<FetchNgwItemOptions<P>, 'connector'>): Promise<FeatureItem>;
/**
* @deprecated use {@link fetchNgwLayerItems} instead
*/
getNgwLayerItems<F extends FeatureProperties = FeatureProperties, G extends Geometry = Geometry>(options: Omit<FetchNgwItemsOptions<F>, 'connector'>): Promise<FeatureItem<F, G>[]>;
/**
* @deprecated use {@link fetchNgwLayerFeature} instead
*/
getNgwLayerFeature<G extends Geometry = Geometry, P extends FeatureProperties = FeatureProperties>(options: Omit<FetchNgwItemOptions<P>, 'connector'>): Promise<Feature<G, P>>;
/**
* @deprecated use {@link fetchNgwLayerFeatures} instead
*/
getNgwLayerFeatures<G extends Geometry | null = Geometry, P extends JsonMap = JsonMap>(options: FetchNgwItemsOptions<P>): Promise<FeatureCollection<G, P>>;
/** @deprecated use {@link cancelPromises} instead */
cancelPromise(...args: PromiseGroup[]): void;
cancelPromises(...args: PromiseGroup[]): void;
selectFromNgwRaster(ev: MapClickEvent): Promise<NgwIdentifyEvent | undefined>;
private _addPromise;
private _isFitFromResource;
private _createWebMap;
private _addOsmBaseLayer;
private _addQmsBaseLayer;
private _selectFromNgwVector;
private _prepareToIdentify;
private _getSelectListenersCount;
private _whiteLabel;
}
declare function createNgwMap(options: NgwMapOptions): Promise<NgwMap>;
export { NgwMap, createNgwMap };
export type { NgwIdentifyEvent, NgwLayers, NgwLayersMem, NgwMapEvents, NgwMapOptions, NgwResourceDefinition };