将使用 Leaflet.js CRS.Simple 的地图转换为 OpenLayers 8.x

Question

我有一个在 Leaflet.js 中实现的游戏地图，其中包含 Grand Theft Auto V 的自定义坐标转换。由于 Leaflet.js 和需要一些在 Leaflet.js 中不易获得的 Open Layers 功能。

function createCRS() {
  return L.extend({}, L.CRS.Simple, {
    projection: L.Projection.LonLat,
    transformation: new L.Transformation(0.02072, 117.3, -0.0205, 172.8),
    scale: function (zoom) {
      return Math.pow(2, zoom);
    },
    zoom: function (scale) {
      return Math.log(scale) / 0.6931471805599453;
    },
    distance: function (pos1, pos2) {
      var x_difference = pos2.lng - pos1.lng;
      var y_difference = pos2.lat - pos1.lat;
      return Math.sqrt(x_difference * x_difference + y_difference * y_difference);
    },
    infinite: true
  })
}

var crs = createCRS();
var map = new L.Map('map', {
  center: [0, 0],
  zoom: 3,
  crs: crs,
  pmIgnore: false,
});

L.marker([0, 0], {}).addTo(map) // coordinate 0,0

// map layer boilerplate omitted for brevity

值得注意的是，坐标

[0, 0]

并不是在地图的左上角，它实际上是朝向左下角的：

Grand Theft Auto V 地图大小为 8192 x 8192 像素，我使用地图图块（256 x 256 像素图块），缩放级别最多为 5 个。我尝试使用 addCooperativeTransforms 和带有

pixels

单位的投影，但没有运气。我在坐标

[0, 0]

处添加到地图的任何标记始终会出现在地图的左上角，这反过来又意味着所有其他有效的 GTA 5 坐标也被错误放置（通常位于地图之外）。

您可以在以下沙箱中看到错误的

[0, 0]

坐标的再现，并包含概述坐标

[0, 0]

应位于的坐标平面图像。我的最终目标是，我可以使用 GTA V 坐标将任何标记、多边形等应用为地图图层，而无需在插入它们时转换坐标。相反，坐标应该由开放层中存在的任何转换层正确转换。

代码沙箱：https://codesandbox.io/p/sandbox/ol-gtavmap-gnkdmf

Answer 1

传单

transformation

似乎是缩放0时中心[0, 0]的偏移和比例。OpenLayers不容易支持不同的x和y轴分辨率，所以如果我平均比例并计算tilegrid的范围作为

const scale = (0.02072 + 0.0205) / 2;
const extent = [
  -117.3 / scale,
  (172.8 - 256) / scale,
  (256 - 117.3) / scale,
  172.8 / scale,
];

const tileGrid = createXYZ({
  tileSize: 256,
  extent: extent,
  maxZoom: 4,
});

视图中心坐标 [0, 0] 位于 [0, 0] 交点之上 https://codesandbox.io/p/sandbox/ol-gtavmap-forked-npjrj2