为什么单张地图切片排序错误

Question

我正在使用leaflet来渲染一个带有流行的可视化坐标系的地图，但是地图瓦片的排序错误。我该如何解决这个问题？

​

​

var map = L.map('map', {
    // crs: crs,
    continuousWorld: true,
    worldCopyJump: false,
    zoomControl: true
});

new L.TileLayer('https://www.gtrack.co.id/TileMapService/TileMap.ashx?cachetype=0&tilex={x}&tiley={y}&level={z}', {
    maxZoom: 14,
    minZoom: 0,
    continuousWorld: true,
    tileSize:256,
    // tms: true
}).addTo(map);

map.setView([-0.497125, 117.108078], 5);

Answer 1

问题是，磁贴服务器的Z索引并不像TileLayer([x,y], z)期望接收的那样是从零开始的。您必须传递一个名为zoomOffset的值为1的参数来修复此问题。

var map = L.map('map', {
    // crs: crs,
    continuousWorld: true,
    worldCopyJump: false,
    zoomControl: true
});

new L.TileLayer('https://www.gtrack.co.id/TileMapService/TileMap.ashx?cachetype=0&tilex={x}&tiley={y}&level={z}', {
    maxZoom: 14,
    minZoom: 0,
    continuousWorld: true,
    tileSize:256,
    crs: L.CRS.Simple,
    zoomOffset: 1 // <------------ the param to add
}).addTo(map);

map.setView([-0.497125, 117.108078], 5);

然后你就会得到：

​

Answer 2

我遇到了无效的，空的和放错地方的瓷砖的问题。

由于我不知道您正在向哪个服务请求磁贴，因此此解决方案可能不适用于您，但这可能会帮助任何使用OpenStreetMaps的路人：

在URL中，x、y和z不能按字母顺序排列，如下所示：x、y和z必须按字母顺序排列：

const tileURL = "https://{s}.tile.osm.org/{x}/{y}/{z}.png";

但必须按以下顺序为：>：

const tileURL = "https://{s}.tile.osm.org/{z}/{x}/{y}.png";

否则，将请求无效的瓦片，从而导致不可用的错误映射。