Positioning geographic coordinates to model

[m.ali]

Hi, I need help in the following problem:

I am working on a GIS solution and my objective is to create an automation system that accepts an array of coordinates (lat\lng) and outputs a maquette. i.e; I am adding a virtual 3d dimension to the array of points (lat\lng). The problem is when plotting the geographic coordinates array, the result looks like a one point because it's geographic and the distance on earth is very small. What I want is a way to plot the geographic coordinates on the world space but outputs a real corresponding 3d geometry. 

 

 

here is the array of lats-lngs:

[50.030462313669034, 26.467167212377877],
[50.03022756277145, 26.467086619328583],
[50.03012167613479, 26.467340955119003],
[50.03035641750763, 26.46742153925565],
[50.030462313669034, 26.467167212377877]

 

 

Note that the difference between the first X and the second X is very small that equals => 0.00023 that when plotting it on BABYLON space looks if the first and second point are the same.

I have tried a lot of mathematical normalization ways, to fix this but in vain.

"my only condition is to preserve the ratio of objects positions".

If any mate can help or suggests a solution. I would be very grateful. Thanks in advance.

 

 

 

[max123]

Just a thought: if coordinates a so close, can't you simply discard integers and a couple of floating values and deal with remaining values?
E.g:
50.030462313669034 -> 4.6
50.03022756277145 -> 2.3

[Samuel Girardin]

hi @m.ali

hi you can try that  : https://www.babylonjs-playground.com/#4E3KJK#2

It comes from BING map API. Works like a charm.

 

var levelOfDetail = 18 //between 1 and 22 give your lat long in pixel in map tile. You can use that 
//to got some correct 2d value for positionning your object
// 1 is 782715170 meters/pixel
// 22 is 0.0373 meter/pixel
// 18 p1.subtract(p2) give me something like (-15,68) , you can work with that
// 20 more precise give (-60 , 272) .




var a=   LatLongToPixelXY(50.030462313669034, 26.467167212377877,levelOfDetail) ; 
var b =  LatLongToPixelXY(50.03022756277145, 26.467086619328583,levelOfDetail) ; 
  
console.log(b.subtract(a)) ; 


var  clip = function (n, minValue, maxValue) {
        return Math.min(Math.max(n, minValue), maxValue);
    }


     var  mapSize = function(levelOfDetail) {
        return 256 << levelOfDetail;
    }

var MinLatitude = -85.05112878;
var MaxLatitude = 85.05112878;
var MinLongitude = -180;
var MaxLongitude = 180;

 var LatLongToPixelXY=function(latitude, longitude, levelOfDetail) {

        latitude = clip(latitude, MinLatitude, MaxLatitude);
        longitude = clip(longitude, MinLongitude, MaxLongitude);

        var x = (longitude + 180) / 360;
        var sinLatitude = Math.sin(latitude * Math.PI / 180);
        var y = 0.5 - Math.log((1 + sinLatitude) / (1 - sinLatitude)) / (4 * Math.PI);

        var mapsize = mapSize(levelOfDetail);
        var pixelX = clip(x * mapsize + 0.5, 0, mapsize - 1);
        var pixelY = clip(y * mapsize + 0.5, 0, mapsize - 1);
        console.log("x",pixelX) ;
        console.log("y",pixelY) ;
        console.log("____________") ;
        return new BABYLON.Vector2(pixelX, pixelY);

    };

sam

[m.ali]

@max123 

Thanks. But It does not work. I have tried it before, and this actually results distortions.

[m.ali]

Thanks @Samuel Girardin

But it is actually does not work, I tell you why => 
The code you wrote converts geographic coordinates into screen point coordinates 

and this results points that when plotting them they look like if the 4 points are the same point. 

You can examine it yourself. Use this online tool https://technology.cpm.org/general/3dgraph/ to plot the resulted points and watch it yourself. Thanks in advance

[Samuel Girardin]

@m.ali  It actually works. Here is a castel  : maps    

I get quickly the lat/loncoordinates of the 8 towers. Here is the playground : https://www.babylonjs-playground.com/#4E3KJK#5

 

 

[JohnK]

 

2 hours ago, max123 said:

Just a thought: if coordinates a so close, can't you simply discard integers and a couple of floating values and deal with remaining values?
E.g:
50.030462313669034 -> 4.6
50.03022756277145 -> 2.3

 

1 hour ago, m.ali said:

@max123 

Thanks. But It does not work. I have tried it before, and this actually results distortions.

 

The idea of looking at what is happening several decimal places in is sound. However just throwing away the leading figures will not work as you could be disregarding different quantities each time. You need to subtract a consistent quantity each time before scaling up.

https://www.babylonjs-playground.com/#YCF2QS

 

[m.ali]

@Samuel Girardin

I am very very grateful to you. It helped me. Working like charm my friend.

@JohnK

Thanks. You have provided me with an alternative working & helpful workaround.

 

I am very thanksful to you both.

 

Goodbye