leaflet + gMapCatcher- change zxy template

2019-06-03 20:18发布

问题:

I'm using leaflet with tiles generated by gMapCatcher. the file names there is totally different. For example - zoom level 17 in leaflet is level 0 at gMapCatcher.

I need to change the url template

'http://{s}.somedomain.com/blabla/{z}/{x}/{y}.png'

so I can insert the calculations for the right directories

I tried the naive way to write the calculations within the template but it does not work.

回答1:

I found an answer:

I downloades the leaflet.js (passed it through http://jsbeautifier.org/) and changed the code at getTileUrl and added my custom variables :

getTileUrl: function (t) {
            return o.Util.template(this._url, o.extend({
                s: this._getSubdomain(t),
                z: t.z,
                x: t.x,
                y: t.y,
                z0: 17-t.z,
                x0: Math.floor(t.x/1024),
                x1: Math.floor(t.x%1024),
                y0: Math.floor(t.y/1024),
                y1: Math.floor(t.y%1024)
            }, this.options))
        },

and in my script

  L.tileLayer('img/tiles/gMapCatcher/{z0}/{x0}/{x1}/{y0}/{y1}.png').addTo(map); //gMapCatcher

    L.tileLayer('img/tiles/{z}/{x}/{y}.png').addTo(map);
 //other tiles


回答2:

In leaflet 0.7 change the code to

getTileUrl: function (t) {
        return L.Util.template(this._url, L.extend({
            s: this._getSubdomain(t),
            z: t.z,
            x: t.x,
            y: t.y,
            z0: 17-t.z,
            x0: Math.floor(t.x/1024),
            x1: Math.floor(t.x%1024),
            y0: Math.floor(t.y/1024),
            y1: Math.floor(t.y%1024)
        }, this.options))
    },

otherwise it will give a reference error And to find the location of gmapcatcher files just go into the settings and find the location



回答3:

Taking shai givati's answer a step farther, if you don't want to edit the source, this appears to work (although it's not documented as far as I can see):

var map = L.map('map');

var layer = L.tileLayer().addTo(map);

layer.getTileUrl = function(coords)
{
    var url = /* whatever logic you'd like to use to come up with a url */;
    return url;
};

This has the benefit of working on an individual instance of a tileLayer rather than globally on every layer. Plus, it's more in line with the way other javascript mapping frameworks behave, such as google maps.



标签: leaflet