Convert Lat Long to UTM

Questions
1

I created Plane geometry with earth map texture.
And i want to pin a maker on location with lat, lon.

Any example or code for convert lat lon to xy.

Thank you.

2

Lat to X:
((90 - lat) / 180) * width

Long to Y:
((180 - lng) / 180) * height

3

My PlaneGeometry( 400, 200, 32,32 );

And lat lon is, 26.6955048, 100.0288113 Lijiang

When i use your code a marker is wrong position.

Capture.PNG
Capture.PNG1266Ă—654 163 KB

4

You can use UTM-WGS84 converter here.

It works well if you’re not looking for precision (<10m). The closer you are to the edge of any zones, the less accurate it becomes.

5

If you can share a jsfiddle/codepen snippet I could check what’s wrong.

6

What you’re looking for is the specific projection of the map. There are a lot of these,

But I’d put my guess on Equirectangular, right at the top of the list. Which means you’re probably looking for the reverse transformations, found here,

Of course, there are a lot of constants in there that require some special map skills. Perhaps Mercator is a bit more optimized for your needs, even if it does have some pretty bad deformations. The other question is your x and y coordinates which will need to be scaled between both maps. Make sure you’re not grabbing x, y, z coordinates, you need the x-y coordinates of the map itself in two dimensions and scaled the same as the projection demands.

7

Yes, Please

8

I think this should do the trick :slight_smile: - tried it out on a number of locations and found that because we are centered around a latitude and longitude of 0, 0, we should be able to to just use a linear transformation between the coordinates. Everything else was just a matter of testing where the x and y locations were on that map. Admittedly, if you perform any transformations on the map, you will also need to do transformations on the position of the point as well. I’ve included a few comments that might help, though. You can probably also clean up a few of those equations by simplifying them.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var axesHelper = new THREE.AxesHelper(50);
scene.add( axesHelper );
scene.add(new THREE.AmbientLight(0x555555));

var texture = new THREE.TextureLoader().load('https://i.ibb.co/4KGwCLD/earth-atmos-2048.jpg');

var material = new THREE.MeshBasicMaterial( {map: texture, side: THREE.DoubleSide} );

var geometry = new THREE.PlaneGeometry( 400, 200, 32,32 );
var map = new THREE.Mesh( geometry, material );
scene.add( map );

var geometry = new THREE.SphereGeometry( 1, 10, 10 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var sphere_marker = new THREE.Mesh( geometry, material );

//Let's try Sydney Australia
let latitude = -33.8688; //North-South
let longitude = 151.2093; //East-West

//Remember that latitude goes between -90 degrees and +90 degrees
let normalizedLatitude = 2.0 * (((latitude + 90.0) / 180.0) - 0.5);
//Longitude goes between -180 and +180 on the other hand
let normalizedLongitude = 2.0 * (((longitude + 180.0) / 360.0) - 0.5);

//Our bounds along the x-axis are -200, to 200
//and along the x-axis are -100 to 100.
let x_location = normalizedLongitude * 200.0;
let y_location = normalizedLatitude * 100.0;
sphere_marker.position.set(x_location, y_location, 0.0);
scene.add( sphere_marker );

camera.position.z = 200;

var animate = function () {
	requestAnimationFrame( animate );
	renderer.render( scene, camera );
};

animate();
5 Likes
9

Thank you !

10

Welcome :slight_smile: