通过 compose hooks 层旋转问题

Question

我正在开发一种工具来旋转静态图像层，但我目前在移动设备上遇到问题。

静态图像层必须围绕特定点旋转。我使用 precompose 和 postcompose 钩子来改变 canvas 并进行旋转。它在桌面上运行良好，但我不明白移动设备上发生了什么（Android Chrome 或 FF）。

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

/* Vars */
const center = ol.proj.transform([1.44, 43.603], "EPSG:4326", "EPSG:3857")
const imgSize = [400, 267]
const imgExtent = [center[0], center[1], center[0] + imgSize[0], center[1] + imgSize[1]]
let rotation = 45

/* Init map */
const map = new ol.Map({
    target: 'map',
    view: new ol.View({
    zoom: 16,
    center,
  }),
  layers: [
    // Map tiles layer
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    // Feature layer
    new ol.layer.Vector({
        source: new ol.source.Vector({
        features: [
          new ol.Feature({
            geometry: new ol.geom.Point(center),
          }),
        ],
      }),
    }),
  ],
})

/* Init image layer */
const imgLayer = new ol.layer.Image({
  opacity: 0.7,
  source: new ol.source.ImageStatic({
    url: "https://pbs.twimg.com/profile_images/685220121598660608/2uZUdcS1.jpg",
    imageExtent: imgExtent,
  })
})
imgLayer.on("precompose", evt => {
  const pixel = map.getPixelFromCoordinate(center)
  const ctx = evt.context
  ctx.save()
  ctx.translate(pixel[0], pixel[1])
  ctx.rotate(rotation * Math.PI / 180)
  ctx.translate(-pixel[0], -pixel[1])
})
imgLayer.on("postcompose", evt => {
  const ctx = evt.context
  ctx.restore()
})
map.addLayer(imgLayer)

在桌面上，图像围绕该点正确旋转。拖动地图：点和图像跟随地图。在移动设备上，图片没有围绕该点正确旋转，它是围绕 canvas 原点制作的，canvas 翻译看起来不太好。拖图看乱:)

Answer 1

您在进行变换时需要考虑像素比率。您从 map.getPixelFromCoordinate 获得的像素是 css 像素。要获得 canvas 像素，您需要将它们乘以 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 hooks 层旋转问题

Issue with layer rotation via compose hooks

javascript

openlayers-3