Leaft JS / LOTR 運動挑戰

English / Chinese

In this section I want to share with you all how I was able to find the point between any line segment where a user was standing. For the fitness challenge that is covering a whopping 1779 miles obviously we want to know where we truly are in relation to our goal. This is complicated by a few things, such the image size, and map coordinates generated by Leaflet JS. We also don't know much about the map. Luckily I can use the distance formula along the path with two key points of data: 1.) The total journey in the books/movies was 1779 miles. 2.) The distance from Hobbiton to Bree is 120 miles.

我想和大家分享如何找到用戶站立的任意線段之間的點。對於覆蓋了整整1779英里的健身挑戰,我們顯然想知道我們與目標之間的真實位置。 這被一些因素所複雜化,例如圖像大小和由Leaflet JS生成的地圖坐標。我們對地圖也了解不多。 幸運的是,我可以使用路徑上的距離公式和兩個關鍵數據點:1.) 書籍/電影中的總旅程為1779英里。2.) 從霍比屯到布里的距離是120英里。

So using a for loop to take care of that I can find one mile is roughly 0.62259 units on the map. And I can confirm this by setting a test user 120 miles out and they spawn in Bree. Jackpot! So now the main reason why you're here, how do I track and update where the user is? And how can you make you own similar non-GEO-location based path to follow for your own adventures our purposes?

所以使用一個 for loop 來處理這個問題,我可以找到地圖上大約1英里等於0.62259個單位。我可以通過將測試用戶設置在120英里外確認這一點,他們將出現在布里。大成功! 那麼現在你來這裡的主要原因是什麼,我如何跟踪和更新用戶的位置?以及如何為您自己的冒險目的創建類似的非地理位置基礎的路徑?

This one is the real meat and potatoes of the post, and is probably why you're here. So obviously we know the start and end points for each segment but where does a user fit into this equation?

Well for one we know Distance Traveled = miles * 0.6225992899788222.....that wont give you a point. So by checking the distance of each segment and adding that up until you find a number larger than the user's distance we can find the precise segment on the line. But the point needs a bit more than just distance formulas and a distance. Because our line is not straight, it goes in all directions and changes frequently.

這一段是這篇文章的真正重點,也可能是您在這裡的原因。顯然,我們知道每個段落的起點和終點 對於這個方程式中的用戶來說,他們位於哪裡?首先我們知道已經行駛的距離 = 英里數 * 0.6225992899788222.....但這不會給你一個點。 所以通過檢查每個段落的距離並加總,直到找到一個比用戶的距離更大的數字,我們可以在線上找到精確的段落。 但是這個點需要的不僅僅是距離公式和距離。因為我們的線並不是直的,它朝各個方向延伸並且經常變化。

We need to use Euler’s Formula and Trigonometry to solve this. So we need to angle of the line using Sin Theta and Cos Theta to find the X and Y coordinates of the point. With a detailed explanation here in case you need a quick brush up on trig. https://www.math.columbia.edu/~woit/eulerformula

最後一部分:我們需要使用歐拉公式和三角學來解決這個問題。因此,我們需要使用Sin Theta和Cos Theta來求解線的角度,以找到 點的X和Y坐標。這裡有一個詳細的解釋,以防您需要快速複習一下三角學。