坐标系转换

1. WGS84 ↔ Cartesian3
2. 经纬度 ↔ 弧度
3. Cartesian3 ↔ 屏幕坐标
4. WGS84 ↔ Web 墨卡托投影
5. 计算直线距离（米）
6. 计算椭球面距离（沿地球表面）

展开代码

<template>
  <div ref="cesiumContainer" class="container"></div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as Cesium from "cesium";
const cesiumContainer = ref(null);
let viewer = null;

// 天地图TOKEN
const token = "05be06461004055923091de7f3e51aa6";

onMounted(() => {
  // 初始化Viewer
  viewer = new Cesium.Viewer(cesiumContainer.value, {
    geocoder: false, // 关闭地理编码搜索
    homeButton: false, // 关闭主页按钮
    sceneModePicker: false, // 关闭场景模式选择器
    baseLayerPicker: false, // 关闭底图选择器
    navigationHelpButton: false, // 关闭导航帮助
    animation: false, // 关闭动画控件
    timeline: false, // 关闭时间轴
    fullscreenButton: false, // 关闭全屏按钮
    baseLayer: false, // 关闭默认地图
  });
  // 清空logo
  viewer.cesiumWidget.creditContainer.style.display = "none";
  initMap();

  // 1. WGS84 ↔ Cartesian3

  // 经纬度转笛卡尔坐标
  const cartesian = Cesium.Cartesian3.fromDegrees(
    116.3975, // 经度（度）
    39.9075, // 纬度（度）
    50 // 高度（米）
  );

  // 笛卡尔坐标转经纬度分两步

  // 第一步：笛卡尔坐标转弧度坐标
  const cartographic = Cesium.Cartographic.fromCartesian(cartesian);

  // 第二步：弧度转度数
  const longitude = Cesium.Math.toDegrees(cartographic.longitude); // 116.3975°
  const latitude = Cesium.Math.toDegrees(cartographic.latitude); // 39.9075°
  const height = cartographic.height; // 50米
  console.log(longitude, latitude, height, "longitude, latitude, height");

  // ------------------------------------------------------------------------------

  // 2. 经纬度 ↔ 弧度

  // 经度转弧度
  const lonRad = Cesium.Math.toRadians(116.3975); // ~2.0313 弧度

  // 纬度转弧度
  const latRad = Cesium.Math.toRadians(39.9075); // ~0.6964 弧度

  // 弧度转度数
  const lonDeg = Cesium.Math.toDegrees(lonRad); // 116.3975°
  const latDeg = Cesium.Math.toDegrees(latRad); // 39.9075°
  console.log(lonDeg, latDeg, "lonDeg, latDeg");

  // ------------------------------------------------------------------------------

  // 3. Cartesian3 ↔ 屏幕坐标

  // 笛卡尔坐标转屏幕坐标
  const screenPos = Cesium.SceneTransforms.worldToWindowCoordinates(
    viewer.scene,
    cartesian
  );
  console.log(`屏幕坐标: (${screenPos.x}, ${screenPos.y})`);

  // 屏幕坐标转笛卡尔坐标（地形表面）
  const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
  handler.setInputAction((movement) => {
    console.log(movement.position); // 屏幕坐标
    console.log(viewer.scene.pickPosition(movement.position)); // Cartesian3
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

  // ------------------------------------------------------------------------------

  // 4. WGS84 ↔ Web 墨卡托投影
  const projection = new Cesium.WebMercatorProjection();

  // WGS84 转 Web 墨卡托
  const projected = projection.project(cartographic);
  console.log(`投影坐标: (${projected.x}, ${projected.y})`);

  // Web 墨卡托转 WGS84
  const unprojected = projection.unproject(
    new Cesium.Cartesian3(projected.x, projected.y)
  );
  console.log(`WGS84坐标: ${Cesium.Math.toDegrees(unprojected.longitude)}°, 
  ${Cesium.Math.toDegrees(unprojected.latitude)}°`);

  // ------------------------------------------------------------------------------

  // 计算距离
  // 天安门坐标
  const cartesian1 = Cesium.Cartesian3.fromDegrees(
    116.3975, // 经度（度）
    39.9075, // 纬度（度）
    50
  );
  // 故宫坐标（东经116.3972°, 北纬39.9163°）
  const palaceCartesian = Cesium.Cartesian3.fromDegrees(116.3972, 39.9163);

  // 计算直线距离（米）
  const distance = Cesium.Cartesian3.distance(cartesian1, palaceCartesian);
  console.log(`直线距离: ${distance.toFixed(2)} 米`);

  // 计算椭球面距离（沿地球表面）
  const geodesic = new Cesium.EllipsoidGeodesic();
  const carto1 = Cesium.Cartographic.fromCartesian(cartesian1);
  const carto2 = Cesium.Cartographic.fromCartesian(palaceCartesian);
  geodesic.setEndPoints(carto1, carto2);
  console.log(`地表距离: ${geodesic.surfaceDistance.toFixed(2)} 米`);

  // ------------------------------------------------------------------------------
});

// 加载天地图
const initMap = () => {
  // 以下为天地图及天地图标注加载
  const tiandituProvider = new Cesium.WebMapTileServiceImageryProvider({
    url:
      "http://{s}.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" +
      token,
    layer: "img",
    style: "default",
    format: "tiles",
    tileMatrixSetID: "w",
    subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"], // 子域名
    maximumLevel: 18,
    credit: new Cesium.Credit("天地图影像"),
  });
  // 天地图影像添加到viewer实例的影像图层集合中
  viewer.imageryLayers.addImageryProvider(tiandituProvider);
};
</script>
<style scoped>
.container {
  width: 100vw;
  height: 100vh;
}
</style>