一、普通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 rectanglelet 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 },]})})