将纬度/长度转换为X / Y坐标

时间:2009-06-19 20:56:38

标签: php javascript maps coordinates proj4js

我有纽约纽约市的Lat / Long值; 40.7560540,-73.9869510和地球的平面图像,1000像素×446像素。

我希望能够使用Javascript将Lat / Long转换为X,Y坐标,其中该点将反映位置。

因此,X,Y坐标构成图像的左上角; 289,111

注意事项:

  1. 不要担心使用什么投影的问题,制作自己的 假设或与你所知道的一致 可能有用
  2. X,Y可以形成图像的任何角落
  3. 奖励积分 PHP中的相同解决方案(但我 真的需要JS)

5 个答案:

答案 0 :(得分:18)

你使用的投影将会改变一切,但这可以假设墨卡托投影:

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

答案 1 :(得分:8)

js中的基本转换函数是:

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

这将返回左上角的像素数。 此函数假定以下内容:

  1. 您的图像已正确对齐 左上角(0,0) 与90 *北对齐180 * 西。
  2. 你的坐标是以N为标志 - ,S是+,W是 - 而E是+

答案 2 :(得分:6)

有一个很好的Javascript库PROJ4JS,它允许您在不同的投影之间进行转换。

答案 3 :(得分:0)

如果你有整个地球的图片,那么投影总是很重要。但也许我只是不明白你的问题。

答案 4 :(得分:0)

我已经编写了一个适用于墨卡托地图的功能。特别是如果您的图像不能覆盖整个世界,则意味着它也适用于裁剪地图:https://stackoverflow.com/a/10401734/730823