openlayers 5映射（图像、标记）转换rotateX

是否可以旋转度Openlayers贴图：图像和标记

---

想法示例：

ol.style.Icon

和

ol.style.RegularShape

具有

旋转

选项和

设置旋转（）方法。角度必须以弧度（degrees*Math.PI/180）为单位指定。下面是一个线条角度后的图标示例


var blue=new ol.style.style({
笔划：新的ol风格笔划({
宽度：4，
颜色：“蓝色”
})
});
var red=新的ol.style.style({
笔划：新的ol风格笔划({
宽度：4，
颜色：“红色”
})
});
变量图标=新的ol.style.style({
图片：新ol.style.Icon({
src:'https://cdn1.iconfinder.com/data/icons/basic-ui-elements-color-round/3/19-32.png',
})
});
变量样式=功能（特性）{
var coords=feature.getGeometry（）.getCoordinates（）.slice（-2）；
icon.setGeometry（新的ol.geom.Point（坐标[1]）；
icon.getImage（）.setRotation（Math.atan2（coords[1][0]-coords[0][0]，coords[1][1]-coords[0][1]）；
返回[红色，图标]；
}
var raster=新建ol.layer.Tile({
来源：new ol.source.OSM（）
});
var vector=新的ol.layer.vector({
source:new ol.source.Vector（），
款式：蓝色
});
var map=新ol.map({
图层：[光栅，矢量]，
目标：“地图”，
视图：新建ol.view（）
});
var xhr=new XMLHttpRequest（）；
xhr.open（'GET'，'https://raw.githubusercontent.com/IvanSanchez/Leaflet.Polyline.SnakeAnim/master/route.js');
xhr.onload=函数（）{
//读取路线坐标
评估（xhr.responseText）；
//改变路线
var geom=new ol.geom.LineString（route.reverse（））；
//将Lat/Lon更改为Lon/Lat
geom.applyTransform（函数（c）{return c.reverse（）；}）；
geom.transform（'EPSG:4326'，map.getView（）.getProjection（））；
vector.getSource（）.addFeature（新的ol.Feature（geom））；
fit（geom，{size:map.getView（）}）；
var snake=新的ol.Feature（）；
蛇型；
vector.getSource（）.addFeature（snake）；
动画_线（snake，geom，30000）；
}
xhr.send（）；
函数设置线动画（特征、线串、持续时间）{
var length=linestring.getLength（）；
显示的变量长度=0；
var coords=linestring.getCoordinates（）；
var coords_显示=[coords[0]，coords[0]；
显示var geom_=新的ol.geom.LineString（显示坐标）；
特征。设置几何图形（显示几何图形）；
var coordcount=1；
var start=new Date（）.getTime（）；
var listenerKey=map.on（'postcompose'，动画）；
函数animate（）{
var appead=new Date（）.getTime（）-start；
var toAdd=长度*经过时间/持续时间-显示的长度；
var point=linestring.getCoordinateAt（Math.min（已用/持续时间，1））；
//从最后一个中间点重新启动并将其删除
var newPart=newol.geom.LineString（显示的是coords_.slice（-1））；
所示为coords_.pop（）；
//添加顶点，直到超过所需长度
while（coordcount

html，body，.map{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
}