CesiumJS
- CesiumJS 是一个开源的 JavaScript 库，它用于在网页中创建和控制 3D 地球仪（地图）
-
CesiumJS 官网：https://www.cesium.com/
-
CesiumJS 下载地址：https://www.cesium.com/platform/cesiumjs/
-
CesiumJS API 文档：https://cesium.com/learn/cesiumjs/ref-doc/index.html
一、计算 X 轴与 Y 轴偏移距离（Cartesian3.distance）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>距离 - 计算 X 轴与 Y 轴偏移距离（Cartesian3.distance）</title><link rel="stylesheet" href="../js/Cesium-1.112/Build/Cesium/Widgets/widgets.css" /><style>* {margin: 0;padding: 0;box-sizing: border-box;}html,body {width: 100%;height: 100%;}.container {width: 100%;height: 100%;}</style></head><body><div id="container"></div></body><script src="../js/Cesium-1.112/Build/Cesium/Cesium.js"></script><script>const viewer = new Cesium.Viewer("container");const calculateDistance = (start, end) => {const newStart = Cesium.Cartesian3.fromDegrees(start.longitude, start.latitude);const newEnd1 = Cesium.Cartesian3.fromDegrees(end.longitude, start.latitude);const newEnd2 = Cesium.Cartesian3.fromDegrees(start.longitude, end.latitude);return {x: Cesium.Cartesian3.distance(newStart, newEnd1),y: Cesium.Cartesian3.distance(newStart, newEnd2),};};const point1 = {longitude: -75.59777,latitude: 40.03883,};const point2 = {longitude: -76.59777,latitude: 41.03883,};const entity1 = viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(point1.longitude, point1.latitude),point: {pixelSize: 5,color: new Cesium.Color(0, 1, 0, 1),},});const entity2 = viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(point2.longitude, point2.latitude),point: {pixelSize: 5,color: new Cesium.Color(0, 1, 0, 1),},});// 设置相机当前正在跟踪的实体实例viewer.trackedEntity = entity1;const result = calculateDistance(point1, point2);console.log("X 轴偏移距离为（米）：", result.x);console.log("Y 轴偏移距离为（米）：", result.y);</script>
</html>
二、计算 X 轴与 Y 轴偏移距离（EllipsoidGeodesic）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>距离 - 计算 X 轴与 Y 轴偏移距离（EllipsoidGeodesic）</title><link rel="stylesheet" href="../js/Cesium-1.112/Build/Cesium/Widgets/widgets.css" /><style>* {margin: 0;padding: 0;box-sizing: border-box;}html,body {width: 100%;height: 100%;}.container {width: 100%;height: 100%;}</style></head><body><div id="container"></div></body><script src="../js/Cesium-1.112/Build/Cesium/Cesium.js"></script><script>const viewer = new Cesium.Viewer("container");const calculateDistance = (start, end) => {const newStart = Cesium.Cartographic.fromDegrees(start.longitude, start.latitude);const newEnd1 = Cesium.Cartographic.fromDegrees(end.longitude, start.latitude);const newEnd2 = Cesium.Cartographic.fromDegrees(start.longitude, end.latitude);const geodesic1 = new Cesium.EllipsoidGeodesic();const geodesic2 = new Cesium.EllipsoidGeodesic();geodesic1.setEndPoints(newStart, newEnd1);geodesic2.setEndPoints(newStart, newEnd2);return {x: geodesic1.surfaceDistance,y: geodesic2.surfaceDistance,};};const point1 = {longitude: -75.59777,latitude: 40.03883,};const point2 = {longitude: -76.59777,latitude: 41.03883,};const entity1 = viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(point1.longitude, point1.latitude),point: {pixelSize: 5,color: new Cesium.Color(0, 1, 0, 1),},});const entity2 = viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(point2.longitude, point2.latitude),point: {pixelSize: 5,color: new Cesium.Color(0, 1, 0, 1),},});// 设置相机当前正在跟踪的实体实例viewer.trackedEntity = entity1;const result = calculateDistance(point1, point2);console.log("X 轴偏移距离为（米）：", result.x);console.log("Y 轴偏移距离为（米）：", result.y);</script>
</html>