php - Convert latlong to pixel X&Y co-ordinates - Stack Overflow

admin管理员组

文章数量:1414628

This type of question seems to have been asked numerous times but none of the solutions posted get me anywhere near the answer I need.

I have this map of Northland, New Zealand and I'd like to map Lat/Long values to x/y (pixel) values on this image (.gif - which is 400px square)

Right now I do not know the precise lat/long boundaries of this image, but I do have some example data which should be useful to someone who knows what they are doing.

  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

The data I'm receiving now is only Lat/long, so I need to be able to produce x and y values within the application.

Can anybody help me write the required method/logic for creating these x/y values.

Thank you!

This type of question seems to have been asked numerous times but none of the solutions posted get me anywhere near the answer I need.

I have this map of Northland, New Zealand and I'd like to map Lat/Long values to x/y (pixel) values on this image (https://i.sstatic/3ok4O.gif - which is 400px square)

Right now I do not know the precise lat/long boundaries of this image, but I do have some example data which should be useful to someone who knows what they are doing.

  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

The data I'm receiving now is only Lat/long, so I need to be able to produce x and y values within the application.

Can anybody help me write the required method/logic for creating these x/y values.

Thank you!

• php
• javascript
• coordinates
• latitude-longitude
• geocode

Share Improve this question Follow edited Aug 11, 2011 at 4:55 Iain asked Aug 11, 2011 at 4:17 IainIain 3311 silver badge44 bronze badges 6

• 1 I think to solve this, take the height and width in pixels of the window or image and then take the maximum of lat & long distance for each then divide the latter by the former, then multiply the result for width or height by the desired point of lat or long . I'm not very good in math though. but it is something like that. – Dreaded semicolon Commented Aug 11, 2011 at 4:22
• @Dreaded smicolon right on dot he needs to normalize his window positions according to the range of lat/long values he needs to acodate, rest is just simple translation of coordinates. – TheVillageIdiot Commented Aug 11, 2011 at 4:24
• any reason not to do it with google maps? – user557846 Commented Aug 11, 2011 at 4:25
• If the physical distances are small enough (looks like just one degree) you can use the approximation and relate x/y directly to lat/long. Otherwise you need a bit more exactness and have to transform the polar coordinates into cartesian points. – mario Commented Aug 11, 2011 at 4:27
• @Dreaded semicolon can you give an example in javascript or php please, not sure I follow, thanks! – Iain Commented Aug 11, 2011 at 4:54

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 4

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

I didn't try to run this, so there's probably a bit of debugging necessary, and the x and y pixel positions would have to have added to them the x and y positions of the top left or your map. But you can see the idea. And, of course, I may not have understood what you're really asking.

create map.html file locally, call in browser:

    <!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./apis/maps/documentation/javascript/examples/default.css"
        rel="stylesheet" type="text/css">
    <script type="text/javascript"
        src="http://maps.googleapis./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>

Converting Lat/Long into pixels just by scaling as you suggest only works on the small selected part of the globe, because the scaling constants vary depending on the latitude.

Converting into Universal Transverse Mercator (UTM) co-ordinates may work for small areas. First you pute the UTM zone of the central point of your viewing area, then convert all other points you need to show on that screen using that zone (not the actual zone of the point).

UTM co-ordinates can be converted into pixels by simple scaling because they are linear. Of course, the method is only well usable for rendering areas not much larger than a single UTM zone (few hundreds of kilometers). "Zone lock", however, works well if it is just slightly bigger, or simply the official UTM zone boundary is inside the viewing area.

There are good, easy to use, open source libraries for the co-ordinate conversion. As you platform is JavaScript, may be worth looking at geodesy. It has many good methods for co-ordinate conversion, distance calculation, bearings, midpoints and all the like.

本文标签： phpConvert latlong to pixel XampY coordinatesStack Overflow