openlayer添加底图服务（街道图，卫星图，地形图）

一、写在前面

通过阅读博客，你可以了解到：

• 常用底图的类型，提供相关URL可测试
• OL中调用底图与切换底图的方式

二、底图常用类型

街道地图

OSM街道地图

// 测试地址
http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png

Google街道地图

// 测试地址
http://mt2.google.cn/vt/lyrs=m@167000000&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}

天地图街道地图

// 测试地址
// 街道标注
http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=5a257cd2df1b3311723bd77b0de14baf

// 街道地图
http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=5a257cd2df1b3311723bd77b0de14baf

高德街道地图

// 测试地址
http://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}

影像地图

ArcGIS影像地图

// 测试地址
https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}

Google影像地图

// 测试地址
http://mt3.google.cn/vt/lyrs=s&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}

天地图影像地图

// 测试地址
http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=5a257cd2df1b3311723bd77b0de14baf

地形地图

天地图地形图

// 地形
http://t4.tianditu.com/DataServer?T=ter_w&x={x}&y={y}&l={z}&tk=5a257cd2df1b3311723bd77b0de14baf
// 标注
http://t4.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=5a257cd2df1b3311723bd77b0de14baf

ArcGIS地形图

https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}

三、OpenLayers调用底图方式

XYZ方式

加载的图层切片数据URL中含有XYZ格式模板

   let layer = new ol.layer.Tile({
        source: 
	        new ol.source.XYZ({
	        	url: 'http://mt3.google.cn/vt/lyrs=t&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=Ga'
	        })
    })
   view.addLayer(layer);

WMTS

Web地图瓦片服务,WMTS提供了一种采用预定义地图瓦片发布数字地图服务的标准化解决方案，它最重要的特征是采用瓦片缓存技术缓解WebGIS服务器端数据处理的压力，提高前后端交互响应速度。

	// 定义投影数据
	var projection = ol.proj.get('EPSG:3857');
	var projectionExtent = projection.getExtent();
	var size = ol.extent.getWidth(projectionExtent) / 256;
	var resolutions = new Array(14);
	var matrixIds = new Array(14);
	for (var z = 0; z < 14; ++z) {
		resolutions[z] = size / Math.pow(2, z);
		matrixIds[z] = z;
	}

	// 添加图层
	let layer = new ol.layer.Tile({
		opacity: 0.7,
		source: new ol.source.WMTS({
			url:
			'https://services.arcgisonline.com/arcgis/rest/' +
			'services/Demographics/USA_Population_Density/MapServer/WMTS/',
			layer: '0',
			matrixSet: 'EPSG:3857',
			format: 'image/png',
			projection: projection,
			tileGrid: new ol.tilegrid.WMTS({
				origin: ol.extent.getTopLeft(projectionExtent),
				resolutions: resolutions,
				matrixIds: matrixIds,
			}),
			style: 'default',
			wrapX: true,
		}),
	})

	map.addLayer(layer);