Преобразовать широту / долготу в пиксельные координаты X и Y - PullRequest
3 голосов
/ 11 августа 2011

Этот тип вопросов, по-видимому, задавался много раз, но ни одно из опубликованных решений не дало мне ответа, который мне нужен.

У меня есть эта карта Нортленда, Новой Зеландии, и я хотел бы сопоставить значения широты и долготы с значениями x / y (в пикселях) на этом изображении (http://i.stack.imgur.com/3ok4O.gif - это квадрат в 400 пикселей)

Прямо сейчас я не знаю точных широтных / длинных границ этого изображения, но у меня есть некоторые примеры данных, которые должны быть полезны для тех, кто знает, что они делают.

  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.

Спасибо!

Ответы [ 3 ]

4 голосов
/ 11 августа 2011

в 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 позиции верхнего левого угла или вашей карты.Но вы можете увидеть идею.И, конечно, я, возможно, не понял, о чем вы на самом деле спрашиваете.

0 голосов
/ 11 сентября 2017

Преобразование широты / долготы в пиксели только путем масштабирования, как вы предлагаете, работает только на небольшой выделенной части земного шара, поскольку константы масштабирования различаются в зависимости от широты.

Преобразование в координаты универсального поперечного Меркатора (UTM) может работать для небольших областей. Сначала вы вычисляете UTM-зону центральной точки вашей области просмотра, затем конвертируете все другие точки, которые вам нужно показать на этом экране, используя эту зону (не фактическую зону точки).

Координаты UTM можно преобразовать в пиксели простым масштабированием, поскольку они линейны. Конечно, этот метод хорошо применим только для рендеринга областей, не намного превышающих одну зону UTM ( несколько сотен километров ). «Блокировка зоны», однако, хорошо работает, если она немного больше или просто официальная граница зоны UTM находится внутри области просмотра.

Есть хорошие, простые в использовании библиотеки с открытым исходным кодом для преобразования координат. Поскольку для вашей платформы используется JavaScript, возможно, стоит взглянуть на geodesy . Он имеет много хороших методов для преобразования координат, вычисления расстояния, опор, средних точек и тому подобного.

0 голосов
/ 11 августа 2011

создать файл 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>
...