openlayers - 如何旋转图像层

Question

我有一个OpenLayers.Layer.Image对象..有没有办法使用openlayers旋转它？

请不要建议使用jquery旋转整个div，当我这样做时，我正在失去openlayers的缩放和平移效果..

Answer 1

使用OpenLayers图像并没有真正的方法。 但是，您可以使用矢量图层解决此问题。

使用向量旋转图像

如果您想将旋转的图像添加到地图中，以及保持地图相对于图像的缩放和平移功能，您可以执行以下操作：

创建一个矢量图层，并设置externalGraphic =你的图像src：

var styleMap = new OpenLayers.Style({
    externalGraphic: "${getUrl}" // attribute replacement syntax
}, {context: context});
var vectorLayer = new OpenLayers.Layer.Vector("My Image Overlay", {
    styleMap: styleMap
});
map.addLayers([vectorLayer]);

接下来，创建一个矢量要素，其外部图形与图像的来源匹配：

var newPoint = new OpenLayers.Geometry.Point(x, y);
var pointFeature = new OpenLayers.Feature.Vector(newPoint);
pointFeature.attributes.externalGraphic = "path/to/image/src/";

将要素添加到矢量图层：

vectorLayer.addFeatures([pointFeature]);

然后旋转它。 为此，您只需配置图像将旋转的原点：

var origin = new OpenLayers.Geometry.Point(x, y); // should match coordinates of pointFeature
var center = new OpenLayers.Feature.Vector(origin);
vectorLayer.addFeatures([center]);

如果需要，您可以选择更改旋转原点的样式属性以将其隐藏在地图中。

最后，根据需要将pointFeature的方向更改为：

pointFeature.geometry.rotate(angle, origin);
pointFeature.layer.drawFeature(pointFeature);

有关如何在此处和此处执行此操作的更多示例。