openlayer4加载天地图

　　最近因为工作原因很少撸博客，感觉自己堕落了。公司有个项目整个都是我写，所以想写一些标准的东西出来，以后其他项目也可以拿来用，所以很多东西需要细琢磨。这一琢磨不要紧，时间哗哗的过。目前虽然项目可正常运行，但感觉还是有一些东西需要优化改进。最近也是觉得自己还是太菜了，很多东西真的拿不准，一个细小的问题都要思考很长时间，google半天甚至一天看n篇文章综合比较才制定套路，都是自己见识少知识不足导致。最近手头又多几个活，需要设计好才能稳定使用，所以还是需要花费大量时间的。加油吧，菜鸡。

/**
 * 获取天地图wmts服务图层实例
 * 
 * @param {String} t 
 * 1.'vec_c' 全球矢量地图服务
 * 2.'img_w' 全球影像地图服务
 * 3.'cva_c' 全球矢量中文注记服务
 * 4.'img_c' 全球影像底图服务
 * 5.'cia_c' 全球影像中文注记服务
 * 6.更多服务可查询http://www.tianditu.com/service/query.html#
 * @returns 
 */
function getTdtLayer(t = 'vec_c') {
  let url = 'http://t0.tianditu.com/DataServer?T=' + t + '&X={x}&Y={y}&L={z}'
  let projection = ol.proj.get('EPSG:4326')
  let projectionExtent = [-180, -90, 180, 90]
  let maxResolution = (ol.extent.getWidth(projectionExtent) / (256 * 2))
  let resolutions = new Array(16)
  for (let z = 0; z < 16; ++z) {
    resolutions[z] = maxResolution / Math.pow(2, z)
  }
  var tileOrigin = ol.extent.getTopLeft(projectionExtent)
  var layer = new ol.layer.Tile({
    extent: [-180, -90, 180, 90],
    source: new ol.source.TileImage({
      tileUrlFunction: function (tileCoord) {
        var z = tileCoord[0] + 1
        var x = tileCoord[1]
        var y = -tileCoord[2] - 1
        var n = Math.pow(2, z + 1)
        x = x % n
        if (x * n < 0) {
          x = x + n
        }
        return url.replace('{z}', z.toString())
          .replace('{y}', y.toString())
          .replace('{x}', x.toString())
      },
      projection: projection,
      tileGrid: new ol.tilegrid.TileGrid({
        origin: tileOrigin,
        resolutions: resolutions,
        tileSize: 256
      })
    })
  })
  return layer
}

module.exports.getTdtLayer = getTdtLayer

转载自：https://blog.csdn.net/qq451354/article/details/77202194