openlayers旋转图片

主要思想：通过ol-ext实现图片旋转功能

一、计算多边形中心的坐标

//计算polygon中心点坐标 
const computedCenter = (coord: number[][][]) => {   
    let extent = boundingExtent(coord[0]); 
    //得到多边形外接矩形坐标--[minX,minY,maxX,maxY]   
    let center = getCenter(extent);   
    return center; 
}

二、计算图片旋转角度

//计算图片旋转角度--旋转线段（顺时针）--first为固定点，second为旋转后的点 
const setAngle = (first: number[], second: number[]) => {   
    let y = second[1] - first[1];   
    let x = second[0] - first[0];   
    let radAngle = Math.atan2(y, x);   
    if (x > 0) {     
        radAngle = -radAngle;   
    } else {     
        radAngle = Math.PI - radAngle;   
    }   
    return radAngle 
}

三、地图上显示图片

import GeoImageLayer from 'ol-ext/layer/GeoImage' 
import GeoImageSource from 'ol-ext/source/GeoImage' 
const addGeoImage = (coord: number[][][],imgUrl:string) => {   
    let centerPoint = computedCenter(coord);   
    let rotate = setAngle(coord[0][1], coord[0][0]);   
    let geoImg = new GeoImageLayer({     
        name: "geoImage",     
        opacity: 1,     
        source: new GeoImageSource({         
        url: imgUrl,         
        imageRotate: rotate,         
        imageScale: [1500,1900],         
        imageCenter: olProj.fromLonLat(centerPoint)  
        }),     
        zIndex: 2   
    });   
    map.addLayer(geoImg) 
}

四、实现效果

项目地址：github.com/DLFouge/vue…

欢迎指正与star