cesiumjs

Cesium convert lat lon to x and y

I am looking to turn 2 lat/lon positions into an x and y distance of the canvas, then apply the distance formula to it.

Right now I have:

const leftPoint = new LatLon(center.lat, center.lon).destinationPoint(semiMajorAxis, 270);
                const rightPoint = new LatLon(center.lat, center.lon).destinationPoint(semiMajorAxis, 90);
                const leftXY = Cartographic.toCartesian(Cartographic.fromDegrees(leftPoint.lon, leftPoint.lat));
                const rightXY = Cartographic.toCartesian(Cartographic.fromDegrees(rightPoint.lon, rightPoint.lat));
                const diameter = distanceFormula(leftXY.x, leftXY.y, rightXY.x, rightXY.y);

But the result of diameter is 18,000, even though both points are on my screen!

Solution

  • Cesium's Cartographic.toCartesian function converts a Cartographic (lon/lat/alt) type of coordinate to a full 3D Cartesian position. Imagine X, Y, Z with zero being the center of the Earth itself, with the Earth's surface being approximately 6.3 million meters in any direction.

    If you're looking for 2D canvas / screen coordinates, you must follow this call with another function, Cesium.SceneTransforms.wgs84ToWindowCoordinates. That function converts the 3D WGS84 (Cartesian3) Earth position into a 2D (Cartesian2) screen position. There's a demo of wgs84ToWindowCoordinates being used in the Sandcastle Star Burst Example around line 287.

    Also it looks like you've rolled your own LatLon class, not specified above, that appears to have similar functions to Cesium's Cartographic class. You might be able to make the code a little cleaner by using Cartographic directly instead of a homebrew class there. Likewise you don't need to roll your own distanceFormula on the last line. Once you have 2D Cartesian2 window coordinates, call Cesium.Cartesian2.distance to get the distance.