OpenLayers叠加geoserverWMTS服务

在openlayers中使用切片的方式叠加geoserver服务；就需要使用geoserver的WMTS的方式来创建图层，创建的方式如下：

/**
 * @description  geoserver wmts  切片的加载
 * @param {Object} olmap 地图对象
 * @param {Array} projection 投影坐标系
 * @param {Array} extent 区域默认【-180，-90,180,90】
 * @param {Object} item 发布的图层对象
 * @param {Object} item.layername 发布的服务名称
 * @param {Object} item.url 发布的服务的url地址
 * @param {Object} item.id 发布的服务的id
 * @param {Object} appConfig 相关参数配置
 * @param {String} appConfig.map.proj 坐标系 例如 EPSG:4326  或者 EPSG:4490
 * @param {String} appConfig.map.maxZoom 地图的缩放最大层级
 * @param {Array} appConfig.map.resolutions.reso 地图分辨率参数
 * @param {Number}  zindex   图层的层级
*/
var  getGeoServerWMTS = (olmap , projection , extent ,item , appConfig , zindex) =>{
  var layer = null
  var TILEMATRIXArr = []
  for(let i=0;i<=appConfig.map.maxZoom + 2 ; i++) {
    TILEMATRIXArr.push(`${appConfig.map.proj}:${i}`)
  }
  var params = {
    'VERSION': '1.0.0',
    'LAYER': item.layername,
    'STYLE': '',
    'TILEMATRIX': TILEMATRIXArr,
    'TILEMATRIXSET': appConfig.map.proj,
    'SERVICE': 'WMTS',
    'FORMAT': "image/png"
  };
  var url = item.url.indexOf("geoserver") !=-1? `${item.url.split("geoserver")[0]}geoserver/gwc/service/wmts`:item.url
  var source = new olmap.source.WMTS({
    url: url,
    layer: params['LAYER'],
    matrixSet: params['TILEMATRIXSET'],
    format: params['FORMAT'],
    projection: projection,
    tileGrid: new olmap.tilegrid.WMTS({
      tileSize: [256,256],
    //   extent: extent,
      origin: [-180.0, 90.0],
      resolutions: appConfig.map.resolutions.reso,
      matrixIds: params['TILEMATRIX']
    }),
    style: params['STYLE'],
    wrapX: true
  });
  layer = new olmap.layer.Tile({
    id: item.id,
    zIndex: zindex,
    source:source
  })
  return layer
}

以上是个人总结，有不懂的可以评论加关注询问哦。