Domanda

Ho il valore Lat / Long di New York, NY; 40.7560540, -73.9869510 e un'immagine piatta della terra, 1000px × 446px.

Vorrei essere in grado di convertire, usando Javascript, Lat / Long in una coordinata X, Y in cui 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 preoccuparti dei problemi di quale proiezione utilizzare, crearne una tua assumere o andare con quello che sai potrebbe funzionare
  2. X, Y può essere qualsiasi angolo dell'immagine
  3. Punti bonus per la stessa soluzione in PHP (ma io ho davvero bisogno del JS)
È stato utile?

Soluzione

Una funzione di conversione di base in 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 restituirà il numero di pixel in alto a sinistra. Questa funzione presuppone quanto segue:

  1. Che l'immagine sia correttamente allineata con l'angolo in alto a sinistra (0,0) allineando con 90 * Nord per 180 * Occidente.
  2. Che i tuoi coords siano firmati con N essendo -, S essendo +, W essendo - ed E essendo +

Altri suggerimenti

La proiezione che usi cambierà tutto, ma funzionerà supponendo 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>

Esiste una buona libreria Javascript, PROJ4JS , che ti permette di fare trasformazioni tra diverse proiezioni.

Se hai una foto di tutta la terra, la proiezione è sempre importante. Ma forse non capisco la tua domanda.

Ho scritto una funzione che funziona con le mappe Mercator. Soprattutto se la tua immagine non copre tutto il mondo, significa che funziona anche con le mappe ritagliate: https://stackoverflow.com/a/ 10401734/730823

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top