Javascript “打开图层3”功能“使用画布填充”未固定到该功能

我一直在使用

openlayers 3

，并使用

canvasPattern

创建了一个填充。填充是有效的，问题是它没有按预期工作

我希望填充会随着它所填充的几何体一起移动，但正如您在本例中所看到的：

如果移动贴图，您会注意到填充是绝对定位的，而不是相对于填充的几何体

• 我用错了填充物吗
• 有人知道如何使填充与几何体一起移动吗

---

提前感谢您的帮助

就我所见，在将填充图案原点与矢量层一起使用时，无法使其跟随贴图或几何体平移或移动。Openlayers只使用模式作为填充，而不进行转换，因此它将始终相对于画布静态定位

不过，本文介绍了一个示例。它还没有在示例页面上直播，但可以在上查看

这与您的示例之间的区别在于它使用了一个源（使其成为图像层）。这样做会使它起作用，例如：

为矢量数据使用图像层可能不适合所有情况，因此添加对转换填充图案的支持似乎是一种很好的公关材料

编辑： 经过进一步测试，似乎

ImageVector

解决方案不是一个保证的解决方案。当我平移时，模式通常会跟随，但有时会以不可预测的方式移动到不同的偏移。我认为这是因为渲染的源画布是如何剪裁的：

---

要修复圆中的箭头吗？有两个问题，1）图案只创建一次，2）图案是根据画布的宽度和高度而不是几何体的边界绘制的。您应该基于几何图形创建图案，并且只要几何图形发生更改，就应该重新创建图案。3.19.1（）

var imageVectorLayer = new ol.layer.Image({
    source: new ol.source.ImageVector({
      source: vectorSource,
    style: styleFunction
  }),
})