2009-06-19 22 views
16

Ho il valore Lat/Long di New York City, NY; 40.7560540, -73.9869510 e un'immagine piatta della terra, 1000px × 446px.Converti lat/long a coordinate X/Y

Mi piacerebbe essere in grado di convertire, utilizzando Javascript, il Lat/Long in una coordinata X, Y dove il punto rifletterebbe la posizione.

Quindi le coordinate X, Y formano l'angolo in alto a sinistra dell'immagine; 289, 111

cose da notare:

  1. non preoccuparsi di problemi di quello che la proiezione di utilizzare, creare il proprio assunzione o andare con quello che sai potrebbe funzionare
  2. X, Y può essere formare qualsiasi angolo dell'immagine
  3. punti bonus per la stessa soluzione in PHP (ma ho davvero bisogno il JS)
+0

"Non preoccuparti di ... quale proiezione utilizzare" come allora sappiamo quale sia la mappatura XY co-ord sarà? Potrei aver appena detto che X è Lat, Y is Long e che probabilmente ti avrebbe soddisfatto dato che apparentemente il risultato non ha bisogno di dire nulla o di relazionarsi con una proiezione del mondo reale. – 1owk3y

risposta

8

Una funzione di conversione di base js sarebbe:

MAP_WIDTH = 1000; 
MAP_HEIGHT = 446; 

function convert(lat, lon){ 
    var y = ((-1 * lat) + 90) * (MAP_HEIGHT/180); 
    var x = (lon + 180) * (MAP_WIDTH/360); 
    return {x:x,y:y}; 
} 

Questo riporta il numero di pixel da sinistra in alto. Questa funzione presuppone quanto segue:

  1. che l'immagine sia correttamente allineata con l'angolo in alto a sinistra (0,0) allineando con il 90 * del Nord da 180 * occidentale.
  2. Che i vostri coordinate sono firmati con l'essere N -, S essendo +, W essere - e E +
+1

Grazie, come invertire questo? Quindi da X e Y a lat/long con coordinate di bounding box specificate? – user3408380

0

Se hai un'immagine di tutta la terra, la proiezione ha sempre importanza. Ma forse non capisco la tua domanda.

+0

Sei corretto, ma in questo caso userò volentieri un'immagine appropriata per abbinare una soluzione funzionante per una proiezione specifica. – donohoe

18

La proiezione si utilizza sta per cambiare tutto, ma questo lavoro assumendo una proiezione di Mercatore:

<html> 
<head> 
<script language="Javascript"> 
var dot_size = 3; 
var longitude_shift = 55; // number of pixels your map's prime meridian is off-center. 
var x_pos = 54; 
var y_pos = 19; 
var map_width = 430; 
var map_height = 332; 
var half_dot = Math.floor(dot_size/2); 
function draw_point(x, y) { 
    dot = '<div style="position:absolute;width:' + dot_size + 'px;height:' + dot_size + 'px;top:' + y + 'px;left:' + x + 'px;background:#00ff00"></div>'; 
    document.body.innerHTML += dot; 
} 
function plot_point(lat, lng) { 
    // Mercator projection 

    // longitude: just scale and shift 
    x = (map_width * (180 + lng)/360) % map_width + longitude_shift; 

    // latitude: using the Mercator projection 
    lat = lat * Math.PI/180; // convert from degrees to radians 
    y = Math.log(Math.tan((lat/2) + (Math.PI/4))); // do the Mercator projection (w/ equator of 2pi units) 
    y = (map_height/2) - (map_width * y/(2 * Math.PI)) + y_pos; // fit it to our map 

    x -= x_pos; 
    y -= y_pos; 

    draw_point(x - half_dot, y - half_dot); 
} 
</script> 
</head> 
<body onload="plot_point(40.756, -73.986)"> 
    <!-- image found at http://www.math.ubc.ca/~israel/m103/mercator.png --> 
    <img src="mercator.png" style="position:absolute;top:0px;left:0px"> 
</body> 
</html> 
+0

Anche questo ha funzionato per me ed è un'ottima risposta. Ho modificato "lng" in "parseInt (lng, 10)" su questa riga: x = (map_width * (180 + lng)/360 + longitude_shift)% map_width; Funzionerebbe quando chiamerò manualmente la funzione, inserendo il valore di passaggio da un array restituito NaN per x Grazie! – donohoe

+0

penso x = (map_width * (180 + lng)/360 + longitude_shift)% map_width; deve essere x = ((map_width * (180 + lng)/360)% map_width) + longitude_shift; altrimenti il ​​Giappone e la costa orientale dell'Australia (me inclusa) vengono "avvolti" in mezzo all'oceano Pacifico. : P –

+0

Impressionante, funziona alla grande! L'unica cosa che non ho trovato che cosa hanno fatto gli y_pos? Questo in PHP è: PanMan

5

C'è una buona libreria Javascript, PROJ4JS, che ti permette di fare le trasformazioni tra le diverse proiezioni.

+0

Definitivamente la soluzione migliore per la più ampia questione della riproiezione (ad esempio la domanda di Dinesh posta come risposta). – winwaed

Problemi correlati