OpenLayers水平镜像和垂直镜像

news2024/11/25 16:41:24

1.前言

最近项目中用到了要素和图片的水平镜像和垂直镜像功能。这些功能说难不难，说简单也不简单，就是稍微费点劲，这里记录一下。

2.概念介绍

有很多人把镜像和旋转混淆，但镜像的图形是不可能通过旋转得到的，我们这里来看一下二者的区别,直接上图。

2.1 旋转

在这里插入图片描述

2.2 水平镜像

在这里插入图片描述

2.3 垂直镜像

在这里插入图片描述

3.要素的镜像

3.1 镜像轴始终是水平的或者垂直的

明白了原理之后，那么要素的镜像就方便多了。不论是水平镜像还是垂直镜像，首先图形的坐标我们是知道的，然后以某一个位置为锚去计算就行了。比如，如果是水平镜像，那么只要计算出来新的纬度值就可以了，经度值不变。相应的，如果是垂直镜像，那么只要计算出来新的经度值，纬度值不变。值得一提的是，如果我们以图形的中心为锚去计算，那么图形看起来就像在原始位置做了一个翻转一样。
这种情况下的代码太简单了，所以我们直接略过代码，下面开始上一点难度，考虑一下旋转轴的角度。

3.2 镜像轴是任意角度

什么叫镜像轴是任意角度？我们还是以图片来展示一下：
在这里插入图片描述
想一想这种情况下的垂直镜像应该怎么实现？这种情况下就不能再向上面一样去计算了，因为要考虑角度。
所以我们的做法是，首先将获取到这个镜像轴的角度，然后将图形逆时针旋转到0度，做垂直镜像，然后将镜像后的图形，再顺时针旋转这个角度，就可以了。水平镜像同理。
当然了，要实现这种带角度的镜像，还可以通过矩阵运算，但是我觉得这种方式比较简单易懂，读者可以自行选择实现方式。
在这里插入图片描述

getMirror(feature){
    // 给定的角度（逆时针为正，顺时针为负，角度为度数而不是弧度）
    let angle = 30; // 示例角度
    // 将角度转换为弧度，因为OpenLayers的旋转函数需要弧度作为单位
    let angleInRadians = angle * Math.PI / 180;
    // 获取要素的几何对象
    let geometry = feature.getGeometry();
    // 获取要素的中心点
    let center = extent.getCenter(geometry.getExtent());
    // 步骤1: 逆时针旋转要素（传入正值）
    geometry.rotate(angleInRadians, center);
    // 水平镜像
    // geometry.scale(1, -1, center);
    //垂直镜像
    geometry.scale(-1, 1, center);
    // 步骤3: 顺时针旋转要素（传入负值）
    geometry.rotate(-angleInRadians, center);
    return feature
},

4.图片的镜像

图片的镜像需要借助canvas来实现，我们来看下效果
在这里插入图片描述

let point = new Feature({
  geometry:new Point([116,39])
})
let image = new Image()
image.src = '300.jpg'
let obj={
  width:375,
  height:300,
  image:image,
  angle:0,
  horizontalMirroring:true,
  // verticalMirroring:true,
}
point.setStyle(this.getPicMirrorStyle(obj));
getPicMirrorStyle(obj){
  const canvas = document.createElement('canvas');
  canvas.width = obj.width;
  canvas.height = obj.height;
  const con = canvas.getContext('2d');
  //水平镜像
  if(obj.horizontalMirroring){
    con.translate(0,obj.height);
    con.scale(1,-1);
  }
  //垂直镜像
  if(obj.verticalMirroring){
    con.translate(obj.width,0);
    con.scale(-1,1);
  }
  // 图像存在延迟加载的问题，不能直接画
  obj.image.onload = () => {
    con.drawImage(obj.image, 0, 0, obj.width, obj.height);
  };
  return new Style({
    image:new Icon({
      img:canvas,
      // src:"300.jpg",
      crossOrigin:'anonymous',
      imgSize:[obj.width,obj.height],
      rotation:(obj.angle * Math.PI) / 180,
      scale:0.5
    })
  })
},