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

Question

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

显然,我需要平铺和扩展我原来的技术插图,但让我们说这是我解决的一个微不足道的问题.然而,看看Leaflet API,我似乎必须将我的技术插图(.ai,.svg和.png文件)转换为GeoJSON等地理标准.这似乎是一个尴尬的主张.

任何人都可以推荐Leaflet或任何其他工具来导航非地图图像？

Answer 1

您可以使用Leaflet执行此操作.(我自己就是这么做的.)

您必须将像素大小转换为latlong(纬度/经度).传单为您提供一个简单的方法,通过使用Simple"坐标参照系",map.project和map.unproject.

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

var map = L.map('map', {
  maxZoom: 20,
  minZoom: 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.

Answer 2

这适用于未平铺的图像.

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

    map.setMaxBounds(new L.LatLngBounds([0,500], [500,0]));

    var imageUrl = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg'
    var imageBounds = [[250,0], [0,250]];

    L.imageOverlay(imageUrl, imageBounds).addTo(map);
}