Leaflet 是非地图图像的好工具吗?

我正在编写一个涉及导航技术插图(平移、缩放、单击)的网络应用程序.我认为 Cloudmade Leaflet 是一个很好的工具，只是因为 有人用它来制作 XKCD 1110 平移/缩放，我真的很喜欢它的结果.

显然，我需要平铺和缩放我的原始技术插图，但假设这是我已经解决的一个微不足道的问题.然而，查看 Leaflet API，看来我必须转换我的技术插图(.ai、.svg 和 .png 文件)转换为 GeoJSON 等地理标准.这似乎是一个尴尬的提议.

谁能推荐 Leaflet 或任何其他工具来导航非地图图像?

解决方案

你可以用 Leaflet 做到这一点.(我自己就是这样做的.)

您必须将像素大小转换为 latlong(纬度/经度).Leaflet 通过使用 Simple 坐标参考系统"、map.project 和 map.unproject 为您提供了一种简单的方法.p>

首先，像这样构建你的地图:

var map = L.map('map', {最大缩放:20，最小缩放:20，crs:L.CRS.Simple}).setView([0, 0], 20);

…然后设置地图边界(对于 1024x6145 的图像):

var southWest = map.unproject([0, 6145], map.getMaxZoom());var northEast = map.unproject([1024, 0], map.getMaxZoom());map.setMaxBounds(new L.LatLngBounds(southWest, northEast));

此处提供了有关拆分图像的更多详细信息，包括一个 Ruby gem，它也可能有用.

I am writing a web app that involves navigating technical illustrations (pan, zoom, click). I assume that Cloudmade Leaflet a good tool for this, only because someone used it to make XKCD 1110 pan/zoomable and I really like how it turned out.

Obviously, I would need to tile and scale my original technical illustration, but let's say that's a trivial problem that I have solved. Looking at the Leaflet API, however, it appears I would have to convert my tech illustrations (.ai, .svg, and .png files) to a geographical standard like GeoJSON. That seems like an awkward proposition.

Can anyone recommend Leaflet, or any other tool, for navigating non-map imagery?

解决方案

You can do this with Leaflet. (I have done exactly this myself.)

You do have to convert your pixel sizes to latlong (latitude/longitude). Leaflet provides you an easy way to do that by using the Simple "Coordinate Reference System", map.project and map.unproject.

First, construct your map like this:

var map = L.map('map', {
  maxZoom: 20,
  minZoom: 20,
  crs: L.CRS.Simple
}).setView([0, 0], 20);

…and then set the map bounds (for an image that is 1024x6145):

var southWest = map.unproject([0, 6145], map.getMaxZoom());
var northEast = map.unproject([1024, 0], map.getMaxZoom());
map.setMaxBounds(new L.LatLngBounds(southWest, northEast));

There's more details regarding splitting your images available here including a Ruby gem which might also be useful.