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