首页 / OpenLayers / API 文档

ImageLayer

先看结论

图片图层。渲染单个 ol.source.Image 实例，整幅图按视图范围拉伸或裁切，不参与瓦片调度。

最后验证 2026-11-03 · OpenLayers 10.3.1 · 更新 2026-10-27 · 引用本文

new ol.layer.Image(options)

构造参数

参数	说明
`source`	图片类数据源，如 `ol.source.ImageWMS`、`ol.source.ImageStatic`
`opacity`	整层透明度，0 到 1
`visible`	是否显示，默认 true
`extent`	图层生效范围，超出部分不渲染
`zIndex`	叠放层级，数字大的在上
`minResolution` / `maxResolution`	可见的分辨率区间
`minZoom` / `maxZoom`	可见的缩放区间
`className`	图层容器的 CSS 类名

常用方法

方法	返回	说明
`getSource()`	ImageSource	取当前数据源
`setSource(source)`	void	替换数据源并重新渲染
`getOpacity()` / `setOpacity(o)`	number / void	读写透明度
`setVisible(v)`	void	显示或隐藏整层
`setZIndex(z)`	void	调整叠放顺序

// 叠加一张带地理范围的静态影像
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);

注意事项

source 必须是图片类数据源；传 ol.source.Vector 或瓦片源不会渲染，应分别使用矢量图层或瓦片图层。
ImageStatic 的 imageExtent 用地图投影坐标填写，用经纬度会让影像落到错误位置或缩成一点。
图层 extent 只限制渲染区域，不会裁剪数据源本身的请求范围。
同一层级内图片是整幅拉伸的，放大到超过原图像素密度会变糊，高精度底图应改用瓦片源。

引用本文

经纬志（2026）。《ImageLayer》。https://www.jingweizhi.com/openlayers/api/image-layer.html（访问日期 2026-11-03）。