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],
})