我在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世界。