带有 Canvas Overlay Leaflet JS 的可缩放室内地图

Question

我一直在尝试实现可缩放的室内地图（非常类似于您使用 LeafletJS 看到的一些座位图）。 正如这篇精彩的文章中所述，我已经能够使用 maptiler 获取室内地图并从中创建地图图块：http://build-failed.blogspot.com/2012/11/zoomable-image-with-leaflet.html

现在我有了图块，我想创建画布多边形，在这些图块上定义各种热点。有没有办法做到这一点？我在这里看到了一个示例：http://bl.ocks.org/Sumbera/11114288，它允许您在传单地图上创建画布，但我不确定如何获取 Canvas 多边形（或任何此类几何图形）并将其放在地图上，因为这些不是纬度/长期导向。其中许多示例显示了在地图上绘制的几何图形，这意味着您或多或少知道纬度/经度，但我用来构建地图的这些图像根本不是基于地理的。

有没有办法可以做到这一点？会喜欢一些想法！

谢谢！

Answer 1

如果我理解正确，您是否对如何确定要在画布中绘制的要素的坐标以使它们与您的地图图块相匹配感到困惑？而且你特别害怕你必须“发明”一些纬度/经度坐标？

您可能应该考虑在实例化时在地图选项中使用L.CRS.Simple，以便坐标现在是“平坦的”。

一个简单的 CRS，将经度和纬度直接映射到 x 和 y。可用于平面地图（例如游戏地图）。请注意，y 轴仍应反转（从下到上）。

您甚至可以自定义 CRS，使 x 和 y 坐标与您的室内地图全分辨率匹配（请参阅 Leaflet custom coordinates on image）。

那么坐标不再是“基于地理的”，而是基于您的图像坐标（可能除了垂直轴，它在底部计数为 0，在顶部计数为最大值）。