问题
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
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!
Thank You!
回答1:
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?
You should probably consider using L.CRS.Simple in your map options at instantiation, so that the coordinates are now "flat".
A simple CRS that maps longitude and latitude into
xandydirectly. May be used for maps of flat surfaces (e.g. game maps). Note that theyaxis should still be inverted (going from bottom to top).
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).
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).
来源：https://stackoverflow.com/questions/34698073/zoomable-indoor-maps-witth-canvas-overlay-leafletjs