Question

我有一个JPG文件，其中的地图不是真实比例的，并且无法用真实的地理纬度和经度来表示，所以我就是Leaflet CRS解决方案，这似乎是要走的路。< / p>

问题是地图文件（JPG）大小约为30MB，无法在一个请求中加载，所以我再读了一遍，找到了TileLayer解决方案。
我甚至找到了demo（下面还提供了代码）：）

现在，我唯一的问题是如何获取JPG文件并将其转换为图层？是否有在线/离线工具？据我所知，我需要的是将大图像分割成256px x 256px图块，将它放在我服务器的目录中，TileLayer会完成剩下的工作吗？

var w = 14000;
var h = 10000;
var mapMinZoom = 2;
var mapMaxZoom = 5;      
var _map = L.map('map', {
        maxZoom: mapMaxZoom,
        minZoom: mapMinZoom,
        crs: L.CRS.Simple,
        zoomControl: false,
        attributionControl: false,
        detectRetina: true
      });

var _mapBounds = new L.LatLngBounds(
    _map.unproject([0, h], mapMaxZoom),
    _map.unproject([w, 0], mapMaxZoom));
_map.setMaxBounds(_mapBounds);

var _mapCenter = _map.unproject([w/2, h/2], mapMaxZoom);
_map.setView(_mapCenter, 3);

var _tileLayer = L.tileLayer(
        'http://d3uxxcqax6u8f1.cloudfront.net/assets/img/map/{z}/map_{x}_{y}.png', {
        minZoom: mapMinZoom, maxZoom: mapMaxZoom,
        bounds: _mapBounds,
        continuousWorld: true,
        noWrap:true,
        tileSize:250,
        crs: L.CRS.Simple,
        detectRetina:false
      }).addTo(_map);

html, body, #map { width:100%; height:100%; margin:0; padding:0; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" rel="stylesheet"/>
<div id="map"></div>

感谢。

Answer 1

参见例如https://gis.stackexchange.com/questions/221671/how-to-split-a-tif-image-into-several-tiles和http://www.gdal.org/gdal2tiles.html

一旦你有了瓷砖，是的，只需将它们放在你的文件旁边它就可以了。

Answer 2

我发现了这个用于创建本地存储图块的程序： http://libvips.github.io/libvips/API/current/Making-image-pyramids.md.html

命令：

vips.exe dzsave input.jpg tiles_folder --layout google --background 0 --centre --suffix .jpg[Q=100]

哪里
input.jpg - 你的大图
tiles_folder - 输出文件夹
--layout google - 这对传单很重要
--background 0 - 黑色背景
--suffix .jpg[Q=100] - 瓷砖质量（100%）

然后在传单中：

L.tileLayer('tiles_folder/{z}/{y}/{x}.jpg', {  
tileSize: 256 // or 512  
crs: L.CRS.Simple // this is important for nongeo maps
}).addTo(map);

带自定义地图（CRS）的宣传单 - 如何将JPG转换为TileLayer图块

2 个答案: