Leaflet是非地图图像的好工具吗？ [英] Is Leaflet a good tool for non-map images?

问题描述

我正在撰写一个网页应用，其中涉及浏览技术插图（平移，缩放，点击） 。我认为 Cloudmade Leaflet 是一个很好的工具，只因为有人用它来制作XKCD 1110 pan / zoomable ，我真的很喜欢它的结果。

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

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

解决方案

您可以使用Leaflet执行此操作。 （我自己完成了这个。）

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

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.

这篇关于Leaflet是非地图图像的好工具吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！