自定义地图图块未加载——Leafletjs

【问题标题】：Custom map tiles not loading -- Leafletjs自定义地图图块未加载——Leafletjs
【发布时间】：2016-09-04 00:38:40
【问题描述】：

我正在学习如何创建自己的自定义地图的教程。我将图像分割成图块，但当我查看页面时没有加载任何内容。

JavaScript：

L.tileLayer('/Users/ranichd/Desktop/maptest/{z}_{x}_{y}.png', {
    minZoom: 1,
    maxZoom: 6,
    attribution: 'David'
}).addTo(map);

CSS：

#carpmap2 {
    height: 400px;
    width: 900px;
    margin: auto;
    padding: 10px;
    border: 1px solid black;
}

地图图块的截图：

最后，我得到的结果：

我怎样才能做到这一点？

【问题讨论】：

【解决方案1】：

您的图块必须由http server 提供服务。

L.tileLayer('http://yourhost/maptest/{z}_{x}_{y}.png', {
    minZoom: 1,
    maxZoom: 6,
    attribution: 'David'
}).addTo(map);

【讨论】：

不一定 - 可以从 file:/ path 或相对于网页的路径提供磁贴。虽然问题可能是由于无法控制最终从哪个路径获取图像，但解决方案不限于从绝对 http:// 路径提供它们。
那么你会建议我如何通过文件路径来做呢？我试着做完整的文件路径，可以在上面看到，所以我真的迷路了。
您可以尝试添加文件 URI 方案。文件：//用户/ranichd/Desktop/maptest/{z}_{x}_{y}.png。另请查看您的浏览器控制台日志以了解有关错误的详细信息。
顺便说一下，如果是在 Windows 上，则必须添加磁盘盘符：file:///c:/Users
我很抱歉，我应该说明这一点，但我使用的是 Mac。不幸的是，使用 'file://Users/ranichd/Desktop/maptest/{z}_{x}_{y}.png' 也不起作用。在检查控制台后，我看到了这个：link