OpenLayers 瓦片图层放大显示

OpenLayers 瓦片图层放大显示

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

代码如下：

import { Map, View } from 'ol'
import { Tile as TileLayer } from 'ol/layer'
import { XYZ as XYZSource } 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({
  source: new XYZSource({
    url: 'https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=你的key',
    tileGrid: tileGrid, // 指定切片的网格参数
  }),
})

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