我正在制作带有传单的自定义 map 。到目前为止,一切工作正常,但不幸的是,我用来将图像分割成图 block 的程序不是以 0 开始计数,而是以 1 开始,所以我的图 block 以“1_1.jpg”开头,所以我的整个 map 移动了一个图 block 在 y 轴和 x 轴上。重命名图 block 不是一个选项,因为有很多,所以我正在寻找更改 {x} 和 {y} 值的可能性
L.tileLayer('images/map/{z}/C{x}_R{y}.jpg',
像x=x+1
和y=y+1
这样的东西,这就是我的逻辑。
我读过,使用 getTileUrl
可以实现这一点,但我不明白如何实现。我对 Javascript 还很陌生,这个问题开始让我发疯!
如果有人能提供帮助,我将非常感激。
图 block 名称类似于“Cx_Ry.jpg”(例如第一个图像“C1_R1.jpg”),这是代码。
var w = 16384, h = 16384; //Größe innerhalb Box
var map = L.map('image-map', {
minZoom: 0,
maxZoom: 5,
crs: L.CRS.Simple,
attributionControl: false,
}).setView([0, 0], 0);
var southWest = map.unproject([0, h], map.getMaxZoom());
var northEast = map.unproject([w, 0], map.getMaxZoom());
var bounds = new L.LatLngBounds(southWest, northEast);
map.setMaxBounds(bounds);
L.tileLayer('images/map/{z}/C{x}_R{y}.jpg', {
minZoom: 0,
maxZoom: 5,
tms: false,
continuousWorld: 'false',
noWrap: false,
defaultRadius:1,
}).addTo(map);
最佳答案
您可以扩展 Leaflet 的 TileLayer
类来提供您自己的 getTileUrl
方法:http://leafletjs.com/examples/extending/extending-2-layers.html .
在这种情况下,它可能看起来像这样:
L.TileLayer.MyCustomLayer = L.TileLayer.extend({
getTileUrl: function(coords) {
// increment our x/y coords by 1 so they match our tile naming scheme
coords.x = coords.x + 1;
coords.y = coords.y + 1;
// pass the new coords on through the original getTileUrl
// see http://leafletjs.com/examples/extending/extending-1-classes.html
// for calling parent methods
return L.TileLayer.prototype.getTileUrl.call(this, coords);
}
});
// static factory as recommended by http://leafletjs.com/reference-1.0.3.html#class
L.tileLayer.myCustomLayer = function(templateUrl, options) {
return new L.TileLayer.MyCustomLayer(templateUrl, options);
}
// create the layer and add it to the map
L.tileLayer.myCustomLayer('images/map/{z}/C{x}_R{y}.jpg', {
minZoom: 0,
maxZoom: 5,
tms: false,
continuousWorld: 'false',
noWrap: false,
defaultRadius:1,
}).addTo(map);
代码未经测试,但应该能让您朝着正确的方向前进。
关于javascript - 传单自定义 url\自定义图 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43826338/