如何将基于Leaflet.js CRS.Simple的GTA V地图迁移至OpenLayers 8.x

要实现直接使用GTA V坐标在OpenLayers中添加图层，核心是复刻Leaflet自定义CRS中的非均匀坐标转换逻辑，同时适配OpenLayers的投影和瓦片系统。以下是分步实现方案：

1. 拆解Leaflet自定义CRS的转换逻辑 #

Leaflet中的L.Transformation(0.02072, 117.3, -0.0205, 172.8)定义了GTA坐标与原图像素坐标的映射关系：

• GTA坐标 [lng, lat] → 原图像素坐标（左上角为原点，y轴向下）：

  px = (lng - 117.3) / 0.02072
  py = (172.8 - lat) / 0.0205
  

• 反向转换（像素坐标→GTA坐标）：

  lng = 0.02072 * px + 117.3
  lat = 172.8 - 0.0205 * py
  

另外，Leaflet的缩放逻辑scale(zoom) = Math.pow(2, zoom)，对应OpenLayers中不同缩放级别的分辨率设置。

2. 定义OpenLayers自定义投影与转换函数 #

创建GTA专属投影，并添加双向坐标转换规则：

// 定义自定义GTA5投影
const GTA5_PROJ = new ol.proj.Projection({
  code: 'GTA5',
  units: 'custom',
  extent: [-200, -200, 400, 400], // 可根据实际坐标范围调整
});

// 添加GTA5与原图像素坐标的双向转换
ol.proj.addCoordinateTransforms(
  GTA5_PROJ,
  'pixel',
  // GTA坐标 → 原图像素坐标
  (gtaCoord) => {
    const [lng, lat] = gtaCoord;
    const px = (lng - 117.3) / 0.02072;
    const py = (172.8 - lat) / 0.0205;
    return [px, py];
  },
  // 原图像素坐标 → GTA坐标
  (pixelCoord) => {
    const [px, py] = pixelCoord;
    const lng = 0.02072 * px + 117.3;
    const lat = 172.8 - 0.0205 * py;
    return [lng, lat];
  }
);

3. 配置瓦片网格与数据源 #

适配8192×8192原图、256×256瓦片及0-5级缩放：

// 定义瓦片网格，分辨率对应缩放级别的原图像素/视图像素比例
const tileGrid = new ol.tilegrid.TileGrid({
  origin: [0, 0], // 原图左上角原点
  resolutions: [32, 16, 8, 4, 2, 1], // zoom0到zoom5的分辨率
  tileSize: 256,
});

// 创建瓦片源，反转y坐标适配Leaflet风格的瓦片命名
const tileSource = new ol.source.XYZ({
  tileGrid: tileGrid,
  tileUrlFunction: (tileCoord) => {
    const z = tileCoord[0];
    const x = tileCoord[1];
    // OpenLayers瓦片y轴向上，反转后匹配Leaflet的y轴向下命名规则
    const y = Math.pow(2, z) - 1 - tileCoord[2];
    return `tiles/${z}/${x}/${y}.png`; // 替换为你的瓦片实际路径
  },
  crossOrigin: 'anonymous', // 跨域瓦片需设置此属性
});

4. 初始化地图并验证坐标 #

设置视图投影为GTA5，直接使用GTA坐标添加标记、多边形等图层：

const map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({ source: tileSource }),
    // 添加GTA坐标[0,0]的测试标记
    new ol.layer.Vector({
      source: new ol.source.Vector({
        features: [new ol.Feature({
          geometry: new ol.geom.Point([0, 0]),
        })],
      }),
      style: new ol.style.Style({
        image: new ol.style.Circle({
          radius: 8,
          fill: new ol.style.Fill({ color: 'red' }),
          stroke: new ol.style.Stroke({ color: 'white', width: 2 }),
        }),
      }),
    }),
  ],
  view: new ol.View({
    projection: GTA5_PROJ,
    center: [0, 0],
    zoom: 3,
    minZoom: 0,
    maxZoom: 5,
  }),
});

关键注意事项 #

• 非均匀缩放处理：GTA坐标x/y方向的缩放系数不同，必须通过自定义转换函数实现，不能使用OpenLayers默认的均匀投影。
• y轴方向适配：OpenLayers瓦片默认y轴向上，需在tileUrlFunction中反转y坐标以匹配Leaflet风格的瓦片文件结构。
• 无限地图支持：若需复刻Leaflet的infinite: true，可适当调大投影的extent值，确保超出原图范围的GTA坐标能正常显示。

内容的提问来源于stack exchange，提问作者Scott