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