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

Question

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

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

Answer 1

There's not really a way to do this with an OpenLayers image. You can, however, workaround this by using a vector layer.

Using Vectors to Rotate an Image

If you'd like to add a rotated image to the map, as well as maintain zoom and pan features of the map relative to the image, you can do the following:

Create a vector layer, and set the externalGraphic = your image 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]);

Next, create a vector feature whose external graphic matches the source of your image:

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

Add the feature to your vector layer:

vectorLayer.addFeatures([pointFeature]);

Then rotate it. For this you simply need to configure a point of origin about which your image will rotate:

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

You can optionally change style attributes of your origin of rotation to hide it from the map if desired.

Finally, change the orientation of your pointFeature to place as desired:

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

More examples of how to do this here and here.