【Openlayers】解决天地图缩放到18级以上无影像问题

问题描述

天地图缩放到18级以上后显示该区域暂无影像。

---

原因分析：

天地图影像只提供最高18级卫片

---

解决方案：

设置卫片图层只加载18级卫片，地图缩放到20级，还是能显示18级卫片。废话不多说，直接上代码

 	  import { get as getProjection } from 'ol/proj.js'
      import { getWidth, getTopLeft } from 'ol/extent.js'
      import TileGrid from 'ol/tilegrid/TileGrid'

      const projection = getProjection('EPSG:4326') //坐标系
      const projectionExtent = projection.getExtent()
      const size = getWidth(projectionExtent) / 256
      const resolutions = new Array(18)
      const matrixIds = new Array(18)
      for (let z = 0; z < 18; ++z) {
        resolutions[z] = size / Math.pow(2, z)
        matrixIds[z] = z
      }
      
      const tileGrid = new TileGrid({
        origin: getTopLeft(projection.getExtent()),
        resolutions: resolutions,
        matrixIds: matrixIds
      })

      //获取天地图图层
      const getTDTLayer = (url, tk, type)=>{
        let tdtLayer = new TileLayer({
          source: new XYZ({
            crossOrigin: 'anonymous',
            url: url + tk + '&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=' + type + '&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={z}&TILECOL={x}&TILEROW={y}',
            projection: new proj.get('EPSG:4326'),
            tileGrid: tileGrid
          })
        })
        return tdtLayer
      }