@naivemap/mapbox-gl-image-layer

ImageLayer class

npm i @naivemap/mapbox-gl-image-layer proj4

Signature:

export default class ImageLayer implements mapboxgl.CustomLayerInterface

Implements: mapboxgl.CustomLayerInterface

Constructors

Constructor	Description
(constructor)(id: string, option: ImageOption)	Constructs a new instance of the ImageLayer class

Parameters

id (string) The ID of the layer.

option (ImageOption) The option of the image.

Name	Description
option.url (string)	URL that points to an image.
option.projection (string)	Projection with EPSG code that points to the image.
option.coordinates (Array<Array<number>>)	Corners of image specified in longitude, latitude pairs: top left, top right, bottom right, bottom left. ref: coordinates
option.resampling (Optional enum. One of "linear", "nearest". Defaults to "linear")	The resampling/interpolation method to use for overscaling, also known as texture magnification filter. ref: raster-resampling
option.opacity (Optional number between 0 and 1 inclusive. Defaults to 1.	The opacity at which the image will be drawn.
option.crossOrigin (string)	The crossOrigin attribute is a string which specifies the Cross-Origin Resource Sharing (CORS) setting to use when retrieving the image.
option.mask (MaskProperty)	The polygonal mask or multipolygonal mask for the image.

export type ImageOption = {
  url: string
  projection: string
  coordinates: Coordinates
  resampling?: 'linear' | 'nearest'
  opacity?: number
  crossOrigin?: string
  mask?: MaskProperty
}

// top left, top right, bottom right, bottom left.
export type Coordinates = [[number, number], [number, number], [number, number], [number, number]]

export type MaskProperty = {
  type?: 'in' | 'out' // default: in
  data: GeoJSON.Polygon | GeoJSON.MultiPolygon
}

Methods

updateImage

Updates the URL, the projection, the coordinates, the opacity or the resampling of the image.

updateImage(option: {
  url?: string
  projection?: string
  coordinates?: Coordinates
  opacity?: number
  resampling?: 'linear' | 'nearest'
}): this

updateMask

Updates the mask property.

updateMask(mask: Partial<MaskProperty>): this

Example

const layer = new ImageLayer('layer-id', {
  url: '/4326.png',
  projection: 'EPSG:4326',
  resampling: 'nearest',
  coordinates: [
    [105.289838, 32.204171], // top-left
    [110.195632, 32.204171], // top-right
    [110.195632, 28.164713], // bottom-right
    [105.289838, 28.164713], // bottom-left
  ],
})

map.addLayer(layer)