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

如何将WMS TileLayer转换为Canvas TileLayer

1 个答案: