OpenLayers中缩放地图时如何让背景图案随地图同步缩放？

问题说明 #

在地图图层绘制矩形要素，需要将图片图案作为要素背景，且无论地图缩放级别如何，图案显示效果始终一致（即图案随要素同步缩放）。当前代码可显示背景，但缩放时图案无法同步适配。

现有代码 #

要素样式设置 #

const imageData = "..."; // 图片的base64编码

const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
const img = new Image();
img.onload = function () {
  var pattern = context.createPattern(img, 'repeat');
  const style = new Style({
    fill: new Fill({
      color: pattern,
    }),
  });
  feature.setStyle(style);
};
img.src = imageData;

矢量图层配置 #

const vectorLayer = new VectorLayer({
  source: new VectorSource({
    features: features,
  }),
  updateWhileAnimating: true,
});

尝试的缩放监听（未生效） #

map.getView().on('change:resolution', function() {
    const resolution = this.getResolution();
    ....
    pattern.setTransform(new DOMMatrix().scale(1 / resolution, 1 / resolution)); // 不确定正确缩放逻辑
});

解决方案 #

核心思路是根据地图当前分辨率，动态调整图案的缩放比例，使其与要素的屏幕显示尺寸匹配，具体实现如下：

1. 保留图案与原始图片的全局引用，方便后续更新变换
2. 基于分辨率计算正确的缩放因子，确保图案的地理尺寸固定
3. 分辨率变化时更新图案变换，并重新设置要素样式触发重绘

修改后的完整代码：

const imageData = "..."; // 图片的base64编码
let pattern;
let originalImg;

const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
const img = new Image();
img.onload = function () {
  originalImg = img;
  pattern = context.createPattern(img, 'repeat');
  // 初始化样式
  updateFeatureStyle(map.getView().getResolution());
};
img.src = imageData;

// 定义样式更新函数
function updateFeatureStyle(resolution) {
  // desiredGeoSize：图案在地图上固定占据的地理宽度（单位与地图投影一致，比如米/度），可按需调整
  const desiredGeoSize = 100; 
  // 计算缩放因子：让图案的地理尺寸固定，适配当前分辨率
  const scaleFactor = resolution * desiredGeoSize / originalImg.width;

  // 更新图案变换矩阵
  pattern.setTransform(new DOMMatrix().scale(scaleFactor, scaleFactor));

  // 重新创建样式并设置给要素
  const style = new Style({
    fill: new Fill({
      color: pattern,
    }),
  });
  feature.setStyle(style);
}

// 监听分辨率变化，实时更新样式
map.getView().on('change:resolution', function() {
  updateFeatureStyle(this.getResolution());
});

关键说明 #

• desiredGeoSize：需根据实际需求设置，代表图案在地图上要固定占据的地理宽度，确保图案显示大小符合预期。
• 缩放因子逻辑：通过分辨率（每个像素对应的地理单位）、固定地理尺寸、原始图片像素宽度的计算，保证图案的地理范围不变，从而在缩放时屏幕显示比例一致。
• 重绘触发：每次更新图案变换后必须重新创建样式并赋值给要素，否则OpenLayers不会触发图层重绘。

补充优化 #

如果有多个要素需要适配，可将更新逻辑封装为通用函数批量处理；图层已开启的updateWhileAnimating属性可保证缩放动画过程中图案适配更平滑，无需修改。

内容的提问来源于stack exchange，提问作者Jaa-c