传单-如何获取自定义TileLayer

时间:2018-12-11 14:50:20

标签: javascript leaflet

我在Leaflet中扩展了TileLayer。我想创建自己的用户定义的图块,因此我使用了以下代码:

L.MyLayer = L.TileLayer.extend({
    _drawTileInternal: function (canvas, tilePoint, url, callback) {

        var imageObj = new Image();
        var resizeImage = function () {
            var ctx = canvas.getContext('2d');  

            // resize to final size
            canvas.width = 256 * 4;
            canvas.height = 256 * 4;
            ctx.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height, 0, 0, canvas.width, canvas.height);

            var imgData=ctx.getImageData(0, 0, canvas.width, canvas.height);
            // invert colors
            for (var i=0;i<imgData.data.length;i+=4)
            {
              imgData.data[i]=255-imgData.data[i];
              imgData.data[i+1]=255-imgData.data[i+1];
              imgData.data[i+2]=255-imgData.data[i+2];
              imgData.data[i+3]=255;
            }
            ctx.putImageData(imgData, 0, 0);

            callback();
        };

        if (this.options.crossOrigin) {
            imageObj.crossOrigin = '';
        }

        imageObj.onload = function () {
            canvas.complete = true; //HACK: emulate HTMLImageElement property to make happy L.TileLayer
            setTimeout(resizeImage, 0); //IE9 bug - black tiles appear randomly if call setPattern() without timeout
        }

        imageObj.src = url;
    },

    createTile: function (coords, done) {

        var tile = document.createElement('canvas'),
        url = this.getTileUrl(coords);
        tile.width = this.options.tileSize.x;
        tile.height = this.options.tileSize.y;
        this._drawTileInternal(tile, coords, url, L.bind(done, null, null, tile));

        return tile;            
    }

});

代码正常工作,加载的图块的图像得到处理,其颜色也发生了变化。但是,在_drawTileInternal::resizeImage中,我想从画布中获取每个像素的GPS坐标。关于为图层设置的基础地图和范围,我该怎么做?应该将我的图层添加为仅用于自定义区域的地图,而不能覆盖antire世界。

0 个答案:

没有答案