javascript - openlayers - 我如何旋转图像层

Question

我有一个 OpenLayers.Layer.Image 对象..有什么方法可以使用 openlayers 旋转它吗？

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

Answer 1

对于 OpenLayers 图像，实际上并没有办法做到这一点。但是，您可以通过使用矢量图层来解决此问题。

使用矢量旋转图像

如果您想向 map 添加旋转图像，并保持 map 相对于图像的缩放和平移功能，您可以执行以下操作:

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

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]);

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

最后，根据需要更改 pointFeature 的方向以放置:

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

有关如何执行此操作的更多示例 here和 here .