可缩放的室内地图与画布叠加LeafletJS [英] Zoomable Indoor Maps Witth Canvas Overlay LeafletJS

问题描述

我一直在尝试实现可缩放的室内地图(非常类似于您使用LeafletJS看到的一些座位图).我已经能够拍摄室内地图并使用maptiler在其中创建地图图块，如这篇精彩的文章所述:

I have been trying to implement zoomable indoor maps (very similar to some seating charts that you see using LeafletJS). I have been able to take an indoor map and create map tiles out of it using maptiler as explained in this wonderful article: http://build-failed.blogspot.com/2012/11/zoomable-image-with-leaflet.html

现在我有了这些图块，我想创建在这些图块上定义各种热点的Canvas多边形.有没有办法做到这一点?我在这里看到了一个示例: http://bl.ocks.org/Sumbera/11114288 允许您在单张地图上创建画布，但是我不确定如何将Canvas多边形(或任何此类几何图形)放置在地图上，因为它们不是经纬度方向.这些示例中的许多示例都显示了在地图上绘制的几何形状，这意味着您或多或少知道纬度/经度，但是我从中构建地图的这些图像完全不是基于地理的.

Now that I have the tiles, I would like to create Canvas polygons that define various hotspots on these tiles. Is there a way to do this? I have seen an example here: http://bl.ocks.org/Sumbera/11114288 that allows you to create canvas over a leaflet map but I am not sure how I can take a Canvas polygon (or any such geometry) and put it on the map because these are not lat/long oriented. Many of these examples show geometries being drawn on a map which means you more or less know a lat/long but these images that I have built the map out of are not geography based at all.

有没有办法做到这一点?会喜欢一些想法！

Is there a way I could do this? Would love some ideas!

谢谢！

推荐答案

如果我正确理解，您对于如何确定要在画布中绘制的要素的坐标感到困惑，以使其与地图图块匹配?而且您特别担心必须发明"一些经/纬度坐标吗?

If I understand correctly, you are confused about how to determine the coordinates of the features you want to draw in your canvas, so that they match your map tiles? And you are especially afraid that you would have to "invent" some lat/lng coordinates?

您可能应该考虑使用 L.CRS.Simple 在实例化时显示在地图选项中，因此坐标现在是平坦的".

You should probably consider using L.CRS.Simple in your map options at instantiation, so that the coordinates are now "flat".

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

A simple CRS that maps longitude and latitude into x and y directly. May be used for maps of flat surfaces (e.g. game maps). Note that the y axis should still be inverted (going from bottom to top).

您甚至可以自定义CRS，以使 x 和 y 坐标与您的室内地图的全分辨率相匹配(请参见

You can even customize that CRS so that the x and y coordinates match your indoor map full resolution (see Leaflet custom coordinates on image).

然后，坐标不再是基于地理位置"，而是基于图像坐标(也许是垂直轴，垂直轴的底部为0，顶部为max).

Then the coordinates are no longer "geography based", but based on your image coordinates (except maybe the vertical axis, which is counted with 0 on bottom and max on top).

这篇关于可缩放的室内地图与画布叠加LeafletJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！