How to get real coordinates in OpenLayers? - javascript

In OpenLayers I use the ol.source.XYZ.
So I use a own URL with the Variables {x} {y} {z} and {a-z}. I want to render some pics with another Webserver.
But I don't understand what the Variables x y and z does tell me..
I need Coordinates in lat and lon. for example: 10.1234567 and 9.1234567. Google cant tell me, whether I can convert this? Or should I just use another OpenLayers solution?
OpenLayers give me the following values for example:
x=3, y=262144, z=19

These coordinates are tile coordinates. x and y are the column and row in the tile grid, and y is the zoom level. If you need to know latitude and longitude of the tile corners, you can use
var extent = source.getTileGrid().getTileCoordExtent([z, x, y]);
This will give you the extent in the view projection. To convert to geographic coordinates, use
ol.proj.transformExtent(extent, map.getView().getProjection, 'EPSG:4326');

Related

Determine 3D Longitude and Latitude based on radius, x and y 3D globe THREE.js

Currently I am trying to understand a Codpen where this guy has JSON data being fed into a Javascript app that plots coordinates using x and y.
Instead of using longitude and latitude to plot for example Hong Kong, he uses these coordinates.
{"x": 768,"y": 342,"name": "", "country":"Hong Kong"}
I want to be able to put in x and y a longitude and latitude value, but I can not figure out how to multiply or divide, a simple solution to go with his code. I am new to Javascript, but am trying to understand how to plot coordinates more efficiently on this specific project.
Is there a simple equation I could use to be able to plot more easily on this pen.
Thanks.
https://codepen.io/Flamov/pen/MozgXb
The example is basically using the Mercator Projection to convert radius, lat, long into euclidean x, y, z coordinates, as mentioned on lines 860+ of the JSFiddle you provided, and is using this S.O. answer as reference. Since radius is constant throughout the globe, you don't need to repeat that value for each point, it's just hard-coded into the example.
Mercator is a bit confusing because the scale stretches towards infinity as you approach the poles. As an easier alternative, you could use Vector3.setFromSphericalCoords(rad, lat, long) as outlined in the docs and it sets x, y, z for you. The main difference is that this approach doesn't cause distortion near the poles. It takes lat, long in radians:
lat ranges from [0, Pi] (north pole to south pole)
long ranges from [0, 2*Pi] (around the equator)

Coordinates to Lat Long in Leaflet

I'm here because I'm trying to create a GTA V map with Leafletjs API. In deed, I've got my tiles that are ready. But the aim is to put markers on the map by using GTA V in-game coordinates. To achieve it, I need to convert the coordinates to LatLong but after many researches, I can't find a solution.
Example :
Thanks in advance.
Your coordinates are coming from different map projections. The Leaflet ones are most probably standard WGS 84 (SRID 4326). GTA V coordinates are obviously based on a different projection.
Coordinates can be transformed from one projection to anothers. But you need to know, which projection your coordinates are coming from, to do the math.
Here is an online converter provided with some common projections, and i tried your coordinates, but had no luck in coming close with these projections.
I tried this:
var latlng = new L.latLng(-43.1731, 6.6906);
var point = L.Projection.Mercator.project(latlng);
console.log(point);
// o.Point {x: 744794.1851014761, y: -5309112.129212381}
It is not close to your GTA V coordinates, but I'm not sure it were just for example.
You can use L.latlng function
http://leafletjs.com/reference.html#latlng

Get Minimum bounds of 4 LatLon

I have 4 Lat Lon positions. They represent a (rotated) rectangular region. But due to some calculation errors, sometimes they are not proper rectangular.
I want to convert those into (rotated) rectangular regions.
See Image for more clarification
In the above image I want the lat lon of the corners of the rectangle drawn given 4 lat lon as shown on the left side.
I tried searching but couldn't find any solution. Most of the solutions did not take care of rotated rectangle case.
How do I solve this problem ?
Note : Are there any libraries that does this, I am using JavaScript for implementation.
Note : I don't know if my question is more related to math.
Note : This is the particular solution that I used. It may not be perfect but it works.
Algorithm :
Calculate the distance between 1, 3 and 1, 2 lat lon from the image. This would give you 2 distances.
Find the coordinates along which the distance is greater. (In here lets consider the distance between 1 and 3 is greater.)
Find the bearing between those considered coordinates
Consider any coordinate as origin. (I choose coordinates of 3 as the origin for my case).
Rotate all points 1,2,3,4 along the origin with rotation angle as bearing. Here the rotation makes the considered points (here 1 and 3) to be parallel to the x axis.
Now you get 4 new coordinates. Find the minimum and maximum x and y from those 4 coordinates (consider them to be minX, minY, maxX, maxY).
The (minX, minY) gives you the top left coordinates of the rectangle and (maxX, maxY) gives you the bottom right coordinates of the rectangle. Using this information you can find the other two coordinates.
Now rotate these 4 new coordinates along the same origin but with rotation angle as -bearing. These are the vertices of the dotted rectangle in the image.
Note : This may not be perfect as I have not considered the earth radius and other complications associated with latitude, longitudes. But in my case the lat lon were pretty close to each other, and I wasn't interested in accuracy.
Hope some of us find it useful.

If I have one lat/lng which I assume is at 0,0 then how do I calculate the x, y coordinates of another lat/lng pair?

I've seen many variations of this question asked but am having trouble relating their answers to my specific need.
I have several sets of 3 lat/lng coordinate pairs. The coordinates in any set are within a few km of eachother.
For each set I would like to convert the coordinates to x/y values so that I can plot them.
I would like to assign 1 of the coordinates to 0,0 and then compute the relative x/y values of the other two coordinates.
This site does what I want but unfortunately doesn't share the algorithm:
http://www.whoi.edu/marine/ndsf/cgi-bin/NDSFutility.cgi?form=0&from=LatLon&to=XY
First some definitions just to be clear
let a be latitude <-pi/2,+pi/2>
let b be longitude <0,+2*pi>
let re,rp be equator and pole radiuses of Earth
a0,b0, a1,b1, a2,b2 are your points in spherical coordinates
and x0,y0, x1,y1, x2,y2 are your wanted cartesian coordinates
convert coordinates to relative to (a0,b0)
Leta assume East is aligned to your X-axis and North pole is aligned to Y-axis
x0=0.0;
y0=0.0;
r1=re*cos(a1)+rp*sin(a1) // actual radius for point 1
r2=re*cos(a2)+rp*sin(a2) // actual radius for point 2
x1=x0+((b1-b0)*r1);
x2=x0+((b2-b0)*r2);
y1=y0+((a1-a0)*re); // here instead of re should be length of ellipse curve from 0 to a1-a0
y2=y0+((a2-a0)*re); // here instead of re should be length of ellipse curve from 0 to a2-a0
if re!=rp then the y1,y2 coordinates will be less accurate
to correct that just replace ((a1-a0)*re) with the propper formula
for ellipse arc->length computation (this one is for circle)
I am too lazy to compute that integral
anyway even this is good enough (earth eccentricity is not that bad)
you also can normalize the angles after substraction
while (a<-pi) a+=2.0*pi;`
while (a>+pi) a-=2.0*pi;`
just to be safe ...
Actually, that's not entirely true. The site does share the algorithm, just not in the way one would expect to.
See http://www.whoi.edu/marine/ndsf/utility/NDSFutility.js .
Hope that helps.

How to find point by input search in WebGL?

I'm going to create 3D Earth with search input. Could someone guide how to write code that finds point (exact place point) by input search, using WebGL?
I think your question is really vague but I can imagine that what you want to do is to rotate your 3D Earth so the point you queried for appears in the center of the view (or what it is the same, on the view axis of the camera).
To do it you need to:
assign every landmark a set of
spherical coordinates
given that you are locating
points on the surface of the sphere
you can forget about the radius and
only assign elevation and
azimuth to each point.
then you write the code for the
user to input the point of interest.
Say "Rome".
you look for this point in a
javascript array and recover the
elevation and the azimuth values
you apply the correspondent
rotations to your Model-View Matrix. Assuming you are using glMatrix you
should have something like this:
var M = mat4.create();
var Y_axis = [0,1,0];
var X_axis = [1,0,0];
mat4.rotate(M,azimuth,Y_axis);
mat4.rotate(M,elevation,X_axis);
the point of interest should be
displayed now

Categories

Resources