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);