Question

我正在开发一种旋转静态图像层的工具，而我目前在移动设备上面临着一个问题。

静态图像图层必须围绕特定点旋转。我使用precompose和postcompose钩子来改变画布并进行旋转。它在桌面上运行良好，但我不了解移动设备上的情况（Android Chrome或FF）。

jsFiddle：https://jsfiddle.net/wuty2m9v/7/

if (a == 3) {}

在桌面上，图像围绕该点正确旋转。拖动地图：点和图像跟随地图。在移动设备上，图像不能在点周围正确旋转，它是围绕画布原点制作的，画布翻译看起来不太好。拖动地图以观察混乱：）

Answer 1

进行变换时，您需要考虑像素比率。您从map.getPixelFromCoordinate获得的像素是css像素。要获取画布像素，您需要将它们乘以ol.has.DEVICE_PIXEL_RATIO：

ctx.translate(pixel[0] * ol.has.DEVICE_PIXEL_RATIO, pixel[1] * ol.has.DEVICE_PIXEL_RATIO);

和

ctx.translate(-pixel[0] * ol.has.DEVICE_PIXEL_RATIO, -pixel[1] * ol.has.DEVICE_PIXEL_RATIO);

有关JSFiddle的更新版本，请参阅https://jsfiddle.net/wuty2m9v/8/。

Answer 2

如果您对在OL3地图上绘制图像感兴趣，请查看我在GitHub上发布的ol.source.GeoImage：http://viglino.github.io/ol3-ext/examples/map.geoimage.html

举例：https://jsfiddle.net/Viglino/cqL17a3y/

/* Init image layer */
const imgLayer = new ol.layer.Image({
  opacity: 0.7,
  source: new ol.source.GeoImage({
        url: "https://pbs.twimg.com/profile_images/685220121598660608/2uZUdcS1.jpg",
        imageCenter: center,
            imageScale: [1,1],
            imageRotate: rotation*Math.PI/180,
            projection: 'EPSG:3857',
  })
})

此致

通过compose钩子进行图层旋转的问题

2 个答案: