经纬志
首页 / OpenLayers / 使用示例

图层叠放次序

三个交叉叠放的面图层,用下拉框改 zIndex,遮挡关系立即变化。

OpenLayers 10.3.1 · 对应官方 layer-z-index.html · 更新 2026-10-28
源码与运行效果
运行效果

说明

图层顺序由 zIndex 决定,数值大的画在上面。示例三个面图层交叉叠放,用下拉框分别设置 zIndex,遮挡关系立即改变。

不设 zIndex 时按添加顺序绘制;设置后按数值排序,相同数值仍按添加顺序。

操作结果
A 设为 3A 区盖住其他两个
B 设为最大B 区居中偏上
三者同值回到添加顺序

透明面叠放时颜色会叠加,看起来像第三种颜色,调顺序前先确认不是透明度造成的错觉。