Cesium系列教程：高德地图坐标纠偏探索之旅

2023-09-04 19:00:47

Cesium 和高德地图：巧妙解决坐标偏移，打造无缝地图体验

引言

在众多的地图应用中，Cesium 和高德地图以其强大的功能和广泛的应用脱颖而出。然而，当将这两者结合使用时，可能会遇到地理坐标位置偏移的问题，尤其是在加载 OSM 或城市白膜时。本文将深入探讨这一问题，并提供一套完整的解决方案，帮助您在 Cesium 中实现高德地图的无缝衔接。

坐标系统差异：偏移的根源

地图绘制需要建立一个坐标系统，将地球上的地理位置映射到二维平面。但由于不同的国家和组织采用不同的坐标系统，这就会导致地理坐标位置的偏移。在中国，高德地图采用 GCJ-02 坐标系统，而 Cesium 默认使用 WGS-84 坐标系统。

坐标转换的必要性

为了解决这一偏移问题，我们需要进行坐标转换，将 GCJ-02 坐标转换为 WGS-84 坐标，以确保 Cesium 中加载的高德地图影像与其他数据源完美契合。

坐标转换方法：揭开多种途径

有多种方法可以进行坐标转换。一种简单的方法是使用在线坐标转换工具，如 https://www.gpsvisualizer.com/utilities。另一种方法是使用专门的库或 API，如 GeoJSON.org 提供的 JavaScript 库。

Cesium 中的坐标转换：实现无缝衔接

在 Cesium 中，可以使用 Cartographic 和 GeographicProjection 类来进行坐标转换。以下代码演示了如何将 GCJ-02 坐标转换为 WGS-84 坐标：

const cartographic = Cesium.Cartographic.fromDegrees(longitude, latitude, height);
const geographicProjection = new Cesium.GeographicProjection();
const wgs84Cartographic = geographicProjection.project(cartographic);

实践步骤：亲自动手解决偏移问题

现在，让我们逐步了解如何在 Cesium 中实现高德地图坐标纠偏：

导入必要的库，如 GeoJSON.org 的坐标转换库。
将高德地图影像加载到 Cesium 中。
使用坐标转换库将 GCJ-02 坐标转换为 WGS-84 坐标。
将转换后的坐标应用到高德地图影像。

代码示例：手把手实现坐标转换

以下代码示例演示了如何使用 GeoJSON.org 库进行坐标转换：

import { transform } from 'proj4';

const gcjLabel = new Cesium.LabelGraphics({
  position: Cesium.Cartesian3.fromDegrees(121.48, 31.22, 0),
  text: '高德坐标',
});

const wgs84Label = new Cesium.LabelGraphics({
  position: Cesium.Cartesian3.fromDegrees(121.47999, 31.22001, 0),
  text: 'WGS84 坐标',
});

const transformedLabel = transform(gcjLabel.position, 'GCJ02', 'WGS84');
wgs84Label.position = Cesium.Cartesian3.fromDegrees(
  transformedLabel.longitude,
  transformedLabel.latitude,
  0
);

viewer.entities.add(gcjLabel);
viewer.entities.add(wgs84Label);