Google Tiles: Add Lat / Lon display (#338)

* Add lat lon utility

* Add display of latitude / longitude

* Fix lat lon handling

example/googleMapsExample.html

@@ -45,9 +45,10 @@
 				bottom: 0;
 				left: 0;
 				color: white;
-				font-size: 10px;
+				font-size: 12px;
 				opacity: 0.5;
 				padding: 5px;
+				line-height: 1.25em;
 			}
         </style>
     </head>

example/googleMapsExample.js

@@ -25,6 +25,7 @@ import { GlobeOrbitControls } from './GlobeOrbitControls.js';
 import { WGS84_RADIUS, WGS84_HEIGHT } from '../src/base/constants.js';
 import { EllipsoidRegionHelper } from '../src/index.js';
 import { MapsTilesCredits } from './src/MapsTilesCredits.js';
+import { GeoCoord } from './src/GeoCoord.js';
 
 const apiOrigin = 'https://tile.googleapis.com';
 
@@ -40,6 +41,7 @@ const raycaster = new Raycaster();
 raycaster.firstHitOnly = true;
 const pointer = new Vector2();
 const deltaTarget = new Vector3();
+const geocoord = new GeoCoord();
 
 let prevDist = 0;
 
@@ -547,7 +549,9 @@ function render() {
 
 	if ( credits ) {
 
-		document.getElementById( 'credits' ).innerText = credits.getCredits();
+		const mat = tiles.group.matrixWorld.clone().invert();
+		const vec = camera.position.clone().applyMatrix4( mat );
+		document.getElementById( 'credits' ).innerText = geocoord.fromVector3( vec ).toString() + '\n' + credits.getCredits();
 
 	}
 

example/src/GeoCoord.js

@@ -0,0 +1,97 @@
+import { MathUtils, Spherical, Vector3 } from 'three';
+import { swapToGeoFrame, swapToThreeFrame, sphericalPhiToLatitude, latitudeToSphericalPhi } from './GeoUtils.js';
+
+function getHoursMinutesSeconds( value, pos = 'E', neg = 'W' ) {
+
+	const direction = value < 0 ? neg : pos;
+	value = Math.abs( value );
+
+	const hours = ~ ~ value;
+
+	const minDec = ( value - hours ) * 60;
+	const minutes = ~ ~ minDec;
+
+	const secDec = ( minDec - minutes ) * 60;
+	const seconds = ~ ~ secDec;
+
+	return `${ hours }° ${ minutes }' ${ seconds }" ${ direction }`
+
+
+}
+
+// lat = [ -90, 90 ], lon = [ -180, 180 ]
+const _vec = new Vector3();
+const _spherical = new Spherical();
+export class GeoCoord {
+
+	constructor( lat = 0, lon = 0 ) {
+
+		this.lat = lat;
+		this.lon = lon;
+
+	}
+
+	fromSpherical( spherical ) {
+
+		this.lon = spherical.theta;
+		this.lat = sphericalPhiToLatitude( spherical.phi );
+		return this;
+
+	}
+
+	getSpherical( target ) {
+
+		target.theta = this.lon;
+		target.phi = latitudeToSphericalPhi( this.lat );
+		return this;
+
+	}
+
+	fromVector3( vector ) {
+
+		swapToThreeFrame( vector );
+
+		_spherical.setFromVector3( vector );
+		this.fromSpherical( _spherical );
+		return this;
+
+	}
+
+	getVector3( target ) {
+
+		this.getSpherical( _spherical );
+		target.setFromSpherical( _spherical );
+
+		swapToGeoFrame( target );
+
+		return this;
+
+	}
+
+	normalize() {
+
+		this.getVector3( _vec );
+		this.fromVector3( _vec );
+		return this;
+
+	}
+
+	toLatitudeString() {
+
+		return getHoursMinutesSeconds( MathUtils.RAD2DEG * this.lat, 'N', 'S' );
+
+	}
+
+	toLongitudeString() {
+
+		return getHoursMinutesSeconds( MathUtils.RAD2DEG * this.lon, 'E', 'W' );
+
+	}
+
+	toString() {
+
+		return `${ this.toLatitudeString() }, ${ this.toLongitudeString() }`;
+
+	}
+
+}

example/src/GeoUtils.js

@@ -0,0 +1,29 @@
+export function swapToGeoFrame( target ) {
+
+	const { x, y, z } = target;
+	target.x = z;
+	target.y = x;
+	target.z = y;
+
+}
+
+export function swapToThreeFrame( target ) {
+
+	const { x, y, z } = target;
+	target.z = x;
+	target.x = y;
+	target.y = z;
+
+}
+
+export function sphericalPhiToLatitude( phi ) {
+
+	return - ( phi - Math.PI / 2 );
+
+}
+
+export function latitudeToSphericalPhi( latitude ) {
+
+	return - latitude + Math.PI / 2;
+
+}