ImageLayer

Quick answer

ImageLayer is ol.layer.Image, a layer that renders one ol.source.Image instance as a single stretched or cropped image instead of scheduled tiles. Configure source, opacity, visible, extent, zIndex, minResolution, maxResolution and zoom limits. Use it for ImageWMS or ImageStatic overlays where the server returns one image per view.

Last verified 2026-11-03 · OpenLayers 10.3.1 · Cite this page

new ol.layer.Image( options )

Key points

setSource swaps the image source and triggers a re-render of the layer.
setOpacity, setVisible and setZIndex update appearance and stacking at runtime.
The layer extent limits rendering only and does not crop source requests.

Example

var image = new ol.layer.Image({
  source: new ol.source.ImageStatic({
    url: '/data/plan-2005.png',
    imageExtent: ol.proj.transformExtent(
      [116.28, 39.86, 116.47, 39.99], 'EPSG:4326', 'EPSG:3857'),
    projection: 'EPSG:3857'
  }),
  opacity: 0.65,
  zIndex: 5
});

map.addLayer(image);
image.setOpacity(0.4);

Notes

Passing ol.source.Vector or a tile source renders nothing; use a vector or tile layer instead.
ImageStatic imageExtent must use map projection coordinates or the image lands misplaced or collapses to a point.

Runnable examples Chinese original All API references

English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.

Cite this page

Atlaslog (2026). ImageLayer. https://www.jingweizhi.com/en/openlayers/api/image-layer.html (accessed 2026-11-03).