传单自定义URL 自定义图块



我正在使用传单的自定义地图工作。到目前为止,一切都很好,但是不幸的是,我用来将图像分为瓷砖的程序并不是从0开始计数,而是用1开始计数,因此我的瓷砖以" 1_1.jpg"开头,因此我的整个地图被一个瓷砖移动了在y和x轴上。要重命名瓷砖不是一个选项,因为那里有很多,所以我正在寻找更改{x}和{y}值

中的{y}值的可能性
L.tileLayer('images/map/{z}/C{x}_R{y}.jpg',

对于x=x+1y=y+1之类的东西,这是我的逻辑。我读到getTileUrl可能是可能的,但我不明白如何。我仍然是JavaScript的新手,这个问题开始让我发疯!

如果有人能提供帮助,我会非常感谢。

瓷砖名称就像" 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);

您可以扩展传单的TileLayer类以提供您自己的getTileUrl方法:http://leafleafletjs.com/examples/extending/extdending-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);

代码未经测试,但应该使您朝正确的方向移动。

最新更新