LAT/Longs를 X/Y 좌표로 변환합니다

StackOverflow https://stackoverflow.com/questions/1019997

문제

뉴욕시 뉴욕시의 LAT/긴 가치가 있습니다. 40.7560540, -73.9869510 및 지구의 평평한 이미지, 1000px × 446px.

JavaScript, LAT/Long을 X로, Y 좌표를 사용하여 포인트가 위치를 반영 할 수있는 조정을 사용하고 싶습니다.

따라서 x, y 좌표는 이미지의 왼쪽 상단 코너를 형성합니다. 289, 111

주목할만한 것 :

  1. 사용할 투영 문제에 대해 걱정하지 마십시오.
  2. x, y는 이미지의 어느 구석에도 형성 될 수 있습니다.
  3. PHP의 동일한 솔루션에 대한 보너스 포인트 (그러나 정말 JS가 필요합니다)
도움이 되었습니까?

해결책

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. 이미지가 90* 북쪽으로 180* 서쪽으로 정렬되는 왼쪽 상단 코너 (0,0)와 제대로 정렬됩니다.
  2. 당신의 코디는 n being-, s be +, w be- 및 e being +로 서명합니다.

다른 팁

당신이 사용하는 프로젝션은 모든 것을 바꿀 것이지만, 이것은 Mercator 프로젝션을 가정하여 작동합니다.

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

좋은 JavaScript 라이브러리가 있습니다. proj4js, 이를 통해 다른 예측간에 변형을 할 수 있습니다.

지구의 그림이 있다면 투영은 항상 중요합니다. 하지만 어쩌면 나는 당신의 질문을 이해하지 못할 수도 있습니다.

Mercator Maps에서 작동하는 기능을 작성했습니다. 특히 이미지가 전 세계를 다루지 않는 경우 자른 맵과도 작동한다는 것을 의미합니다. https://stackoverflow.com/a/10401734/730823

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top