1

OpenLayers.Layer.Image オブジェクトがあります。openlayers を使用して回転させる方法はありますか?

jqueryを使用してdiv全体を回転することを提案しないでください。これを行うと、openlayersのズームとパンの効果が失われます..

4

1 に答える 1

4

OpenLayers イメージでこれを行う方法は実際にはありません。ただし、ベクター レイヤーを使用することでこれを回避できます。

ベクトルを使用して画像を回転する

回転した画像をマップに追加し、画像に対するマップのズーム機能とパン機能を維持したい場合は、次の操作を実行できます。

ベクター レイヤーを作成し、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]);

次に、外部グラフィックが画像のソースと一致するベクター フィーチャを作成します。

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

これを行う方法のその他の例こことここ.

于 2013-01-23T22:28:03.250 に答える