如何将 WMS TileLayer 转换为 Canvas TileLayer

Question

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

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

我尝试了几件事。将 wms tileLayer 添加到地图并加载运行脚本以创建 canvas。然而，当然，这运行脚本的方式太多了。除此之外，我的地图已完全加载图像，而不是仅在地图上的 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 构建一个对象，这样我就可以将它们与 [= 的 tilePoints 相匹配29=] 瓷砖图层。

有没有人以前做过这个，或者可以帮助我？

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

Answer 1

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

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

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

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

所以现在我有了 url。我可以加载 canvas。完整代码在这里：

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

如何将 WMS TileLayer 转换为 Canvas TileLayer

How to convert WMS TileLayer to Canvas TileLayer

javascript

jquery

backbone.js

leaflet