我想与您分享我如何解决这个问题。就像@MvG所说的那样,我使用了等经纬投影,但是这种方法会给出与地球(或整个地图)相关的X和Y位置,这意味着您获得全局位置。在我的情况下,我想将坐标转换为一个小区域(约500m²),因此我将投影点与另外两个点联系起来,获取全局位置,并将其与本地(屏幕上的)位置相关联,就像这样:
首先,我选择围绕我想要投影的区域的两个点(左上角和右下角),就像这张图片:
![图片描述](https://istack.dev59.com/CaM4e.webp)
一旦我有了纬度和经度的全局参考区域,我也会为屏幕位置做同样的事情。包含这些数据的对象如下所示。
var p0 = {
scrX: 23.69,
scrY: -0.5,
lat: -22.814895,
lng: -47.072892
}
var p1 = {
scrX: 276,
scrY: 178.9,
lat: -22.816419,
lng: -47.070563
}
var radius = 6371;
function latlngToGlobalXY(lat, lng){
let x = radius*lng*Math.cos((p0.lat + p1.lat)/2);
let y = radius*lat;
return {x: x, y: y}
}
p0.pos = latlngToGlobalXY(p0.lat, p0.lng);
p1.pos = latlngToGlobalXY(p1.lat, p1.lng);
function latlngToScreenXY(lat, lng){
let pos = latlngToGlobalXY(lat, lng);
pos.perX = ((pos.x-p0.pos.x)/(p1.pos.x - p0.pos.x));
pos.perY = ((pos.y-p0.pos.y)/(p1.pos.y - p0.pos.y));
return {
x: p0.scrX + (p1.scrX - p0.scrX)*pos.perX,
y: p0.scrY + (p1.scrY - p0.scrY)*pos.perY
}
}
var pos = latlngToScreenXY(-22.815319, -47.071718);
$point = $("#point-to-project");
$point.css("left", pos.x+"em");
$point.css("top", pos.y+"em");
你可以看到,我用JavaScript编写了这个程序,但是计算部分可以翻译成任何语言。
附注:我正在将转换后的位置应用到一个id为“point-to-project”的HTML元素上。如果您想在项目中使用此代码,请创建此元素(样式为绝对定位),或更改“使用”块。