openlayers加载0级一张的TMS和加载0级两张的WMTS标准的切片地图服务

openlayers加载0级一张的TMS和加载0级两张的WMTS标准的切片地图服务

在使用openlayers加载影像地图的过程中，遇到加载TMS标准的本地离线切片显示异常的问题，包括显示层级的异常，和我其他的数据无法对应的问题，查阅资料后发现是坐标系和0级地图分幅的问题，特此记录

场景

• 加载vectorLayer矢量图层和影像底图
• 以XYZ方式加载WMTS标准的影像底图（Arcgis本地影像图切片）没有问题
• 同样的方式加载下载的谷歌地图影像不能和矢量图层对应

出现问题的原因

查阅后发现问题主要在以下几点

• 坐标系不同，openlayers默认底图的坐标系是EPSG:3857，而我下载的是EPSG:4326，一个投影一个地理
• 地图分幅不同，我下载的谷歌影像地图0级是一张地图，而openlayers默认的0级别是两张地图分幅

解决方法

解决方法也很简单，要么下载地图切片时候，选择和openlayers一致的0级别地图张数，要么通过openlayers代码进行调整，这里附一下第二种解决方法

import { Tile } from 'ol/layer';
import { XYZ} from 'ol/source';
import { get as getProj } from 'ol/proj';
import { creatXYZ} from 'ol/tilegrid';

let baseImgLayer = new Tile({
	name: 'layername',
	source: new XYZ({
		url: '你的url'，
		tileGrid = createXYZ({
			extent: getProj('EPSG:4326').getExtent(),
			maxResolution: 0.703125,
			maxZoom: 22,
			tileSize: Number(256)
		}),
		projection: 'EPSG:4326'
	})
})