如果我有一个大小为sizeX、sizeY的JPEG地图
以及地图上的一些标定点(X, Y, Lon, Lat)
那么,给定经度/纬度对,计算对应的XY点的算法是什么?
如果我有一个大小为sizeX、sizeY的JPEG地图
以及地图上的一些标定点(X, Y, Lon, Lat)
那么,给定经度/纬度对,计算对应的XY点的算法是什么?
以下方法对我有效,没有太多的废话。
int x = (int) ((MAP_WIDTH/360.0) * (180 + lon));
int y = (int) ((MAP_HEIGHT/180.0) * (90 - lat));
这些lat,lon坐标是由安卓设备提供的,因此它们应该符合所有Google Earth/Map产品使用的标准。
(givenLng*widthOfContainerElement)/360
其中360是总经度(以度为单位)
公式 - 纬度 - 像素
(givenLat*heightOfContainerElement)/180
其中180是总纬度(以度为单位)
//Height is calculated from the bottom
有许多不同的地图投影方案。您需要知道您的地图使用哪种方案。
有关地图投影算法和正/反向映射的更多信息,请查看此链接。它提供了许多常见投影的公式。
为了制作麦卡托投影地图,请按照以下步骤进行操作:
extension UIView
{
func addLocation(coordinate: CLLocationCoordinate2D)
{
// max MKMapPoint values
let maxY = Double(267995781)
let maxX = Double(268435456)
let mapPoint = MKMapPointForCoordinate(coordinate)
let normalizatePointX = CGFloat(mapPoint.x / maxX)
let normalizatePointY = CGFloat(mapPoint.y / maxY)
let pointView = UIView(frame: CGRectMake(0, 0, 5, 5))
pointView.center = CGPointMake(normalizatePointX * frame.width, normalizatePointY * frame.height)
pointView.backgroundColor = UIColor.blueColor()
addSubview(pointView)
}
}
我有一个简单的项目,可以在UIView上添加坐标:https://github.com/Glechik/MapCoordinateDrawer
<!DOCTYPE html>
<html>
<head>
<style>
#point{font-face:Arial; font-size:18px; color:#FFFF00; width:12px; height:12px;text-shadow: 2px 2px #000000}
#canvas {position: absolute; top: 0px; left: 0px; z-index: -2}
html,
body,
#canvas {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(window).on("load resize",function(e){
var w = $("#canvas").width();
var h = $("#canvas").height();
// New York, NY (https://maps.googleapis.com/maps/api/geocode/json?address=New%20York,%20NY)
var lat = 40.91525559999999;
var long = -73.70027209999999;
var x = ((w/360) * (180 + long)) - 9;
var y = ((h/180) * (90 - lat)) - 18;
$("#text").text('X:'+x+', Y:'+y);
$("#point").offset({ top: y, left: x });
});
</script>
</head>
<body>
<div id="text"></div>
<div id="point">▼</div>
<img id="canvas" border="0" src="http://friday.westnet.com/~crywalt/dymaxion_2003/earthmap10k.reduced.jpg">
</body>
</html>
int x = (int) ((MAP_WIDTH/360.0) * (180 + lon));
int y = (int) ((MAP_HEIGHT/180.0) * (90 - lat));
但是对我来说,这个更好用: https://medium.com/@suverov.dmitriy/how-to-convert-latitude-and-longitude-coordinates-into-pixel-offsets-8461093cb9f5
这里是文章中代码部分的快捷方式: https://gist.github.com/blaurt/b0ca054a7384ebfbea2d5fce69ae9bf4#file-latlontooffsets-js