Javascript 在openlayers中，如何从多边形中的url拟合（拉伸）图片？

我尝试在多边形中添加图片 我找到了这个答案

但是，我希望在多边形中拟合（拉伸）图片（因为我的目标是添加可以稍后调整多边形大小的功能） 我试过了

但它不起作用。

---

有什么方法可以实现这一点吗？

在OpenLayers 3和OpenLayers 4中，您可以创建一个图案，以适合功能将占用的大小（类似于适合中宽度的渐变）。这会随着分辨率的变化而变化，并且需要一个样式函数，该函数必须是同步的，因此应该预加载图像。在以后的版本中，它将更加复杂，因为您必须确定OpenLayers将使用的512像素原点，而不是特征的范围，并相应地填充或裁剪图案

带有画布渐变或画布图案的造型特征
#地图{
背景：#ccc；
}
var flagStyle=功能（特征、分辨率）{
var模式；
var img=feature.get（'flag'）；
如果（img）{
var cnv1=document.createElement（'canvas'）；
var ctx1=cnv1.getContext（'2d'）；
//图案位于画布像素空间中，因此我们根据
//渲染器的像素比率
var pixelRatio=ol.has.DEVICE\u PIXEL\u RATIO；
var extent=feature.getGeometry（）.getExtent（）；
var width=ol.extent.getWidth（extent）/分辨率*pixelRatio；
var height=ol.extent.getHeight（extent）/分辨率*pixelRatio；
如果（宽度>=1和高度>=1）{
cnv1.width=宽度；
cnv1.height=高度；
ctx1.绘图图像（img，2，12，60，40，0，0，宽度，高度）；
var cnv2=document.createElement（'canvas'）；
var ctx2=cnv2.getContext（'2d'）；
pattern=ctx2.createPattern（cnv1，“无重复”）；
}
}
返回新的ol.style.style({
填充：新的ol.style.fill({
颜色：图案
})
});
};
//创建一个向量层，利用上面的样式函数…
var vectorLayer=新ol.layer.Vector({
来源：新ol.source.Vector({
网址：'https://openlayersbook.github.io/openlayers_book_samples/assets/data/countries.geojson',
格式：new ol.format.GeoJSON（）
}),
样式：flagStyle
});
'addfeature'函数（事件）上的vectorLayer.getSource（）{
var-feature=event.feature；
var img=新图像（）；
img.onload=函数（）{
特征集（'flag'，img）；
}
img.src=https://www.countryflags.io/' +
feature.get（'iso_a2'）.toLowerCase（）+'/flat/64.png'；
});
var map=新ol.map({
图层：[
矢量层
],
目标：“地图”，
视图：新ol.view({
中心：Lonlat的其他项目（[7,52]），
缩放：3
})
});

非常感谢您抽出时间。当我们缩放地图时，画布内的图像似乎也会缩放（虽然它在完成渲染时会很合适，也许我们需要更新whileinteracting选项）。除此之外，我还找到了另一个解决方案，但它需要使用ol ext，这个问题也可以在画布渐变示例中看到，渐变模式在缩放完成之前不会调整到新的缩放。ol ext方法类似于OpenLayers Image Static，例如，“这个问题也可以在画布渐变示例中看到”是的，我可以看到，我认为您的答案处理得更好。“OLExt方法类似于OpenLayers图像静态”是的，我意识到，我也尝试了图像静态。但是，我选择ol ext方法，因为它支持移动、调整大小和缩放图像，这是我的新功能所需要的。抱歉，我测试并更新了交互不正确的图像，在缩放时应该使用updateWhileAnimating来调整新的缩放

var vectorLayer=new ol.layer.Vector（{…，updateWhileAnimating:true}）
var pattern = ctx.createPattern(img, 'no-repeat');