Convert lat/long to pixel X&Y co-ordinates
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 (http://i.stack.imgur.com/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!
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.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>
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 compute 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.
加载中,请稍侯......
精彩评论