在 OpenLayers 中，如何在渲染后函数中考虑旋转？

Question

我正在尝试画一个“由内而外”的圆圈。也就是说，用除圆形区域之外的颜色填充画布。我拿了这个例子并稍微修改了一下； 我能够做我想做的事情，并且它工作得几乎完美（拖动时，新的可见区域不会立即渲染并填充顶部的颜色。）我刚刚意识到我的尝试永远不会在我的身上看起来正确电话，这让我更困惑！

我尝试在渲染后函数中编写类似的逻辑：

tileLayer.on('postrender', function (event) {
  const ctx = event.context;
  const [x, y] = map.getPixelFromCoordinate(circleOrigin);
  const radius = 50 / view.getResolution();

  ctx.beginPath();
  ctx.arc(x, y, radius, 0, 2 * Math.PI, true);
  ctx.rect(0, 0, ...map.getSize());
  ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
  ctx.fill();
});

这解决了及时渲染彩色区域的问题，但是当我旋转它时（这可以在桌面上使用

Alt

+

Shift

+

Click & drag

来完成），它不会从原点/旋转我进行会期待。

为什么会出现这种情况？我一直在试图找出渲染后函数与圆的样式函数有何不同。我想画布中存在我没有考虑到的平移/旋转偏移。如果是这样，那是什么？我忽略了什么？

Answer 1

您需要使用

getRenderPixel

将地图像素转换为上下文像素，示例见 https://openlayers.org/en/latest/examples/layer-spy.html
https://openlayers.org/en/latest/examples/magnify.html
https://openlayers.org/en/latest/examples/layer-swipe.html

整个地图最简单的解决方案

ctx.rect

是使用画布大小

tileLayer.on('postrender', function (event) {
  const ctx = event.context;
  const [x, y] = getRenderPixel(
    event,
    map.getPixelFromCoordinate(circleOrigin)
  );
  const radius = circleRadius / view.getResolution();

  ctx.beginPath();
  ctx.arc(x, y, radius, 0, 2 * Math.PI, true);
  ctx.rect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
  ctx.fill();
});

https://codesandbox.io/s/inside-out-circle-forked-w8r5j8?file=/main.js