解决 OpenLayers 中的高德瓦片坐标偏移问题：GCJ02 的奥秘

2024-01-18 19:29:18

在 OpenLayers 的辽阔世界中，我们经常遇到各种各样的地图集成难题。其中一个常见的挑战是处理高德瓦片在 OpenLayers 中的坐标偏移问题。这个问题困扰了无数开发者，但别担心，我们今天将揭开 GCJ02 坐标系的神秘面纱，找到解决这一谜题的关键。

GCJ02 的幕后故事

要了解坐标偏移问题，我们必须深入了解 GCJ02 坐标系。GCJ02 是中国国家测绘局开发的一种坐标系，用于管理国家地理信息。它基于WGS84 坐标系，但经过变形处理，以满足中国特定的安全和保密需求。这种变形导致了与原始 WGS84 坐标系之间的偏移。

OpenLayers 中的坐标转换

当我们在 OpenLayers 中使用高德瓦片时，地图通常会基于 WGS84 坐标系进行渲染。然而，高德瓦片本身是基于 GCJ02 坐标系的，这就会导致坐标偏移。为了解决此问题，我们需要在 OpenLayers 中执行坐标转换，将 GCJ02 坐标转换为 WGS84 坐标。

分步解决指南

解决坐标偏移问题的步骤如下：

确定投影类型： 确定要使用的投影类型，例如 EPSG:3857（Web 墨卡托投影）或 EPSG:4326（WGS84）。
创建转换对象： 使用 ol.proj.getTransformFromProjections() 函数创建转换对象，用于将 GCJ02 坐标转换为 WGS84 坐标。
应用转换： 在加载高德瓦片时，使用转换对象将瓦片坐标从 GCJ02 转换为 WGS84。
设置图层投影： 将高德瓦片图层投影设置为 WGS84，以确保与地图其他部分正确对齐。

示例代码

以下示例代码展示了如何使用 OpenLayers 解决坐标偏移问题：

const gcj02ToWgs84 = ol.proj.getTransformFromProjections('EPSG:3857', 'EPSG:4326');

const tileLayer = new ol.layer.Tile({
  source: new ol.source.XYZ({
    url: 'https://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}',
    projection: 'EPSG:3857', // 瓦片的原始投影
  }),
  extent: ol.proj.transformExtent([73.66, 3.86, 135.05, 53.55], 'EPSG:4326', 'EPSG:3857'), // 瓦片的范围
  tileUrlFunction: function(tileCoord) {
    const z = tileCoord[0];
    const x = tileCoord[1];
    const y = tileCoord[2];

    // 将瓦片坐标从 GCJ02 转换为 WGS84
    const transformedCoord = ol.proj.transform([x, y], 'EPSG:3857', 'EPSG:4326');

    return 'https://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x=' +
      Math.round(transformedCoord[0]) + '&y=' + Math.round(transformedCoord[1]) + '&z=' + z;
  },
});

const map = new ol.Map({
  target: 'map',
  layers: [tileLayer],
  view: new ol.View({
    center: [120.21, 30.25],
    zoom: 12,
  })
});