3

这种类型的问题似乎已经被问过很多次了，但发布的解决方案都没有让我接近我需要的答案。

我有这张新西兰北地的地图，我想将 Lat/Long 值映射到这张图片上的 x/y（像素）值（http://i.stack.imgur.com/3ok4O.gif - 这是400px 正方形）

现在我不知道这张图片的精确纬度/经度边界，但我确实有一些示例数据，这些数据应该对知道他们在做什么的人有用。

  LAT              LONG            X                Y
  -35.3989854471   173.504676819   192.92777494     196.760481649
  -35.2647882735   174.121499062   271.426291418    176.82865668
  -35.3131641432   173.89125824    242.099305271    183.945780963

我现在收到的数据只有纬度/经度，所以我需要能够在应用程序中生成 x 和 y 值。

谁能帮我编写创建这些 x/y 值所需的方法/逻辑。

谢谢！

4

3 回答 3

4

在 Javascript....

var lat=-35.3989854471;
var long=173.504676819;

var imageNorthLat=???;
var imageSouthLat=???;

var imageWestLong=???;
var imageEastLong=???;

var imageLongPixels=400;
var imageLatPixels=400;

var pixelsPerLat=imageLatPixels/(imageNorthLat-imageSouthLat);
var pixelsPerLong=imageLongPixels/(imageEastLong-imageWestLong);

var xPixelPosition=(long-imageWestLong)*pixelsPerLong;
var yPixelPosition=Math.abs(lat-imageNorthLat)*pixelsPerLat;

我没有尝试运行它，因此可能需要进行一些调试，并且 x 和 y 像素位置必须添加到左上角或地图的 x 和 y 位置。但是你可以看到这个想法。而且，当然，我可能不明白你真正要问的是什么。

于 2011-08-11T06:34:35.170 回答
0

在本地创建 map.html 文件，在浏览器中调用：

    <!DOCTYPE html>
<html>
  <head>
    <title>MY MAP</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css"
        rel="stylesheet" type="text/css">
    <script type="text/javascript"
        src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      var map;
         var myLatlng1 = new google.maps.LatLng(-35.3989854471, 173.504676819);
var myLatlng2 = new google.maps.LatLng(-35.2647882735, 174.121499062);
var myLatlng3 = new google.maps.LatLng(-35.3131641432, 173.89125824);
      function initialize() {
        var myOptions = {
          zoom: 8,
          center: new google.maps.LatLng(-35.3989854471, 173.504676819),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),
            myOptions);

                  var marker2 = new google.maps.Marker({
      position: myLatlng2, 
      map: map, 
      title:"POSITION 2"
  });   

                  var marker1 = new google.maps.Marker({
      position: myLatlng1, 
      map: map, 
      title:"POSITION 3"
  });   

                  var marker3 = new google.maps.Marker({
      position: myLatlng3, 
      map: map, 
      title:"POSITION 3"
  });   
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

  </head>
  <body>
    <div id="map_canvas"></div>
  </body>
</html>
于 2011-08-11T04:40:57.503 回答
0

仅按照您的建议通过缩放将 Lat/Long 转换为像素仅适用于地球的选定部分，因为缩放常数因纬度而异。

转换为通用横轴墨卡托 (UTM) 坐标可能适用于小区域。首先，您计算查看区域中心点的 UTM 区域，然后使用该区域（不是该点的实际区域）转换您需要在该屏幕上显示的所有其他点。

UTM 坐标可以通过简单的缩放转换为像素，因为它们是线性的。当然，该方法仅适用于渲染不大于单个 UTM 区域（几百公里）的区域。然而，如果“区域锁定”稍微大一点，或者只是官方的 UTM 区域边界在观看区域内，则效果很好。

有很好的、易于使用的、用于坐标转换的开源库。由于您的平台是 JavaScript，可能值得一看geodesy。它有很多很好的坐标转换、距离计算、方位角、中点等方法。

于 2017-09-11T07:08:16.677 回答