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!
Share Improve this question edited Aug 11, 2011 at 4:55 Iain asked Aug 11, 2011 at 4:17 IainIain 331 silver badge4 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
3 Answers
Reset to default 4in 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.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745153192a4613959.html
评论列表（0条）