openlayers - 如何旋转图像层

Question

i have an OpenLayers.Layer.Image object.. is there any way to rotate it using openlayers ?

please don't suggest to rotate the entire div using jquery, when i do this i'm losing the zooming and panning effect of the 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 .