openlayer4加载地图

这篇文章主要是使用openlayer加载各类地图，在这不会赘述其原理（因为我也不会），只是几个简单的实例。如果你想了解其原理，可以看这篇openlayer3 教程及介绍，写的真的不错，博主入门也是看的这篇文章。

加载百度地图

var projection = ol.proj.get("EPSG:3857");
var resolutions = [];
for(var i = 0; i <= 19; i++) {
	resolutions[i] = Math.pow(2, 18 - i);
}
var tilegrid = new ol.tilegrid.TileGrid({ //22293.877345016692
	origin: [-147.3821707237512, 22380.929812282324],
	resolutions: resolutions
});

/**
 * 百度影像图
 * */
var baidu_img_layer = new ol.layer.Tile({
	source: new ol.source.TileImage({
		projection: projection,
		tileGrid: tilegrid,
		tileUrlFunction: function(tileCoord, pixelRatio, proj) {
			if(!tileCoord) {
				return "";
			}
			var z = tileCoord[0];
			var x = tileCoord[1];
			var y = tileCoord[2];

			if(x < 0) {
				x = "M" + (-x);
			}
			if(y < 0) {
				y = "M" + (-y);
			}
			return "https://ss1.bdstatic.com/8bo_dTSlR1gBo1vgoIiO_jowehsv/starpic/?qt=satepc&u=x=" + x + ";y=" + y + ";z=" + z + ";v=009;type=sate&fm=46&app=webearth2&v=009&udt=20180125";
		}
	}),
	zIndex: 0,
});

//初始化地图
	baseMap = new ol.Map({
		// 设置地图控件比如：比例尺
		controls: ol.control.defaults({
			attribution: false,
			rotate: false,
			zoom: true
		}),
		 // 设置地图图层   图层的顺序有各图层的zIndex决定，同一个zIndex的由layers中的排序决定
		layers: [
			baidu_img_layer
		],
		view: new ol.View({
			projection: projection,
			//extent: extent, 地图可拖动的范围
			resolutions: resolutions,
			center: [13524479.998674557, 3669507.64428644], //地图初始中心点
			zoom: 1,
			minZoom: 0,
			maxZoom: 19
		}),
		target: 'map',//html中展示地图的div的id
		loadTilesWhileAnimating: true //开启动画，设置是否显示
	});

1.百度地图地址：

影像图：https://ss1.bdstatic.com/8bo_dTSlR1gBo1vgoIiO_jowehsv/starpic/

矢量图：https://ss1.bdstatic.com/8bo_dTSlR1gBo1vgoIiO_jowehsv/onlinelabel/

自定义颜色图：http://api1.map.bdimg.com/customimage/tile?&x="+x+"&y="+y+"&z="+z+"&udt="（udt后面是自己配置的属性，可以在浏览器中查看）

2.  加载天地图：

//wmts服务参数
var projection = ol.proj.get('EPSG:4326');
var projectionExtent = projection.getExtent();
var size = ol.extent.getWidth(projectionExtent) / 256;
var resolutions = new Array(18);
var matrixIds = new Array(18);
for(var z = 1; z <= 18; ++z) {
	resolutions[z] = size / Math.pow(2, z);
	matrixIds[z] = z;
}

//天地图影像图，右下角地图切换
var temporal_image_layer = new ol.layer.Tile();
//天地图矢量底图 2
var tdt_road_layer = new ol.layer.Tile({
	name: '矢量底图',
	source: new ol.source.WMTS({
		url: 'http://t1.tianditu.com/vec_c/wmts',
		layer: 'vec',
		matrixSet: 'c',
		format: 'tiles',
		projection: projection,
		tileGrid: new ol.tilegrid.WMTS({
			origin: ol.extent.getTopLeft(projectionExtent),
			resolutions: resolutions,
			matrixIds: matrixIds
		}),
		style: 'default'
	}),
	visible: true,
	zIndex: 2
});

其中的地址可以去：http://service.tianditu.gov.cn下面找。其中的layer是各个图层服务中的

3.加载高德地图

其projection: 'EPSG:4326'

var gaodeMapLayer = new ol.layer.Tile({
                source: new ol.source.XYZ({
                    url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
                })
            });

写的比较简单，没有详细介绍各个步骤的作用，但亲测可用。有什么问题可以联系我，我会尽可能的回答。

此博客仅供学习参考，数据所属归各地图提供者所属，如有需要请自行联系