У меня есть эта карта-листовка с tileLayer
, где maxNativeZoom
по какой-то причине не работает. Если я увеличиваю масштаб больше, чем уровень масштабирования, для которого есть плитки, а затем пытаюсь панорамировать, он запрашивает несуществующие плитки с сервера. Я вижу это в сетевой консоли.
Он не только запрашивает плитки с уровнем масштабирования 5, когда я устанавливаю maxNativeZoom: 4
, он также запрашивает плитки с уровнем масштабирования 40 !! И errorTileUrl
тоже не работает.
Это на уровне масштабирования 4
, а это на уровне масштабирования 5 ... 1015
Вот соответствующий код, надеюсь, один из вас заметит, что мне не хватает:
w = 4096;
h = 4096;
tileDepth = 4;
/*
=============================================================================
// Conversion from (x, y) raster image coordinates to equivalent of latLng
=============================================================================
*/
var yx = L.latLng;
var xy = function(x, y) {
if (L.Util.isArray(x)) { // When doing xy([x, y]);
return yx(x[1], x[0]);
}
return yx(y, x); // When doing xy(x, y);
};
/**
=============================================================================
Define basic map parameters and custom CRS by extending CRS.Simple
=============================================================================
*/
var minZoom = 2;
var maxZoom = 12;
var img = [
w,
h
];
var transformationCoefficient = Math.pow(2, tileDepth);
L.CRS.MySimple = L.extend({}, L.CRS.Simple, {
// coefficients: a b c d
transformation: new L.Transformation(1/transformationCoefficient, 0, 1/transformationCoefficient, 0) // Compute a and c coefficients so that tile 0/0/0 is from [0, 0] to [img]
});
var bounds = [xy(0, 0), xy(img)];
/*
=============================================================================
Create the map itself
=============================================================================
*/
var map = L.map("map", {
crs: L.CRS.MySimple, // http://leafletjs.com/reference-1.0.3.html#map-crs
maxBounds: bounds, // http://leafletjs.com/reference-1.0.3.html#map-maxbounds
minZoom: minZoom,
maxZoom: maxZoom,
attributionControl: false,
zoomControl: false //disable zoom control at standard position - we'll add a new one later
}).setView([w/2, h/2], 0);; //this should center the map in our 1024x1024 div
//add zoom control at new position
L.control.zoom({
position:'topright'
}).addTo(map);
/*
=============================================================================
Import tiles
=============================================================================
*/
L.tileLayer(mapPath + 'tiles/{z}/{x}/{y}.png', {
bounds: bounds, // http://leafletjs.com/reference-1.0.3.html#gridlayer-bounds
noWrap: true,
minZoom: minZoom,
maxZoom: maxZoom,
maxNativeZoom: tileDepth, //how deep the actual map tiles go
errorTileUrl: imgDir + 'error_tile.png',
attribution: mapAttribution
}).addTo(map);