Convert Latitude / Longitude to Tube Geometry

[Garreta11]

Hi,

I have a JSON file with many coordinates (latitude, longitude, and elevation). These coordinates are very close together on the map, meaning that the values don’t change much.

What I want to do is draw a TubeGeometry with these coordinates, in other words, create a THREE.CatmullRomCurve3 with them.

I’ve tried two methods, but neither gives me a 100% satisfactory result:

The first method I tried is to directly pass the latitudes and longitudes to Vector3. However, the result I get is just a point (I suppose this happens because the coordinates are very close).

The second method is to calculate the minimum and maximum longitude and map each one between 0 and 1. Then I multiply it by a value to scale it.

coordinates.forEach((coordinate, index) => {
    const scale = 100000

    const lat = scale * mapValue(coordinate.latitude, minLatitude, maxLatitude, 0, 1)
    const lon = scale * mapValue(coordinate.longitude, minLongitude, maxLongitude, 0, 1)

    let vectorToPush = new THREE.Vector3(
        lat,
        lon,
        0.0
    )
    
    setPoints(prevVectors => [...prevVectors, vectorToPush]);
})

With this second method, I get a shape similar to the desired one, but it’s not exact.

Does anyone know how I can correctly convert longitude and latitude into 3D coordinates?

Thanks a lot!

[anidivr]

You’re on the right track with scaling. I assume mapValue is a wrapper around MathUtils.mapLinear.

Can you show what you mean by “its not exact”,

Do you have a codesandbox with the scaled coordinates to repeat the problem you’re seeing?

[Garreta11]

Hi @anidivr

so here you have the codesandbox that i have created bahrain - CodeSandbox

As you can see, the JSON result (green) should have the same shape (or more similar) as the 3D mesh.
I am converting the latitude and longitude to line points correctly?

thanks for your help!

[anidivr]

After getting the curve, use getPoints(divisions) to smooth it out. Try the default, if that doesn’t help, try a higher value, but as the cost of more geometry. Depending on the spacing of your points, there’s usually diminishing returns for division values higher than 20.

curvepoints = curve.getPoints(20);

Here’s an example at 5

At 10

At 15

Hope this helps