@naivemap/mapbox-gl-image-layer v0.5.0

ImageLayer class

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

Signature:

export default class ImageLayer implements mapboxgl.CustomLayerInterface

Implements: mapboxgl.CustomLayerInterface

Constructors

Parameters

id (string) The ID of the layer.

option (ImageOption) The option of 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)