Question

我正在编写一个涉及导航technical illustrations（平移，缩放，点击）的网络应用。我认为Cloudmade Leaflet是一个很好的工具，只因为someone used it to make XKCD 1110 pan/zoomable而我真的很喜欢它。

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

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

Answer 1

您可以使用Leaflet执行此操作。（我自己就是这么做的。）

您必须将像素大小转换为latlong（纬度/经度）。 Leaflet使用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的more details regarding splitting your images available here可能也很有用。

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);
}

Answer 3

我正在将Leaflet用于带有地理信息的自定义图块的地图，但据我所知，Leaflet应该能够执行此任务。有一些要点可以考虑如何组织图像，以便能够以可扩展和可缩放的方式显示它们：

首先，您必须了解地图导航背后的概念以及相应的切片文件名。这个概念是QuadTree。可以找到有关其工作原理的示例here。

然后你必须在不同的瓷砖上切割你的原始技术插图。如果只从一个缩放级别开始，这应该非常简单。然后，您可以在新的Leaflet TileLayer中使用切片。当你想要缩放时，它可能会变得更加困难。您必须找到瓷砖的正确边界并构建正确的文件名（请参阅上面的QuadTree参考资料）。

总结一下：传单不应该是你的任务中的问题。您的主要任务是从原始数据创建合适且正确的切片。

Answer 4

我对MapTiller有好运 - http://www.maptiler.com/

Answer 5

如果你想要一个非平铺选项，你可以在没有平铺预切割的情况下完成整个客户端

请参阅https://github.com/Murtnowski/GMap-JSlicer

Dim sumtest    As Variant

sumstest = Application.WorksheetFunction.Subtotal(9, Range("H2:H" & ActiveSheet.Cells(ActiveSheet.Rows.Count, "H").End(xlUp).Row))

很简单。

Answer 6

使用Leaflet的最大问题是弄清楚如何生成，排序，然后正确地进行调用，以便一切按预期显示。经过几天无可救药地在解决方案后尝试解决方案，这是唯一一个适合我的解决方案，这要归功于Pedro Sousa的教程：

https://build-failed.blogspot.pt/2012/11/zoomable-image-with-leaflet.html

本质上，它使用GDAL2Tiles以可预测的方式正确拆分切片。这种工具在大多数Linux发行版上都很容易获得（据称它在Mac OS X下运行正常，使用端口或类似的东西）。使用此工具无任何水印，尺寸限制等。就像Pedro Sousa在他的文章中解释的那样，将瓷砖放在服务器的目录上。

Leaflet将加载一张地图＆＃39;使用你的瓷砖＆＃39;假的＆＃39;地理坐标，使用光栅文件的大小来计算“假”＆＃39;经度/纬度正确。在那之后，您可以随心所欲地使用它，就像任何其他地图图块服务器一样。在我的情况下，我只需要删除一些标记，所以我不能在我正在使用的坐标系中关心 - 下面的函数对于提取“假”是非常有用的。地理坐标以便知道标记的放置位置：

var popup = L.popup();
function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString() + "\nZoom level is " + map.getZoom())
        .openOn(map);
}
map.on('click', onMapClick);

我确实设法使用Leaflet成功替换旧的基于Flash的地图导航器，并基本上复制了几乎所有Flash功能（甚至使用相同的标记和所有！）。当然，Leaflet可以在iOS设备上运行的优势 - 并且由于平铺，使用Leaflet的解决方案比旧的基于Flash的方法运行得快得多......

替代方案可能是OpenLayers，它也可以处理光栅图像，而不需要平铺 - 如果你有一个相对较小的图像就足够了。

BTW，这里是不同框架的比较 - 但并非所有框架都会处理静态图像：https://www.toptal.com/web/the-roadmap-to-roadmaps-a-survey-of-the-best-online-mapping-tools

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

6 个答案: