缩放或缩放从gps获得的X/Y像素以适合特定区域

我正在寻找将一组gps坐标转换为X/Y像素以表示给定区域中的点的正确公式。

最终目标是以.gpx文件为例(或任何长度/长度对数组)，解析它，并生成轨道/形状的png。

我不关心世界的曲率和所有的数学为了得到尽可能真实的结果。我也不需要在地图上匹配位置。我只是想让X/Y点适合一个给定的以像素表示的区域。

我有这些小提琴:

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

https://jsfiddle.net/bjugo7ff/

问题是它们太小了，小到实际上它们都指向给定区域中的相同像素。你必须用一个大的数字来乘以它们，为了让它们适合320x240px的区域，你需要对它们进行调整。

在我运行的一些测试中，我设法放大这些数字以获得我想要的结果，但当我用一组新的坐标尝试它时，我得到了不同的结果，意思是，点是靠近或远离。

我在测试中所做的(只是为了看看转换是否有效)是从每个lat/long中获得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像素矩形内的点

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