縮放或縮放從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; 
} 

所以，問題是，如何調整或放大通過Y像素矩形來適應X內部的點。

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

我可能會重新考慮它（後我得到一些睡眠），因爲通過同一個對象循環三次似乎並不正確！