如何将WMS TileLayer转换为Canvas TileLayer

Question

我正在使用Leaflet将wms tileLayer放置到地图上。 磁贴中的图像没有xyz坐标。

加载图像后，我希望将图像转换为画布。

我尝试了几件事。 将wms tileLayer添加到地图，并在加载时运行脚本以创建画布。 但是，当然，这会使脚本运行太多。 除此之外，我的地图已满载图像，而不是仅在地图上的wms层存在。

它看起来像这样：

 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;

},

就像我说的那样，此脚本运行了很多东西，因此我认为最好使用图像的URL和tilePoints构建一个对象，以便将它们与Canvas TileLayer的tilePoints匹配。

外面有人做过这个吗，或者可以帮助我吗？

我正在使用Backbone，require和jquery在传单旁边

Answer 1

我找到了解决方案。 当从wms层请求._tiles时，将有一个带有pixelPosition键的对象。 看起来像：

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

设置画布时，您将收到layerPoints。 使用图层点，我可以从图块中获取图像并使用它。

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

所以现在我有了网址。 我可以加载画布。 完整代码在这里：

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);
},