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)