arcgis js 4.x实现类似openalayers加载tilewms图层效果

一、普通wms与tilewms区别

相同点：都是加载WMS服务。

不同点：TitleWMS会把当前可视窗口根据网格（开发者可以在调用OpenLayers api的时候自定义）切分，一片一片地返回回来，在前端进行整合。而ImageWMS则不会进行切割，每次请求都是只会返回一个当前窗口可见地地图图片。如果WMS服务对应地数据比较大并且网络条件不是很好的时候，TileWMS交互体验更好一点（因为做了切割，每次返回回来的图片大小都比较小），而ImageWMS是返回一整个图片，看起来会有较大的卡顿时间，交互感觉不好。

二、封装一个TileWMSLayer图层，代码如下：

 let TileWMSLayer = BaseTileLayer.createSubclass({
                properties: {
                    urlTemplate: null,
                    spatialReference: null,
                    tileInfo: null,

                },
                getTileUrl: function (level, row, col) {
                    // return this.urlTemplate.replace("{z}", level).replace("{x}", col).replace("{y}", row);
                },
                fetchTile: function (level, row, col, options) {
                    let out = this.getTileBounds(level, row, col);
                    const url = this.urlTemplate + "&BBOX=" + out[0] + "," + out[1] + "," + out[2] + "," + out[3];
                    // 基于生成的url请求平铺
                    return esriRequest(url, {
                        responseType: "image",
                        signal: options && options.signal,
                    }).then(function (response) {
                        let image = response.data;
                        let width = this.tileInfo.size[0];
                        let height = this.tileInfo.size[0];
                        // create a canvas with a filled rectangle
                        let canvas = document.createElement("canvas");
                        let context = canvas.getContext("2d");
                        canvas.width = width;
                        canvas.height = height;
                        context.drawImage(image, 0, 0, width, height);
                        return canvas;
                    }.bind(this));
                }
            });

三、对TileWMSLayer进行实例化，注意切片原点与geoserver设置的该坐标系的网格集有关，为xmin,ymax值；

 let tileLayer = new TileWMSLayer({
                urlTemplate: "http://localhost:18080/geoserver/jjgis/wms?tiled=true&format=image/png&LAYERS=jjgis:view_equ_pipeline_new&tilesOrigin=-5385313.720203,8002161.202151&SRS=EPSG:0&VERSION=1.1.1&SERVICE=WMS&REQUEST=GetMap&WIDTH=256&HEIGHT=256&TRANSPARENT=true",
                spatialReference: new SpatialReference({wkt:wkt}),
              
                tileInfo: new TileInfo({
                    dpi: 96,
                    format: 'image/png',
                    spatialReference: new SpatialReference({wkt:wkt}),
                    size : [256,256],
                    origin: {
                        x: -5385313.720203,
                        y: 8002161.202151
                    },
                    lods: [
                    { "level": 0, "scale": 106726486.36551324, "resolution":29883.416182343703 },
                      { "level": 1, "scale": 53363243.18275662, "resolution": 14941.708091171851 },
                      { "level": 2, "scale": 26681621.59137831, "resolution": 7470.854045585926 },
                      { "level": 3, "scale": 13340810.795689154, "resolution": 3735.427022792963 },
                      { "level": 4, "scale": 6670405.397844577, "resolution": 1867.7135113964814 },
                      { "level": 5, "scale": 3335202.6989222886, "resolution": 933.8567556982407},
                      { "level": 6, "scale": 1667601.3494611443, "resolution": 466.92837784912035 },
                      { "level": 7, "scale": 833800.6747305722, "resolution": 233.46418892456018 },
                      { "level": 8, "scale": 416900.3373652861, "resolution": 116.73209446228009 },
                      { "level": 9, "scale": 208450.16868264304, "resolution": 58.366047231140044 },
                      { "level": 10, "scale": 104225.08434132152, "resolution": 29.183023615570022 },
                      { "level": 11, "scale": 52112.54217066076, "resolution": 14.591511807785011 },
                      { "level": 12, "scale": 26056.27108533038, "resolution": 7.2957559038925055 },
                      { "level": 13, "scale": 13028.13554266519, "resolution": 3.6478779519462528 },
                      { "level": 14, "scale": 6514.067771332595, "resolution": 1.8239389759731264 },
                      { "level": 15, "scale": 3257.0338856662975, "resolution": 0.9119694879865632 },
                      { "level": 16, "scale": 1628.5169428331487, "resolution": 0.4559847439932816 },
                      { "level": 17, "scale": 814.2584714165744, "resolution": 0.2279923719966408 },
                      { "level": 18, "scale": 407.1292357082872, "resolution": 0.1139961859983204 },
                      { "level": 19, "scale": 203.5646178541436, "resolution": 0.0569980929991602 },
                      { "level": 20, "scale": 101.7823089270718, "resolution": 0.0284990464995801 },
                    ]
                })
            })