openlayers 平铺填充背景

通常遇到openlayers填充的材质背景需要平铺某个图片时，实现效果如图：

image.png

实现代码如下：

HTML代码

<div id="olMap"></div>

JS代码

// 省略引入ol步骤

// 矢量多边形
const polygon = new ol.gemo.Polygon([[[111.823626, 23.490994], [111.823626, 23.590994], [111.923626, 23.590994], [111.923626, 23.490994]]]);
// 坐标转换
polygon .applyTransform(getTransform('EPSG:4326', 'EPSG:4326'));
// 创建Feature
const feature = new ol.feature(polygon);
// 关键代码
const repeatCanvas = document.createElement('canvas');
const repeatCtx = bm.getContext('2d');
const img = new Image();
img.src = '平铺图片.jpg';  // 平铺图片地址
img.onload = () => {
  feature.setStyle(new ol.Style({
              fill: new OLStyleFill({
                color: repeatCtx.createPattern(img, 'repeat'),
              }),
              stroke: new OLStyleStroke({
                color: '#24E38B',
                width: 2,
              }),
  }));
};
// 创建地图
const map = new ol.Map({
  target: 'olMap',
  layers: [
    new ol.layer.Vector({
      source: new ol.layer.Vector({
      features: [feature],
    }),
    view: new ol.View({
      projection: 'EPSG:4326',
      zoom: 12,
      center: [111.9, 23.51]
    }),
});