40

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

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

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

4

6 回答 6

27

你可以用 Leaflet 做到这一点。（我自己就是这样做的。）

您必须将像素大小转换为 latlong（纬度/经度）。SimpleLeaflet 通过使用“坐标参考系统”为您提供了一种简单的方法，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。

于 2013-03-02T04:46:46.473 回答
22

这适用于未平铺的图像。

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);
}
于 2013-05-24T22:33:45.037 回答
3

我正在将 Leaflet 用于带有地理信息的自定义图块的地图，但据我所知，Leaflet 应该能够完成这项任务。有几点需要考虑如何组织图像以能够以可平移和可缩放的方式显示它们：

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

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

总结一下：传单不应该成为您任务中的问题。您的主要任务是根据原始数据创建合适且正确的图块。

于 2012-10-28T17:42:51.997 回答
3

我在 MapTiller 上运气不错——http: //www.maptiler.com/

于 2014-03-01T12:26:56.760 回答
1

如果你想要一个非瓷砖选项，你可以在客户端完成整个事情，而无需预先切割瓷砖

见https://github.com/Murtnowski/GMap-JSlicer

slicer = new JSlicer(document.getElementById('map'), 'myImage.png');
slicer.init();

非常简单。

于 2016-06-22T17:35:54.123 回答
1

使用 Leaflet 的最大问题是弄清楚如何生成、排序图块，然后正确地进行调用，以便一切都按您的预期显示。经过几天绝望地尝试解决方案后，这是唯一对我有用的解决方案，这要感谢 Pedro Sousa 完成的教程：

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

本质上，这使用 GDAL2Tiles 以可预测的方式正确分割图块。这是一种在大多数 Linux 发行版上很容易获得的工具（据称它在 Mac OS X 下也可以正常运行，使用端口或类似的东西）。此工具没有水印、大小限制等。就像 Pedro Sousa 在他的文章中解释的那样，将磁贴放在服务器的目录上。

然后，Leaflet 将使用带有“假”地理坐标的图块加载“地图”，并使用光栅文件的大小正确计算“假”经度/纬度。之后，您几乎可以随心所欲地使用它，就像任何其他地图图块服务器一样。在我的例子中，我只需要删除一些标记，所以我不在乎我正在处理的坐标系 - 下面的函数对于提取“假”地理坐标很有用，以便知道放置标记的位置：

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，它也可以处理光栅图像，无需平铺——如果你有一个相对较小的图像就足够了。

顺便说一句，这里是不同框架的比较——但并非所有框架都会处理静态图像：https ://www.toptal.com/web/the-roadmap-to-roadmaps-a-survey-of-the-best-在线测绘工具

于 2016-06-22T23:47:13.400 回答