Масштабирование или увеличение X/Y пикселей, полученных из gps lat/long, чтобы соответствовать определенной области

Question

Я ищу правильную формулу для преобразования набора координат gps в пиксели X/Y для представления точек в заданной области.

Конечная цель - взять файл .gpx, например (или любой массив пар лат/длин), проанализировать его и сгенерировать png дорожки/формы.

Я не забочусь о мире и всей математике, которая позволяет получить результат как можно более верный для жизни. Я также не должен сопоставлять позиции с картой. Я просто хочу, чтобы точки X/Y располагались внутри заданной области, выраженной в пикселях.

я эти скрипках:

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

https://jsfiddle.net/bjugo7ff/

Проблема заключается в том, что они являются небольшой, настолько малы, в том, что все они указывают на тот же пиксель в данной области. Вы должны умножить их на огромные числа и поиграть с ними, чтобы они соответствовали области 320x240px.

В некоторых тестах я побежал за мной, чтобы взорвать эти числа, чтобы получить результат, который я хотел, но когда я попробовал его с новым набором координат, у меня получился другой результат, то есть, точки были закрыты или далеко друг от друга.

Что я сделал в своих тестах (просто чтобы посмотреть, работает ли преобразование), чтобы получить точки X/Y с каждого лата/долготы. Пронумеровали их, чтобы получить значения min/max (это были границы формы). Затем я начал умножать и делить числа до тех пор, пока не получим форму в пределах данной области.

так, этот набор координат

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

я, возможно, придется пересмотреть его (после того, как я получаю некоторый сон), потому что цикл через тот же объект в три раза не кажется правильным!