openlayers使用高德地图放大到一定级别空白问题

项目中使用的高德地图，在放大到一定级别的时候，地图变成空白。

高德地图的显示层级最大是18级，超出18级时高德服务会返回超限的水印瓦片。
在特定的需求场景下，需要将地图层级显示到18级以上，超出18级时仍然使用18级的瓦片进行放大显示，这个时候你就需要自定义一下图层服务的tileGrid。
代码如下：

import { Map, View } from 'ol'
import { Tile as TileLayer } from 'ol/layer'
import { XYZ } from 'ol/source'
import { get as getProjection } from 'ol/proj'
import { getTopLeft, getWidth } from 'ol/extent'
import TileGrid from 'ol/tilegrid/TileGrid'

const projection = getProjection('EPSG:3857')
const tileSizePixels = 256
const tileSizeMtrs = getWidth(projection.getExtent()) / tileSizePixels
const matrixIds = []
const resolutions = []
for (let i = 0; i <= 18; i++) {
  matrixIds[i] = i
  resolutions[i] = tileSizeMtrs / Math.pow(2, i)
}

const tileGrid = new TileGrid({
  origin: getTopLeft(projection.getExtent()),
  resolutions: resolutions,
  matrixIds: matrixIds,
})

const amapLayer = new TileLayer({
  visible: true,
  title: 'gaode,
  source: new XYZ({
    url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scl=1&style=7&x={x}&y={y}&z={z}',
    crossOrigin: 'Anonymous',
    tileGrid: tileGrid, // 指定切片的网格参数
  }),
})

const map = new Map({
  target: 'map',
  view: new View({
    center: [0, 0],
    zoom: 18,
  }),
  layers: [amapLayer],
})