Frage

Ich habe den Lat / Long-Wert von New York City, NY; 40.7560540, -73,9869510 und ein flaches Bild der Erde, 1000px × 446px.

Ich möchte in der Lage sein, zu konvertieren mit Javascript, die Breite / Länge zu einem X, Y-Koordinate, wo der Punkt, den Standort widerspiegeln würde.

So die X-, Y-Koordinate der linken oberen Ecke des Bildes bilden würde; 289, 111

Dinge zu beachten:

  1. keine Sorge über Fragen, was Projektion zu verwenden, machen Sie Ihre eigenen Annahme oder gehen mit dem, was Sie wissen, könnte funktionieren
  2. X, Y kann jede Ecke des Bildes
  3. Form
  4. Bonuspunkte für die gleiche Lösung in PHP (aber ich wirklich brauchen die JS)
War es hilfreich?

Lösung

Eine grundlegende Konvertierungsfunktion in js sei:

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

Damit wird die Anzahl der Pixel von links oben zurückzukehren. Diese Funktion übernimmt die folgende:

  1. , dass Ihr Bild korrekt ausgerichtet ist mit der linken oberen Ecke (0,0) Ausrichten mit 90 * 180 * North by Westen.
  2. Dass Ihr coords mit N Wesen unterzeichnet werden -, wobei S +, W Wesen - und E ist +

Andere Tipps

Der Vorsprung Sie verwenden wird, alles zu ändern, aber dies funktioniert eine Mercator-Projektion unter der Annahme:

<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>

Es gibt eine gute Javascript-Bibliothek, PROJ4JS , die Sie Transformationen zwischen verschiedenen Projektionen tun können.

Wenn Sie ein Bild von der ganzen Erde haben, ist der Vorsprung immer egal. Aber vielleicht nur verstehe ich Ihre Frage nicht.

Ich habe eine Funktion geschrieben, die für Mercator-Karten funktionieren. Vor allem, wenn Sie Ihr Bild die ganze Welt erstreckt sich nicht auf, bedeutet dies funktioniert auch mit den geernteten Karten: https://stackoverflow.com/a/ 10401734/730823

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top