How to convert WMS TileLayer to Canvas TileLayer

Question

I am using Leaflet to place a wms tileLayer to the map. The images in the tiles do not have a xyz coordinates.

After loading the images I would like the images to be converted into a canvas.

I tried several things. Adding the wms tileLayer to the map and on load running a script to create the canvas. However, of course, this runst the script way too much. Besides that, my map is fully loaded with the images in stead of only there where the wms layer is on the map.

it looks a bit like this:

 this.currentPhoto = L.tileLayer.wms(geoURL), {

     layers: layerName,
     format: 'image/png',
     opacity: 1,
     styles: '',
     transparent: true,
     attribution: "",
     version: "2.0.0",
     srs: "EPSG:4326"

}).addTo(map).bringToFront();

this.currentPhoto.on('tileload', function(e) {
    setCanvasTiles(e);
});

setCanvasTiles: function(e) {
    var that = this;
    var url = e.url;
    var tiles = HKV.satPhotoView.currentPhoto._tiles;

    this.canvasTiles = new L.TileLayer.Canvas({
        minZoom: 4,
        maxZoom: 14,
        attribution: '',
        tms: true,
        opacity: 0.8,
        noWrap: true,
        unloadInvisibleTiles: true,
        reuseTiles: false,
        transparent: true
    });

    this.canvasTiles.drawTile = function(canvas, tilePoint, zoom) {

        that.drawCanvasTile(canvas, tilePoint, zoom, url);

    };

    this.canvasTiles.addTo(this.mapInfo).bringToFront();            

},

drawCanvasTile: function(canvas, tilePoint, zoom, url) {
    var that = this;
    var ctx = canvas.getContext("2d");
    var img = new Image();

    img.onload = function(){
        var height = 256;
        var width = 256;
        ctx.drawImage(img,0,0);
        imageData = ctx.getImageData(0, 0, 256, 256);
        $(canvas).data("origImgData",imageData);
        //color the pixels of the canvas
    };

    img.src = url;

},

Like I said, this script runs to much, so I think it is best to build an object with the URL of the image and the tilePoints so I can match these to the tilePoints of the Canvas TileLayer.

Is there anybody out there who did this before, or can help me out?

I am using Backbone, require and jquery next to leaflet

Answer 1

I found a solution. When requesting the ._tiles from the wms layer, you will have an object with the keys of the pixelPosition. looking something like:

tiles = {
   "127:47": {data},
   "127:48": {data},
}

when setting the canvas you will receive the layerPoints. Using the layerpoints I can get the image from the tile and use this.

var newKey = tilePoint.x + ":" + tilePoint.y;
var url = tiles[newKey].src;

So now I have the url. I can load the canvas. Full code here:

this.currentPhoto = L.tileLayer.wms(geoURL), {

    layers: layerName,
    format: 'image/png',
    opacity: 1,
    styles: '',
    transparent: true,
    attribution: "",
    version: "2.0.0",
    srs: "EPSG:4326"

}).addTo(map).bringToFront();

var test = setTimeout(function() {
    that.setCanvasTiles();
}, 500);

setCanvasTiles: function() {

    var that = this;
    var tiles = this.currentPhoto._tiles;

    this.canvasTiles = L.tileLayer.canvas({
        tms: true,
        opacity: 0.8,
        noWrap: true,
        unloadInvisibleTiles: true,
        reuseTiles: false,
        transparent: true
    });

    this.canvasTiles.drawTile = function(canvas, tilePoint, zoom) {

        var newKey = tilePoint.x + ":" + tilePoint.y;
        var url = tiles[newKey].src;

        var ctx = canvas.getContext("2d");
        var img = new Image();

        img.onload = function(){
            var height = 256;
            var width = 256;
            ctx.drawImage(img,0,0);
            var imageData = ctx.getImageData(0, 0, 256, 256);
            $(canvas).data("origImgData", imageData);
            console.log(imageData);
        };

        img.src = url;

    };
    this.canvasTiles.addTo(this.map).bringToFront();
    this.map.removeLayer(this.currentPhoto);
},