I'm building a globe(sphere geometry) with set of predefined locations on geo-mapped and drawn as point(sphere geometry). I would like to focus(moving one location to another) those locations by rotating globe along y-axis. I tried the following code, seems not working for all locations.
location.geometry.computeBoundingBox();
var position = new THREE.Vector3();
position.subVectors( location.geometry.boundingBox.max, location.geometry.boundingBox.min );
position.multiplyScalar( 0.20 );
position.sub( location.geometry.boundingBox.min );
location.matrixWorld.multiplyVector3( position );
var point1 = scene.clone().position;
var point2 = position;
var distance = point1.distanceTo( point2 );
locationCollection.rotation.y = distance;
I think, I don't understand the concept enough. Hopefully, I will get some idea from the community.
Fiddle
var c = group.rotation.y;
var d = -b * (Math.PI / 180)%(2 * Math.PI);
var e = Math.PI / 2 * -1;
group.rotation.y = c % (2 * Math.PI);
group.rotation.x = a * (Math.PI / 180) % Math.PI;
group.rotation.y= d+e;
where a= latitude, b= longitude,group=Object3D(or sphere)
Related
I want to get coordinate (x,y) of a point B based on coordinate of point A and distance from the point A and an angle using Arcgis js API 4.x .
For example : i have point A in (a,b) the distance between A and B is 500m and the angle is 20°, how can i get (x,y) of B.
i fount the equation here, i implemented it and it works perfectly.
this is my simple :
const R = 6371e3; //rayon of the erth
let lat1 = 36.7538 * Math.PI / 180; // latitude in rad
let long1 = 3.0588 * Math.PI / 180; // longiture in rad
let d = 5000; //distance between the two points
let angle = (90-20)*Math.PI/180; // the angle between the 2 points in rad (20°)
const sigma = d / R;
const delLat = sigma * Math.cos(angle);
let lat2 = (lat1 + delLat) * 180 / Math.PI;//latitude of the destination point
const del = Math.log(Math.tan(lat2 / 2 + Math.PI / 4) / Math.tan(lat1 / 2 + Math.PI / 4));
// const q = Math.abs(del) > 10e-12 ? delLat / del : Math.cos(lat1);
const q = Math.cos(lat1)
const delLong = sigma * Math.sin(angle) / q;
let long2 = (long1 + delLong) * 180 / Math.PI; //longitude of the destination point
I'm using Leaflet.js to save coverage maps and am giving the user the option of using polygons or circles.
To keep all objects in the same format, I'm converting the circle to a polygon before saving.
However, when I then reload the circle it is oval-shaped.
I know that this is due to the earth's curve but I'm unsure how to correct my method to take this into account? (I've looked but can't find anything that gives the solution I'm after).
The main issue is the javascript method I'm using below as that doesn't take into account the earth's curve.
// GenerateCirlcePolygon - Creates Circle from 360 line Segments
function GenerateCirlcePolygon(origin, radius) {
var earthRadius = 6371;
//latitude in radians
var lat = (origin.Latitude * Math.PI) / 180;
//longitude in radians
var lon = (origin.Longitude * Math.PI) / 180;
//angular distance covered on earth's surface
var d = parseFloat(radius) / earthRadius;
polyPoints = new Array();
for (i = 0; i <= 360; i++) {
var point = new VELatLong(0, 0)
var bearing = i * Math.PI / 180; //rad
point.Latitude = Math.asin(Math.sin(lat) * Math.cos(d) + Math.cos(lat) * Math.sin(d) * Math.cos(bearing));
point.Longitude = ((lon + Math.atan2(Math.sin(bearing) * Math.sin(d) * Math.cos(lat), Math.cos(d) - Math.sin(lat) * Math.sin(point.Latitude))) * 180) / Math.PI;
point.Latitude = (point.Latitude * 180) / Math.PI;
polyPoints.push(point);
}
Any advice at all would be great.
You can use the built in function from leaflet-geoman: L.PM.Utils.circleToPolygon(circle, sides)
L.PM.Utils.circleToPolygon(circle, 60).addTo(map)
i´m playing arround with three.js
i want to render objects on specific geocoordinates on a bigger sphere, i´m pretty near to the solution, but i dont get the correct xyz position from lat lon
i have set up a test case on jsfiddle, there are two coordinates
latlons = [[40.7142700,-74.0059700], [52.5243700,13.4105300]];
its New York and Berlin
and this is my function to calc xyz from lat lon and radius
function calcPosFromLatLonRad(lat,lon,radius){
// Attempt1
var cosLat = Math.cos(lat * Math.PI / 180.0);
var sinLat = Math.sin(lat * Math.PI / 180.0);
var cosLon = Math.cos(lon * Math.PI / 180.0);
var sinLon = Math.sin(lon * Math.PI / 180.0);
var rad = radius;
y = rad * cosLat * sinLon;
x = rad * cosLat * cosLon;
z = rad * sinLat;
// Attempt2
// x = radius * Math.sin(lat) * Math.cos(lon)
// y = radius * Math.sin(lat) * Math.sin(lon)
// z = radius * Math.cos(lat)
// Attempt3
// latitude = lat * Math.PI/180
// longitude = lon * Math.PI/180
// x = -radius * Math.cos(latitude) * Math.cos(longitude)
// y = radius * Math.sin(latitude)
// z = radius * Math.cos(latitude) * Math.sin(longitude)
// Attempt4
// var phi = (90-lat)*(Math.PI/180);
// var theta = (lng+180)*(Math.PI/180);
// x = ((rad) * Math.sin(phi)*Math.cos(theta));
// z = ((rad) * Math.sin(phi)*Math.sin(theta));
// y = ((rad) * Math.cos(phi));
console.log([x,y,z]);
return [x,y,z];
}
but all attempts return different xy, and they are all not correct ( z is always correct).
could someone pleas guide me to the right way ?
i have no idea what could be wrong
heres the fiddle to play with
UPDATE: working jsfiddle
unfortunatly i can´t further explain, but after playing around this one works like a charme :)
function calcPosFromLatLonRad(lat,lon,radius){
var phi = (90-lat)*(Math.PI/180);
var theta = (lon+180)*(Math.PI/180);
x = -(radius * Math.sin(phi)*Math.cos(theta));
z = (radius * Math.sin(phi)*Math.sin(theta));
y = (radius * Math.cos(phi));
return [x,y,z];
}
yeah thats pretty cool isnt it ?
And i´m still interested into some shorter equation
working fiddle
This function works for me:
function calcPosFromLatLonRad(radius, lat, lon) {
var spherical = new THREE.Spherical(
radius,
THREE.Math.degToRad(90 - lon),
THREE.Math.degToRad(lat)
);
var vector = new THREE.Vector3();
vector.setFromSpherical(spherical);
console.log(vector.x, vector.y, vector.z);
return vector;
}
calcPosFromLatLonRad(0.5, -74.00597, 40.71427);
This particle cloud of sprites should sit to the right of the x-axis and above the y-axis. However, as you can see in this fiddle it mystifyingly hangs just below the y-axis and despite all my editing and rearranging and can't figure out what's going on here. I'd appreciate a fresh pair of eyes to help me out. Thanks!
Here is the basis for my math in the elliptical cloud.
function pointInEllipticalCloud(radiusA, radiusB, pZ) {
var pX = Math.random() * (radiusA * 2);
var rightBisector = Math.abs( radiusA - pX );
var chord = (2 * radiusB) * Math.sqrt(1 - Math.pow((rightBisector / radiusA), 2));
var pY = (Math.random() * chord) + ((radiusB - chord) / 2);
return new THREE.Vector3(pX, pY, pZ);
}
var pZ = 1;
var particleGroup = new THREE.Object3D();
for( var i = 0; i < 300; i++ ) {
var radiusA = 200;
var radiusB = 50;
var particle = new THREE.Sprite( spriteMaterial );
particle.scale.set( 20, 20, 1 );
var spritePoint = pointInEllipticalCloud(radiusA, radiusB, pZ);
// *** Why the resulting form hanging below the y axis?
particle.position = spritePoint ;
particleGroup.add( particle );
pZ += 0.1;
}
particleGroup.position.set(0,0,0);
scene.add( particleGroup );
Ah! Found it. The bug was in part of the calculation for pointInEllipticalCloud(). pY should instead equal this:
var pY = (Math.random() * chord) + (((radiusB * 2) - chord) / 2);
...where radiusB is multiplied by two to make it the vertical diameter of the ellipse.
I have a function to calculate the distance between two sets of latitude and longitude coordinates I get from the Google Maps API
Here is the calculate distance function:
function getDistance(lat1, lon1, lat2, lon2) {
var lat1p = parseFloat(lat1);
var lon1p = parseFloat(lon1);
var lat2p = parseFloat(lat2);
var lon2p = parseFloat(lon2);
var R = 6371; // km (change this constant to get miles)
var dLat = (lat2p-lat1p) * Math.PI / 180;
var dLon = (lon2p-lon1p) * Math.PI / 180;
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(lat1 * Math.PI / 180 ) * Math.cos(lat2 * Math.PI / 180 ) *
Math.sin(dLon/2) * Math.sin(dLon/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c;
if (d>1) return Math.round(d)+"km";
else if (d<=1) return Math.round(d*1000)+"m";
return d;
}
I believe all the coordinates are considered Float types I'm not 100% sure but when I have it print or alert what the distance is it returns NaN.... Is there a way to do this. I'm trying to stray away from the Google Maps API to calculate distance because that would make everything harder because I would essentially have to start over.
I'm sorry I fixed it I was double declaring variables as well as I had a . instead of a , when I called the distance function. Thank you guys for your suggestions they led me to figure it out.