基于已知的lat和lng点在图像上放置点的失败尝试 [英] a failed attempt at placing a dot over an image based on known lat and lng points

问题描述

我为这个模糊的标题道歉，我真的无法弄清楚一个打击方式来总结它。建议值得欢迎。

我正在研究一个真的不需要谷歌地图的项目，它只会为这个项目创造额外的开销。但是，我无法弄清楚如何做到这一点没有谷歌地图...迄今。

如果我要将平面图的图形叠加到谷歌地图，我可以使用浏览器位置来近似用户的位置。为此，这是一个非常大的地方，所以有一些准确性差的空间。

现在我想要做的是知道覆盖层的边界，图像转换为div，然后根据浏览器lat / lng计算用户在div中的位置。

我可以使用正方形图像那边的顶部是水平的和垂直的，因为这是我的区域。但是因为世界上没有一个这样的工作，我需要一个不平方的区域来平方。我真的在努力挣扎。

这是我正在尝试做的事情！

这是一个测试我的概念的链接，但没有考虑到需要的图片在地图上旋转： http://www.freeptools.com/mapster/singlerun/maptest。 php

就像我说过的，我确信这可以完成，但我还没有能够找出它的数学。这让我疯狂。

这是我的代码，它在做魔术。一个函数获取浏览器坐标并将它们发送到初始化函数。然后根据自己更早的映射，我有我想要映射的图像的界限。我正在使用正弦表格来尝试获取用户点的高度和宽度（因为地图曲线，在其他任何地方都是不准确的）位置，然后是距离顶点和最左边点的距离，然后获取从左边/顶部的距离并将其除以宽度/高度以获得它们从左/顶到定位点的距离的百分比。这个想法，虽然我不能让它超级准确，但在这个例子中，因为图像在地图上水平排列。我的问题是如何计算图像在地图上旋转时的距离？
$ b

 函数初始化（y3，x3）{// lat，lon 
 
 // var overlayBounds = new google.maps.LatLngBounds（new google.maps.LatLng（41.11246878918085，-90.5712890625），new google.maps.LatLng（47.68652571374621，-82.001953125））; 
 var box = $（＃map_canvas）; 
 
 //图片边界
 var x1 = -82.001953125; 
 var x2 = -90.5712890625; 
 var y1 = 41.11246878918085; 
 var y2 = 47.68652571374621; 
 
 var boxWidth = x2  -  x1; 
 var boxHeight = y2  -  y1; 
 
 //现在我们需要计算出这个剩余部分，首先我们得到百分比
 // var posLeft = haversine（y3，x1，y3，x3）; //（x3  -  x1）; 
 var posLeft =（x3  -  x1）; 
 var posLeftPct =（posLeft / boxWidth）* 100; 
 
 // var posTop = haversine（y2，x3，y3，x3）; //（y2  -  y3）; 
 var posTop =（y2  -  y3）; 
 var posTopPct =（posTop / boxHeight）* 100; 
 
 box.append（'< img src =http://www.freeptools.com/mapster/icons/icon23.pngstyle =position：absolute; z-index：200; right：'+ posLeftPct +'％; top：'+ posTopPct +'％>'）; 
  

}

解决方案 div>

假设该区域是平行四边形，您需要知道该区域的3个顶点以及要绘制该针的区域的宽度/高度（例如平面布局图像）。

p>

以下将使用 Geo 和 LatLon - 库从 http://www.movable-type.co.uk/scripts/latlong .html

更好理解的图片：

最初计算一些值：

$ b $通过 LatLon.bearingTo

• 距离（sw到nw和ne到nw）通过 LatLon.distanceTo

现在计算交点（标记为交点-x和intersection-y通过 LatLon.intersection

计算结果为：

• intersection-x：
  
  LatLon.intersection（ne，bearingNWtoSW，target，bearingNWtoNE） code>


• intersection-y：
  
  LatLon.intersection（sw，bearingNWtoNE，target，bearingNWtoSW）
strong>





• border-north到目标：
  
  （（distanceNWtoNE-（target。 distanceTo（intersection-x）））* 100）/ distanceNWtoNE


• border-west到目标：
  
  （（distanceNWtoSW-（target.distanceTo（intersection-y）））* 100）/ distanceNWtoSW






最后根据给定的平面图的宽度/高度和以前的计算结果计算坐标



  X =（（宽* distanceB orderNorthToTargetInPercent）/ 100）; 
 y =（（height * distanceBorderWestToTargetInPercent）/ 100）; 
  

一种方法（扩展名为 LatLon ）执行所有这些计算：



  / ** 
 * @ param w图形的宽度
 * @param h图形的高度
 * @ param sw对象图形西南部的LatLon 
 * @ param nw对象图形西北部的LatLon 
 * @参数图形东北部的对象LatLon 
 * @返回带有x / y坐标的混合对象，或当LatLon在区域外时返回null 
 ** / 
 LatLon.prototype.translate = function（ w，h，sw，nw，ne）{
 var x = {distance：nw.distanceTo（ne），bearing：nw.bearingTo（ne）}，
y = {distance：nw.distanceTo sw，轴承：nw.bearingTo（sw）}，
 intersectionY = LatLon.intersection（sw，x.bearing，this，y.bearing），
 intersectionX = LatLon.intersection（ne，y。轴承，这个，x.bearing），
 distanceX，distanceY;如果（intersectionX&& intersectionY）{
 distanceX =（（x.distance-（this.distanceTo（intersectionX）））* 100）/ x.distance，$ b $（
 
） b distanceY =（（y.distance-（this.distanceTo（intersectionY）））* 100）/y.distance; 
 return {x：（（w * distanceX）/ 100），y：（（h * distanceY）/ 100）}; 
} 
返回null; 
}; 
  

演示： b将突出显示的平面图放在谷歌地图上以查看计算结果（google-Maps-API仅用于演示，计算将在不使用Maps-API的情况下完成）


I apologize for the vague title, I really can't figure out a batter way to sum it up. Suggestions are more than welcome.

I'm working on a project that really doesn't NEED a google map, it'd just create extra overhead for this project. But, I can't figure out how to do this WITHOUT google maps... so far.

If I were to place a graphical overlay of a floor plan into google maps, I could use a browser location to approximate a users position. For this, it's a VERY large place, so there's room for some poor accuracy.

Now what I'm trying to do is knowing the bounding of that overlay, place the image into a div, then calculate the users position in the div based on their browser lat/lng.

I'm able to get close using an image that is square in that the top of the sides are horizontal and vertical, because that crates my area. But since none of the world works like that, I need an area that isn't square to appear squared. I'm really struggling on the math.

Here's what I'm trying to do!

And here's a link that tests my concept, but doesn't account for an image that needs to be rotated on a map: http://www.freeptools.com/mapster/singlerun/maptest.php

Like I said, I'm sure that this can be done, but I haven't been able to figure out the math for it just yet. It's driving me crazy.

Here's my code that's doing the magic. A function gets the browser coordinates and sends them to the initialize function. Then based on mapping it myself earlier, I have the bounds of the image I'm trying to map. I'm using the haversine formuls to try to get the height and width at the points of the user (since the map curves, it'll be inaccurate anywhere else) position, then the distance from the top and left most points, then taking the distance from the left/top and dividing it by the width/height to get a percentage of how far they are from the left/top to position the dot. This idea, while I can't get it to be super accurate, works in this example, because the image lines up horizontally on a map. My problem is how do I calculate those distances when the image is rotated on a map? I can't figure out that math.

function initialize(y3, x3) { //lat, lon

//var overlayBounds = new google.maps.LatLngBounds(new google.maps.LatLng(41.11246878918085, -90.5712890625), new google.maps.LatLng(47.68652571374621, -82.001953125));
var box = $("#map_canvas");

//image bounds
var x1 = -82.001953125;
var x2 = -90.5712890625;
var y1 = 41.11246878918085;
var y2 = 47.68652571374621;

var boxWidth = x2 - x1;
var boxHeight = y2 - y1;

//now we need to figure out where this rests, first we get the percentage
//var posLeft = haversine(y3, x1, y3, x3); //(x3 - x1);
var posLeft = (x3 - x1);
var posLeftPct = (posLeft/boxWidth)*100;

//var posTop = haversine(y2, x3, y3, x3); //(y2 - y3);
var posTop = (y2 - y3);
var posTopPct = (posTop/boxHeight)*100;

box.append('<img src="http://www.freeptools.com/mapster/icons/icon23.png" style="position:absolute; z-index:200; right:'+posLeftPct+'%; top:'+posTopPct+'%">');

}

解决方案

Assuming the area is a parallelogram, you'll need to know 3 of the vertices of the area and the width/height of the area where you want to draw the pin(e.g. the floorplan-image).

The following will use the Geo-and LatLon-libraries from http://www.movable-type.co.uk/scripts/latlong.html

An image for better understanding:

initially calculate some values:

• bearings(nw to sw and nw to ne) via LatLon.bearingTo
• distances(sw to nw and ne to nw) via LatLon.distanceTo

now calculate the intersections(marked as intersection-x and intersection-y in the image) via LatLon.intersection

The calculation would be:

• intersection-x:
  LatLon.intersection(ne, bearingNWtoSW, target, bearingNWtoNE)
• intersection-y:
  LatLon.intersection(sw, bearingNWtoNE, target,bearingNWtoSW)

now calculate percentual values for the distance of border-north to target and border-west to target:

• border-north to target:
  ((distanceNWtoNE-(target.distanceTo(intersection-x)))*100)/distanceNWtoNE
• border-west to target:
  ((distanceNWtoSW-(target.distanceTo(intersection-y)))*100)/distanceNWtoSW

Finally calculate the coordinates based on the width/height of the given floorplan and the results of the previous calculation

x=((width*distanceBorderNorthToTargetInPercent)/100);
y=((height*distanceBorderWestToTargetInPercent)/100);

A method(extension of the mentioned LatLon-library) that performs all these calculations:

/**
  *@param w int width of the drawing
  *@param h int height of the drawing
  *@param sw object LatLon of southwest of the drawing     
  *@param nw object LatLon of northwest of the drawing     
  *@param ne object LatLon of northeast of the drawing
  *@return mixed object with x/y-coordinates or null when LatLon is outside of the area        
  **/  
LatLon.prototype.translate = function(w,h,sw,nw,ne) {
    var x = {distance:nw.distanceTo(ne),bearing:nw.bearingTo(ne)},
        y = {distance:nw.distanceTo(sw),bearing:nw.bearingTo(sw)},
        intersectionY = LatLon.intersection(sw, x.bearing, this, y.bearing),
        intersectionX = LatLon.intersection(ne, y.bearing, this, x.bearing),
        distanceX,distanceY; 

    if(intersectionX && intersectionY){
       distanceX=((x.distance-(this.distanceTo(intersectionX)))*100)/x.distance,
       distanceY=((y.distance-(this.distanceTo(intersectionY)))*100)/y.distance;
       return {x:((w*distanceX)/100),y:((h*distanceY)/100)};
    }
    return null;
};

Demo:http://jsfiddle.net/doktormolle/nsbqpcvg/embedded/result/
Hover the highlighted floorplan on the google-map to see the result of the calculation(the google-Maps-API is only used for the demonstration, the calculation will be done without using the Maps-API)

这篇关于基于已知的lat和lng点在图像上放置点的失败尝试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！