特定の領域にフィットするgps lat/longから得られた拡大/縮小X/Yピクセル

Question

gpsコーディネートのセットをX/Yピクセルに変換して特定の領域のドットを表す正しい式を探しています。

究極の目標は、.gpxファイル（または緯度/経度のペアの任意の配列）をとり、解析してトラック/シェイプのpngを生成することです。

私は、結果を世界にできるだけ正確に伝えるために必要なすべての数学と世の中を気にしません。また、そのポジションをマップに合わせる必要もありません。私はちょうどX/Y点がピクセルで表された与えられた領域の内側に収まるようにしたい。

私はこれらのフィドルを持っている：

https://jsfiddle.net/tpwyz2m5/20/

https://jsfiddle.net/bjugo7ff/

問題は、与えられたエリア内の同じピクセルに、彼らはすべてのポイントという事実に、彼らは小さなにあるほど小さいです。あなたはそれらを320x240ピクセルの領域に収めるために、それらに巨大な数を掛けなければなりません。

いくつかのテストでは、私はそれらの数字を爆破して私が望んだ結果を得ることができましたが、新しい座標で試してみると、私は別の結果を得ました。遠く離れている。

私のテストでは（ちょうど変換の動作を確認するために）、各緯度/経度からX/Y点を取得することでした。それらをループして最小値/最大値（形状の境界線）を得ました。次に、与えられた領域の内側に形状がフィットするまで、私は数を掛けて除算を開始しました。

ので、座標

var coords = { 
    0: { 
     lat: '45.88289847', 
     lon: '21.52251720' 
    }, 
    1: { 
     lat: '45.88570661', 
     lon: '21.52431965' 
    }, 
    2: { 
     lat: '45.88376483', 
     lon: '21.52770996' 
    } 
}; 

のセットとこの

var coords = { 
    0: { 
     lat: '45.23621754', 
     lon: '20.49499512' 
    }, 
    1: { 
     lat: '46.46813299', 
     lon: '21.67053223' 
    }, 
    2: { 
     lat: '45.59097825', 
     lon: '22.74169922' 
    } 
}; 

は、非常に類似の結果を有していなければならない（わずかフィドルのように）。

ここで私がテストで使用全体のjavascriptです：

var coords = { 
    0: { 
     lat: '45.88289847', 
     lon: '21.52251720' 
    }, 
    1: { 
     lat: '45.88570661', 
     lon: '21.52431965' 
    }, 
    2: { 
     lat: '45.88376483', 
     lon: '21.52770996' 
    } 
}; 
var w = document.getElementById('box').clientWidth; // 320px 
var h = document.getElementById('box').clientHeight; // 240px 

for (var key in coords) { 
    var lat = coords[key]['lat']; 
    var lon = coords[key]['lon']; 

    var x = (lon * w)/360; 
    var y = (lat * h)/180; 

    var div = document.getElementById('box'); 
    var dot = document.createElement("div"); 
    dot.className = 'dot'; 
    dot.style.top = y+'px'; 
    dot.style.left = x+'px'; 
    div.appendChild(dot); 

    console.log(key + ' -> lat:' + lat + '; lon:' + lon + '; x: ' + x + '; y: ' + y); 
} 

HTML：

<div id="box"></div> 

はCSS：

#box { 
    width:320px; 
    height:240px; 
    border:1px solid #F00; 
    position:relative; 
} 
.dot { 
    width:2px; 
    height:2px; 
    background-color:#00F; 
    position:absolute; 
} 

ので、質問は私はスケールやズームインないか、ありますX内のドットをYピクセルの長方形に合わせる。

Answer 1

思考した後、私はこれを思いついた。私はそれが正しい方法ではないと確信していますが、それは仕事を完了します。誰かがより良い（より短いよりエレガントな）方法を知っている場合、共有してください！ここ

フィドル：

https://jsfiddle.net/g1qtzqhj/

とJavaScriptを次のように

var div = document.getElementById('box'); 
var w = div.clientWidth; 
var h = div.clientHeight; 

var s = 1; 
var d = 10; 

var min_x = min_y = max_x = max_y = 0; 
for (var key in coords) { 
    var lat = coords[key]['lat']; 
    var lon = coords[key]['lon']; 

    var x = (lon * w)/360; 
    coords[key]['x'] = x; 

    var y = (lat * h)/180; 
    coords[key]['y'] = y; 

    if (x < min_x || min_x == 0) 
     min_x = x; 
    if (x > max_x || max_x == 0) 
     max_x = x; 
    if (y < min_y || min_y == 0) 
     min_y = y; 
    if (y > max_y || max_y == 0) 
     max_y = y; 
} 

var dif_x = max_x - min_x; 
var dif_y = max_y - min_y; 

var bmax_x = bmax_y = 0; 
for (var key in coords) { 
    var x = coords[key]['x'] = (coords[key]['x'] - (max_x - dif_x)); 
    var y = coords[key]['y'] = (coords[key]['y'] - (max_y - dif_y)); 

    if (x > bmax_x || bmax_x == 0) 
     bmax_x = x; 
    if (y > bmax_y || bmax_y == 0) 
     bmax_y = y; 
} 

nw = (bmax_x) * s; 
nh = (bmax_y) * s; 

r_x = w/bmax_x; 
r_y = h/bmax_y; 

for (var key in coords) { 
    var dot = document.createElement('div'); 
    dot.className = 'dot'; 
    dot.style.width = d +'px'; 
    dot.style.height = d +'px'; 
    dot.style.borderRadius = d +'px'; 
    dot.style.top = h - (coords[key]['y'] * s * r_y) - (d/2) + 'px'; 
    dot.style.left = (coords[key]['x'] * s * r_x) - (d/2) + 'px'; 
    div.appendChild(dot); 
} 

を私は（私はいくつかの睡眠を取得した後）、それを再考する必要があるかもしれません、同じオブジェクトをループ3回理由まったくそう思わない！