Javascript 如何将WMS瓷砖层转换为画布瓷砖层

我正在使用传单将wms Tillelayer放置到地图上。 平铺中的图像没有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构建一个对象，这样我就可以将这些匹配到画布TileLayer的tilePoints

有没有人以前做过这件事，或者可以帮我

我正在使用主干、require和jquery，在传单旁边我找到了一个解决方案。 从wms层请求._平铺时，您将拥有一个具有像素位置关键点的对象。看起来像：

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

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

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

现在我有了url。我可以加载画布。 完整代码如下：

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

---

我的第一条评论也不是很好，所以删除了这个。虽然我真的不明白编辑那部分的意义。不是当有人需要帮助的时候。我确实理解你的挫败感，我很抱歉，我不想造成这种挫败感。尽管如此，请通读提供的链接，这解释了为什么这样的编辑是有帮助的，即将系统中的噪音保持在最低限度。tnx对于响应，我确实阅读并理解了它。找到了解决问题的办法。我很快就会贴出来。