Leafletjs自定义坐标系

Question

我正在为一个服务创建一个leaflet地图，但是我似乎无法正确设置对齐方式。底部标记在正确的位置，然而顶部和远右侧的标记不在正确的位置，正如地图上的X所示：https://imgur.com/a/32bIjwi

这是我目前正在使用的图片，很抱歉它现在太大了：https://drive.google.com/file/d/1jwkaJ2RWhB6QnUjKCIaJ2Ex0Hc7JE45p/view

这是我的当前代码：

var bottomLeft = [-4533, -3681];
var topRight = [7467, 4319];

var factor = 1 / 16;

myCRS = L.extend({}, L.CRS.Simple, {
  transformation: new L.Transformation(factor, 0, -factor, 0)
});

GTAMap = L.map('map-canvas', {
  crs: myCRS,
  minZoom: -4
});

var image = L.imageOverlay('images/tiles/postal/rawGTAMap1.png', bounds).addTo(GTAMap);

GTAMap.fitBounds(bounds);

我认为我的问题在于我设置了错误的边界。我不知道该怎么做，但我认为你必须使用边界告诉leaflet你希望0,0位于何处居中，这是我使用gimp完成的。

- layer 8

---

也许这可以帮助你：像素 vs. 地图单位 - Falke Design

你能否创建一个jsfiddle或其他在线版本，以便我们进行测试？ - Falke Design

Answer 1

我认为问题在于您正在使用像素坐标，但是 Leaflet 仍然认为您正在使用地理坐标。请尝试在文件开头添加以下内容：

var yx = L.latLng;
var xy = function(x, y) {
  if (L.Util.isArray(x)) { // When doing xy([x, y]);
    return yx(x[1], x[0]);
  }
  return yx(y, x); // When doing xy(x, y);
};

然后像这样定义你的边界：

var bounds = [xy(0, 0), xy(max x value, max y value)];

或者，您可能想要在这里看看。

- Merion

---

你所说的不正确！当使用L.CRS.Simple时，Leaflet并不是在“地理坐标”上“思考”，而是以“地图单位”为基础文档。你发布的函数只是为了使使用[x,y]更易读和理解，因为默认情况下Leaflet使用[y,x]。 - Falke Design

这就是为什么我以“我认为”开始的原因;-) 我远非专家。但我注意到第8层定义了他的自定义CRS，但仍将CRS.Simple添加到地图中，而不是我的CRS。我也不确定边界数组是否被正确定义，上面的代码对我来说似乎是不完整的。 - Merion

myCRS也被使用了。在我尝试修复问题时，我忘记在代码中替换它。我现在已经编辑了帖子。 - layer 8

如上所述，我会尝试通过将0,0设置为边界中的第一个值，并将图像的最大像素设置为第二个值来定义边界-忽略任何地图单位等。不确定您从哪里获取[-4533，-3681]和[7467，4319]。如果您无法使其正常工作，总有像我链接的那样的网站，您可以将其上传并共享为leaflet地图，其余部分将得到处理。 - Merion

遗憾的是，那个网站对我来说行不通，因为我需要能够从外部源动态添加更多标记。我确实尝试过以那种方式设置边界，但问题变得更糟了。据我所知，这些边界用于告诉leaflet [0,0]应该在哪里。 - layer 8