画面座標系から経緯度への変換

写真の位置を表す線を引きたい。その際、画面上に表示している写真(スクリーン座標系)から、撮影場所(経緯度)に線を引く必要があるため、両者の変換を行う。線は、JavaScriptで描画することもできるが、今回は地図上の情報なのでOpenLayersで描画する。

• OpenLayers.LonLat OpenLayers.Layer.getLonLatFromViewPortPx(OpenLayers.Pixel)
  • OpenLayers.pixcelで、ピクセルを指定すると、その場所の経緯度がOpenLayers.LonLat形式で返される。
  • OpenLayers.Layer - OpenLayers

• OpenLayers.Pixel OpenLayers.Layer.getViewPortPxFromLonLat(OpenLayers.LonLat)
  • 経緯度からピクセルを返す。

描画

初期化

var olMap = new OpenLayers.Map();
// 必要な初期化を行う
var vecTempLayer = new OpenLayers.Layer.Vector("TestLayer");
olMap.AddLayer(vecTempLayer);
var points = [];
points.push(new OpenLayers.Feature.Vector(
    new OpenLayers.Geometry.Point(0,0));
vecTempLayer.addFeatures(points);

点の移動

画面上の指定の座標に点を移動させる方法は以下の通り。

// 座標変換
var lonlat = vecTempLayer.getLonLatFromViewPortPx(new OpenLayers.Pixel(クライアントX座標,クライアントY座標));
// 座標の移動
vecTempLayer.features[0].geometry.x = lonlat.lon;
vecTempLayer.features[0].geometry.y = lonlat.lat;
// 再描画
vecTempLayer.drawFeature(vecTempLayer.features[0]);